将wav文件的ArrayBuffer转换为Blob

Question

我正在尝试从服务器获取一个 音频 wav 文件，并在客户端中使用该元素播放它。

<audio id="recording" src="..." />`

我将数据作为 ArrayBuffer 获取，我正在尝试将其转换为 blob，以便我可以更改元素的 src

这是代码：

fetch("http://localhost:8080/", requestOptions)
    .then( (response) => {
        return response.arrayBuffer()
    }).then( (data) => {
        let a = new Blob([data], {type : 'audio/wav'});
        document.getElementById("recording").src = a;
    })
    .catch(error => console.error( error));

但是出现错误：

GET chrome-extension://goohbjdkcejkkochpdellmjkkdpfngph/[object%20Blob] net::ERR_FILE_NOT_FOUND

看来我没有正确创建 Blob

如何创建 blob 并将其传递给 <audio ... /> 元素？

Answer 1

之后您必须create an actual URL from your blob. And don't forget to revoke它以释放资源。

let blob = new Blob([data], {type : 'audio/wav'});
const url = URL.createObjectURL(blob);
document.getElementById("recording").src = url;
URL.revokeObjectURL(url);

将wav文件的ArrayBuffer转换为Blob

Convert ArrayBuffer of wav file to Blob

javascript

html

blob

arraybuffer