blobweb-audio-apiaudiobufferweb-mediarecorder

How to create an AudioBuffer from a Blob?


I have an audio file/blob that has been created using the MediaRecorder api:

let recorder = new MediaRecorder(this.stream)
let data = [];
recorder.ondataavailable = event => data.push(event.data);

and then later when the recording is finished:

let superBlob = new Blob(data, { type: "video/webm" });

How can I use this blob to create an AudioBuffer? I need to either :

  • Transform the Blob object into an ArrayBuffer which I could use with AudioContext.decodeAudioData (returns an AudioBuffer) or
  • Transform the Blob object into an Float32Array, where I could copy it into the AudioBuffer with AudioBuffer.copyToChannel()

Any tips on how to achieve that are appreciated. Cheers!


Solution

  • To convert a Blob object to an ArrayBuffer, use FileReader.readAsArrayBuffer.

    let fileReader = new FileReader();
    let arrayBuffer;
    
    fileReader.onloadend = () => {
        arrayBuffer = fileReader.result;
    }
    
    fileReader.readAsArrayBuffer(superBlob);