Properly convert blob audio to webm format

Question

Hy, I am using tone.js to record audio using my mic and then downloading the audio.

Here is my code;

function test() {

var mic, recorder;
    
recorder = new Tone.Recorder();
mic = new Tone.UserMedia();
recorder = new Tone.Recorder();
mic.connect(recorder);
mic.open();
recorder.start();
    

    
setTimeout(async () => {

    // the recorded audio is returned as a blob
    const recording = await recorder.stop();
    mic.close();
    recording.date = Date.now();
    recording.name = `${Date.now()}.webm`;
    recording.type = "audio/webm";
    recording.codecs = "opus";
    recording.length = "120";
    
    // Create Object URL
    var blobUrl = URL.createObjectURL(recording);
    //instance.publishState("audio_blob", blobUrl);
    const anchor = document.createElement("a");
    anchor.download = `${Date.now()}.webm`;
    anchor.href = blobUrl;
    anchor.click();
    
}, 4000);
}

Here is the link from where I got the reference for this code. Recorder - UserMedia API

Problem

Now when I play the downloaded audio file, it does not show the audio length. I have tried adding length property to audio blob using recording.length = "120"; but it still does not add the length to audio file. I need to know how can I add length to my audio file. Also which codec and format should I use. When I try to use mp3 format, the downloaded file is broken. Why is that ?

You can use the codepen for testing the API. Its a bit different from my code but the concept is same. CodePen sample

Answer 1

If you want to increase the length of the audio file just modify the 4000 to a higher value.

setTimeout(async () => {
   //.......content.........
}, 10000);

This is the parameter that will control the duration of the recording in the setTimeout function. I am not sure about how to convert to mp3. I am trying to figure that out myself, let me know if you find anything.