如何使用 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);

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

How to visualize recorded audio from Blob with AudioContext?

javascript

web-audio-api