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

Question

我已经成功创建了一个基于mdn example here 的音频波形可视化器。我现在也想为录制的音频添加可视化。我使用 MediaRecorder 录制音频并将结果保存为 Blob。但是我找不到将我的 AudioContext 连接到 Blob 的方法。

这是到目前为止的相关代码部分：

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 来自：

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

或作为记录数据的结果：

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

如何将 AudioContext 连接到录制的音频？ Blob可以吗？我需要别的东西吗？我错过了什么？

我创建了一个fiddle。相关部分从第 118 行开始。

感谢您的帮助和建议。

编辑： 感谢 Johannes Klauß，我找到了解决方案。 请参阅updated fiddle。

Answer 1

您可以使用 Response API 创建一个 ArrayBuffer 并使用音频上下文对其进行解码以创建一个可以连接到分析器的 AudioBuffer：

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);