如何从Blob创建AudioBuffer？

Question

我有一个使用MediaRecorderapi 创建的音频文件/ blob :

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

然后在录制结束时:

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

如何使用此blob创建AudioBuffer？我需要:

• 将Blob对象转换为ArrayBuffer我可以使用的对象AudioContext.decodeAudioData(返回一个AudioBuffer)或
• 将Blob对象转换为a Float32Array,我可以将其复制到AudioBufferwith中AudioBuffer.copyToChannel()

任何关于如何实现这一点的提示都表示赞赏.干杯!

Answer 1

要将Blob对象转换为a ArrayBuffer,请使用FileReader.readAsArrayBuffer.

let fileReader = new FileReader();
let arrayBuffer;

fileReader.onloadend = () => {
    arrayBuffer = fileReader.result;
}

fileReader.readAsArrayBuffer(superBlob);

Answer 2

接受的答案很好，但只提供了一个不是音频缓冲区的数组缓冲区。您需要使用音频上下文将数组缓冲区转换为音频缓冲区。

const audioContext = AudioContext()
const fileReader = new FileReader()

// Set up file reader on loaded end event
fileReader.onloadend = () => {

    const arrayBuffer = fileReader.result as ArrayBuffer

    // Convert array buffer into audio buffer
    audioContext.decodeAudioData(arrayBuffer, (audioBuffer) => {

      // Do something with audioBuffer
      console.log(audioBuffer)

    })

}

//Load blob
fileReader.readAsArrayBuffer(blob)

我希望答案包含一个使用decodeAudioData. 我不得不在其他地方找到它，我想因为这是“Blob 到音频缓冲区”的顶级搜索，所以我会为下一个进入这个兔子洞的人添加一些有用的信息。

Answer 3

所有的答案都是真实的。然而，在 Chrome 76 和 Firefox 69 等现代网络浏览器中，有一种更简单的方法：使用Blob.arrayBuffer()

由于Blob.arrayBuffer()返回了一个 Promise，你可以这样做

superBlob.arrayBuffer().then(arrayBuffer => {
  // Do something with arrayBuffer
});

或者

async function doSomethingWithAudioBuffer(blob) {
  var arrayBuffer = await blob.arrayBuffer();
  // Do something with arrayBuffer;
}