javascript - 使用 audio.srcObject 和 MediaStream 播放来自 ajax 调用的音频

Question

我在 php 中实现了一个返回 mp3 数据的 HTTPS 端点。然后，在 javascript 中进行 ajax 调用后，我通过以下方式播放它:

let blob = new Blob([response.value], { type: 'audio/mp3' });

 cleanup = () => {
   // Not 100% sure this is needed:
   audio.src = '';
   // But this is:
   URL.revokeObjectURL(url);
 };

 let url = URL.createObjectURL(blob)
 let audio = new Audio();

 audio.addEventListener('ended', cleanup);

 audio.src = url;

 audio.play();

这似乎有点工作，但我在 Fx 播放错误和一些 Chrome 开发工具崩溃中遇到了一些浏览器问题。我认为这些问题可能是由于我使用 URL.createObject() 造成的。听起来将来执行此操作的方法将是设置 audio.srcObject ，但是 it's not ready in Chrome yet ，至少对于 Blob 来说不是。支持 MediaStream，但我找不到从请求的响应正文创建 MediaStream 的方法。

所以，我的问题是:有没有办法使用 audio.srcObject = someMediaStream 播放我的 mp3？或者我是否需要坚持使用 URL.createObjectURL 直到支持 audio.srcObject = new Blob() ？这只能在 Chrome 中运行。

Answer 1

您可以使用 MediaElement.captureStream() 从播放 blob://URI 中的媒体的 AudioElement 创建 MediaStream方法，但这会达不到目的，因为您仍然必须在源

您还可以将 Blob 作为 ArrayBuffer 读取，然后使用 AudioContext 及其 decodeAudioData() 解码此媒体的音频数据。方法，然后将生成的 AudioBuffer 传递给 AudioBufferSourceNode，最后将后者连接到 MediaStreamSourceNode.

但是...您描述的错误很可能不是由您使用 blob://URI 引起的，这确实是目前播放音频媒体的最佳方式。

希望有一天浏览器能够完全实现这些规范，我们将能够将其他对象作为 srcObject 传递，甚至可能看到它传播到其他元素，但我停止了几年前我屏住呼吸......

所以是的，继续使用 blob://URI 和 file reports向 chromium 团队询问他们的错误。

---

---

Ps:如果可以的话，将 src 直接设置为使用 AJAX 获取的 URL 实际上是最好的选择。