将 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 来自您的 blob 的实际 URL。之后别忘了revoke它以释放资源。

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