I made extensive 2 days research on the topic, but there is no really well explained piece that would work.
So the flow is following:
load mp3 (store bought) cbr 320 into wavesurfer
apply all the changes you need
download processed result back to mp3 file (without usage of server)
Ive seen online apps that can do that, nothing is transmitted to server, all happens in the browser.
when we inspect wavesurfer, we have access to these:
The goal would be to use already available references from wavesurfer to produce the download mp3.
from my understanding this can be done with MediaRecorder, WebCodecs API or some libraries like lamejs.
Ive tried to find working example of how to do it with two first methods but without luck. I also tried to do it with lamejs using their example provided on the git but i am getting errors from the lib that are hard to debug, most likely related to providing wrong input.
So far i only managed to download wav file using following script:
handleCopyRegion = (region, instance) => {
var segmentDuration = region.end - region.start;
var originalBuffer = instance.backend.buffer;
var emptySegment = instance.backend.ac.createBuffer(
originalBuffer.numberOfChannels,
Math.ceil(segmentDuration * originalBuffer.sampleRate),
originalBuffer.sampleRate
);
for (var i = 0; i < originalBuffer.numberOfChannels; i++) {
var chanData = originalBuffer.getChannelData(i);
var emptySegmentData = emptySegment.getChannelData(i);
var mid_data = chanData.subarray(
Math.ceil(region.start * originalBuffer.sampleRate),
Math.ceil(region.end * originalBuffer.sampleRate)
);
emptySegmentData.set(mid_data);
}
return emptySegment;
};
bufferToWave = (abuffer, offset, len) => {
var numOfChan = abuffer.numberOfChannels,
length = len * numOfChan * 2 + 44,
buffer = new ArrayBuffer(length),
view = new DataView(buffer),
channels = [],
i,
sample,
pos = 0;
// write WAVE header
setUint32(0x46464952); // "RIFF"
setUint32(length - 8); // file length - 8
setUint32(0x45564157); // "WAVE"
setUint32(0x20746d66); // "fmt " chunk
setUint32(16); // length = 16
setUint16(1); // PCM (uncompressed)
setUint16(numOfChan);
setUint32(abuffer.sampleRate);
setUint32(abuffer.sampleRate * 2 * numOfChan); // avg. bytes/sec
setUint16(numOfChan * 2); // block-align
setUint16(16); // 16-bit (hardcoded in this demo)
setUint32(0x61746164); // "data" - chunk
setUint32(length - pos - 4); // chunk length
// write interleaved data
for (i = 0; i < abuffer.numberOfChannels; i++)
channels.push(abuffer.getChannelData(i));
while (pos < length) {
for (i = 0; i < numOfChan; i++) {
// interleave channels
sample = Math.max(-1, Math.min(1, channels[i][offset])); // clamp
sample = (0.5 + sample < 0 ? sample * 32768 : sample * 32767) | 0; // scale to 16-bit signed int
view.setInt16(pos, sample, true); // update data chunk
pos += 2;
}
offset++; // next source sample
}
// create Blob
return new Blob([buffer], { type: "audio/wav" });
function setUint16(data) {
view.setUint16(pos, data, true);
pos += 2;
}
function setUint32(data) {
view.setUint32(pos, data, true);
pos += 4;
}
};
const cutSelection = this.handleCopyRegion(
this.wavesurfer.regions.list.cut,
this.wavesurfer
);
const blob = this.bufferToWave(cutSelection, 0, cutSelection.length);
// you can now download wav from the blob
Is there a way to avoid making wav and right away make mp3 and download it, or if not make mp3 from that wav, if so how it can be done?
I mainly tried to use wavesurfer.backend.buffer as input, because this reference is AudioBuffer and accessing .getChannelData(0|1) gives you left and right channels. But didnt accomplish anything, maybe i am thinking wrong.
Alright, here is the steps we need to do:
Get buffer data from the wavesurfer player
Analyze the buffer to get the number of Channels(STEREO or MONO), channels data and Sample rate.
Use lamejs library to convert buffer to the MP3 blob file
Then we can get that download link from blob
Here is a quick DEMO
and also the JS code:
function downloadMp3() {
var MP3Blob = analyzeAudioBuffer(wavesurfer.backend.buffer);
console.log('here is your mp3 url:');
console.log(URL.createObjectURL(MP3Blob));
}
function analyzeAudioBuffer(aBuffer) {
let numOfChan = aBuffer.numberOfChannels,
btwLength = aBuffer.length * numOfChan * 2 + 44,
btwArrBuff = new ArrayBuffer(btwLength),
btwView = new DataView(btwArrBuff),
btwChnls = [],
btwIndex,
btwSample,
btwOffset = 0,
btwPos = 0;
setUint32(0x46464952); // "RIFF"
setUint32(btwLength - 8); // file length - 8
setUint32(0x45564157); // "WAVE"
setUint32(0x20746d66); // "fmt " chunk
setUint32(16); // length = 16
setUint16(1); // PCM (uncompressed)
setUint16(numOfChan);
setUint32(aBuffer.sampleRate);
setUint32(aBuffer.sampleRate * 2 * numOfChan); // avg. bytes/sec
setUint16(numOfChan * 2); // block-align
setUint16(16); // 16-bit
setUint32(0x61746164); // "data" - chunk
setUint32(btwLength - btwPos - 4); // chunk length
for (btwIndex = 0; btwIndex < aBuffer.numberOfChannels; btwIndex++)
btwChnls.push(aBuffer.getChannelData(btwIndex));
while (btwPos < btwLength) {
for (btwIndex = 0; btwIndex < numOfChan; btwIndex++) {
// interleave btwChnls
btwSample = Math.max(-1, Math.min(1, btwChnls[btwIndex][btwOffset])); // clamp
btwSample = (0.5 + btwSample < 0 ? btwSample * 32768 : btwSample * 32767) | 0; // scale to 16-bit signed int
btwView.setInt16(btwPos, btwSample, true); // write 16-bit sample
btwPos += 2;
}
btwOffset++; // next source sample
}
let wavHdr = lamejs.WavHeader.readHeader(new DataView(btwArrBuff));
//Stereo
let data = new Int16Array(btwArrBuff, wavHdr.dataOffset, wavHdr.dataLen / 2);
let leftData = [];
let rightData = [];
for (let i = 0; i < data.length; i += 2) {
leftData.push(data[i]);
rightData.push(data[i + 1]);
}
var left = new Int16Array(leftData);
var right = new Int16Array(rightData);
//STEREO
if (wavHdr.channels===2)
return bufferToMp3(wavHdr.channels, wavHdr.sampleRate, left,right);
//MONO
else if (wavHdr.channels===1)
return bufferToMp3(wavHdr.channels, wavHdr.sampleRate, data);
function setUint16(data) {
btwView.setUint16(btwPos, data, true);
btwPos += 2;
}
function setUint32(data) {
btwView.setUint32(btwPos, data, true);
btwPos += 4;
}
}
function bufferToMp3(channels, sampleRate, left, right = null) {
var buffer = [];
var mp3enc = new lamejs.Mp3Encoder(channels, sampleRate, 128);
var remaining = left.length;
var samplesPerFrame = 1152;
for (var i = 0; remaining >= samplesPerFrame; i += samplesPerFrame) {
if (!right)
{
var mono = left.subarray(i, i + samplesPerFrame);
var mp3buf = mp3enc.encodeBuffer(mono);
}
else {
var leftChunk = left.subarray(i, i + samplesPerFrame);
var rightChunk = right.subarray(i, i + samplesPerFrame);
var mp3buf = mp3enc.encodeBuffer(leftChunk,rightChunk);
}
if (mp3buf.length > 0) {
buffer.push(mp3buf);//new Int8Array(mp3buf));
}
remaining -= samplesPerFrame;
}
var d = mp3enc.flush();
if(d.length > 0){
buffer.push(new Int8Array(d));
}
var mp3Blob = new Blob(buffer, {type: 'audio/mpeg'});
//var bUrl = window.URL.createObjectURL(mp3Blob);
// send the download link to the console
//console.log('mp3 download:', bUrl);
return mp3Blob;
}
Let me know if you have any question about the code
I'm studying calc. I'm having problem with re-selecting value and calc.
Here is my whole program
https://jsfiddle.net/diessses/c9ykmsf2/6/
When user select value then press submit. it works perfectly. However when user change such as 'cb_amount' , s_month and 's_year' Then click submit below code part displays OLD result. Other part result works fine. Could you teach me write code please?
// PAY_START_END_MONTH_FMT message
const PAY_START_END_MONTH_FMT = "If loan start Month is :start ,<br> Final loan paying will be :end ";
let s_month = document.getElementById(elementId.s_month).value;
if (s_month) {
let s_year = document.getElementById(elementId.s_year).value;
let date = new Date();
date.setMonth(s_month - 1);
date.setFullYear(s_year);
let startMonth = DateManager.formatDate(date, DateManager.getFormatString().YYYY_MM);
DateManager.addMonth(date, (years * 12) - 1);
let endMonth = DateManager.formatDate(date, DateManager.getFormatString().YYYY_MM);
document.getElementById("pay_start_end_month").innerHTML = PAY_START_END_MONTH_FMT.replace(":start", startMonth).replace(":end", endMonth);
}
// CB_SENTENCE_FMT message
const CB_SENTENCE_FMT = "Combined bonus amount will be :j_actual_cb_ttl. Paying times is :j_cbTimes . mothly paying is :j_monthly_bns_payment";
if (bSecondToLastTtl > 1) {
let j_actual_cb_ttl = ValueUtils.comma(bSecondToLastTtl);
let j_cbTimes = cbTimes;
let j_monthly_bns_payment = ValueUtils.comma(monthly_b);
document.getElementById("j_cb_sentence").innerHTML = CB_SENTENCE_FMT.replace(":j_actual_cb_ttl", j_actual_cb_ttl).replace(":j_cbTimes", j_cbTimes).replace(":j_monthly_bns_payment", j_monthly_bns_payment);
}
There are a lot of variables which you are have declaration as "const". Try changing those to "let". Read about it here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let. I have forked your code and tried, seems to be updating the data based on the new values.
Forked fiddle https://jsfiddle.net/b5g73x02/. Below is what I changed.
let cbTimes = years * 2; //
let diff = amount - downpayment;
let justDevideCbAmount = cb_amount / cbTimes;
let monthly_b = (Math.floor(justDevideCbAmount / 100) * 100);
let bSecondToLastTtl = monthly_b * cbTimes;
let paymentTimes = years * 12;
let interestMod = 10000 + (interest * 100);
let ttlWInterest = parseInt(((amount - downpayment) * interestMod )/ 10000);
let ttlWInterestNegativeCb = ttlWInterest - bSecondToLastTtl;
let jstDevideMonthly = ttlWInterestNegativeCb / paymentTimes;
let secondToLastMonthlyPayment = (Math.floor(jstDevideMonthly / 100) * 100);
let firstMonthlyPayment = ttlWInterestNegativeCb - (secondToLastMonthlyPayment * (paymentTimes - 1));
let jKinri = (interest / 100).toFixed(5);
let kinriFinal = ValueUtils.comma(parseInt(ttlWInterest - (amount - downpayment)));
Please compare:
// Version 1
const oneHour = 60 * 60
function checkTime(timePast) {
if (timePast<7 * 24 * oneHour) {
// Do something
}
}
// Version 2
const oneHour = 60 * 60
const oneWeek = 7 * 24 * oneHour
function checkTime(timePast) {
if (timePast<oneWeek) {
// Do something
}
}
During millions of calls to checkTime(), is version 2 faster than version 1, or is Node.js smart enough to make the extra calculation in version 1 only once?
You can easily check it like this:
const oneHour = 60 * 60
const oneWeek = 7 * 24 * oneHour;
const randomData = generateArray();
function generateArray () {
let arr = [];
for(i = 0; i < 10000000; i++) {
arr.push(Math.floor(Math.random() * 10))
}
return arr;
}
function checkTime1(timePast) {
if (timePast<7 * 24 * oneHour) {
Math.random()
}
}
function checkTime2(timePast) {
if (timePast<oneWeek) {
Math.random()
}
}
console.time('checkTime1');
randomData.forEach(i => checkTime1(i))
console.timeEnd('checkTime1');
console.time('checkTime2');
randomData.forEach(i => checkTime2(i))
console.timeEnd('checkTime2');
After several checks change order of "checkTime2" and "checkTime1", to be sure the result is valid. Seems Node.js is smart enough to make the extra calculation.
According to this article: Node.js Under The Hood #10 - Compiler Optimizations! Node's compiler will perform Constant Folding optimization, such that const j = 3 + 9 will become const j = 12.
I have a formula that calculates the experience based on a certain level and another that calculates the level based on the given experience.
But the second function does not return the expected value.
const levels = 40;
const xp_for_first_level = 1000;
const xp_for_last_level = 1000000;
const getExperience = level => {
const B = Math.log(xp_for_last_level / xp_for_first_level) / (levels - 1);
const A = xp_for_first_level / (Math.exp(B) - 1.0);
const old_xp = Math.round(A * Math.exp(B * (level - 1)));
const new_xp = Math.round(A * Math.exp(B * level));
return new_xp - old_xp;
};
const getLevel = experience => {
const B = Math.log(xp_for_last_level / xp_for_first_level) / (levels - 1);
const A = xp_for_first_level / (Math.exp(B) - 1.0);
return Math.ceil(Math.log(experience / A) / B);
};
console.log(getLevel(xp_for_first_level)); // -9
console.log(getLevel(xp_for_last_level)); // 30
Expected result 1 and 40, but returns -9 and 30.
Can anyone help?
Anyone enlighten me, please?
I think the formula should change, i tried with this and it given correct return.
const getLevel = experience => {
const B = Math.log(xp_for_last_level / xp_for_first_level) / (levels + 1);
const A = xp_for_first_level - 1;
return Math.ceil(Math.log(experience / A) / B);
};
I've got a javascript function which generates and returns a new array (of arrays):
function getFees(id){
var prep = new Array, primary = new Array, secondary = new Array, vce = new Array;
prep[0] = 733;
primary[0] = 792;
secondary[0] = 879;
vce[0] = 1108;
if (id == 2) {
prep[1] = (prep[0] - prep[0] * 5 / 100);
prep[1] = Math.ceil(prep[1]);
primary[1] = (primary[0] - primary[0] * 5 / 100);
primary[1] = Math.ceil(primary[1]);
secondary[1] = (secondary[0] - secondary[0] * 5 / 100);
secondary[1] = Math.floor(secondary[1]);
vce[1] = (vce[0] - vce[0] * 5 / 100);
vce[1] = Math.floor(vce[1]);
} else if (id == 3) {
prep[2] = (prep[0] - prep[0] * 10 / 100);
prep[2] = Math.ceil(prep[2]);
primary[2] = (primary[0] - primary[0] * 10 / 100);
primary[2] = Math.ceil(primary[2]);
secondary[2] = (secondary[0] - secondary[0] * 10 / 100);
secondary[2] = Math.floor(secondary[2]);
vce[2] = (vce[0] - vce[0] * 10 / 100);
vce[2] = Math.floor(vce[2]);
} else if (id == 4) {
prep[3] = (prep[0] - prep[0] * 50 / 100);
prep[3] = Math.ceil(prep[3]);
primary[3] = (primary[0] - primary[0] * 50 / 100);
primary[3] = Math.ceil(primary[3]);
secondary[3] = (secondary[0] - secondary[0] * 50 / 100);
secondary[3] = Math.ceil(secondary[3]);
vce[3] = (vce[0] - vce[0] * 50 / 100);
vce[3] = Math.floor(vce[3]);
} else if (id >= 5) {
prep[4] = (prep[0] - prep[0] * 75 / 100);
prep[4] = Math.floor(prep[4]);
primary[4] = (primary[0] - primary[0] * 75 / 100);
primary[4] = Math.ceil(primary[4]);
secondary[4] = (secondary[0] - secondary[0] * 75 / 100);
secondary[4] = Math.ceil(secondary[4]);
vce[4] = (vce[0] - vce[0] * 75 / 100);
vce[4] = Math.floor(vce[4]);
}
var newArray = [];
newArray.push({'prep':prep}); //prep array = 733,697
newArray.push({'primary':primary}); //primary array = 792,753
newArray.push({'secondary':secondary}); //secondary array = 879,835
newArray.push({'vce':vce}); //vce array = 1108,1052
return newArray;
}
Essentially I've given an example in the .push sections at the bottom. I then call my function by doing this:
var fees = getFees(2);
alert(fees);
Which alerts this:
[object Object],[object Object],[object Object],[object Object]
If I do:
alert(fees.toSource());
I get this:
[{prep:[733, 697]}, {primary:[792, 753]}, {secondary:[879, 835]}, {vce:[1108, 1052]}]
What I need to be able to do is get the number from any of the items (prep/primary/secondary/vce) eg..
fees.prep[0];
fees.primary[1];
But when I try that, I get this error:
TypeError: fees.prep is undefined
What am I missing?? Any help would be greatly appreciated!! :)
you need to access like this
fees[0].prep[0];