如何使用 AudioContext 可视化来自 Blob 的录制音频？

Question

I have successfully created an audio wave visualizer based on the mdn example here . I now want to add visualization for recorded audio as well. I record the audio using MediaRecorder and save the result as a Blob. However I cannot find a way to connect my AudioContext to the Blob.

This is the relevant code part so far:

var audioContext = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioContext.createAnalyser();
var dataArray = new Uint8Array(analyser.frequencyBinCount);
        
if (mediaStream instanceof Blob)
    // Recorded audio - does not work
    var stream = URL.createObjectURL(mediaStream);
else
    // Stream from the microphone - works
    stream = mediaStream;

var source = audioContext.createMediaStreamSource(stream);
source.connect(analyser);

mediaStream comes from either:

navigator.mediaDevices.getUserMedia ({
    audio: this.audioConstraints,
    video: this.videoConstraints,
})
.then( stream => {
      mediaStream = stream;
}

or as a result of the recorded data:

mediaRecorder.addEventListener('dataavailable', event => {
    mediaChunks.push(event.data);
});
...
mediaStream = new Blob(mediaChunks, { 'type' : 'video/webm' });

How do I connect the AudioContext to the recorded audio? Is it possible with a Blob? Do I need something else? What am I missing?

I've created a fiddle . The relevant part starts at line 118.

Thanks for help and suggestions.

EDIT: Thanks to Johannes Klauß, I've found a solution. See the updated fiddle .

Answer 1

You can use the Response API to create an ArrayBuffer and decode that with the audio context to create an AudioBuffer which you can connect to the analyser:

mediaRecorder.addEventListener('dataavailable', event => {
    mediaChunks.push(event.data);
});
...
const arrayBuffer = await new Response(new Blob(mediaChunks, { 'type' : 'video/webm' })).arrayBuffer();
const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

const source = audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(analyser);