javascript - 以 blob 作为源播放音频时出现 DOMException

Question

每当我运行此代码时

var blob = new Blob(["ninja.mp3"], {type:"audio/mp3"});
var audio = new Audio(URL.createObjectURL(blob));
audio.play().catch(err => console.log(err));

我收到以下错误

DOMException index.html:3

我希望它播放音频文件ninja.mp3，但我却遇到了这个错误。任何帮助将不胜感激。

Answer 1

当你这样做

var blob = new Blob(["ninja.mp3"], {type:"audio/mp3"});

您刚刚创建的是浏览器内存中的一个二进制文件，其中包含 USVString ninja.mp3，浏览器将为其发送 Content-Type: audio/mp3某些网络操作中的 code> header 。

我知道，您刚刚创建了一个 UTF-8 文本文件。是的，MediaElement 无法读取该内容。

var blob = new Blob(["ninja.mp3"], {type:"audio/mp3"});
// read as text
new Response(blob).text().then(console.log);

为了进行比较，以下是真正的 mp3 文件以文本形式读取时的样子:

fetch("https://dl.dropboxusercontent.com/s/agepbh2agnduknz/camera.mp3")
 .then(resp => resp.text())
 .then(console.log)

Blob 构造函数不需要 URL，而是 Blob 部分的列表(可以是 USVString、Blob 或 ArrayBuffer)，但它绝不会获取任何内容。

所以你想要的似乎很简单

var audio = new Audio("ninja.mp3");
audio.play().catch(console.log);

但是，如果有一天您需要构建一个 Blob(现在不需要)，那么请确保您在 Blob() 构造函数中传递的内容实际上是文件的二进制内容 .