如何从内存中加载音频源？

Question

我现在有一些逻辑发送一些文本到后端，我得到一个音频文件，代表该文本的发言。URL被设置为‘音频’元素的'src‘属性。

指定的端点是缓慢的(~3s)，因此我想进行一个HTTP调用，该调用获取音频数据并将其保存在内存中几秒钟，以便我可以使用它作为音频元素的源。音频文件的大小可以在300 5MB到5MB之间。

我可以使用哪些API来存储音频数据，然后如何将该数据提供给音频元素？

提前谢谢你！

Answer 1

首先，您可以像现在一样使用URL作为src，但只需等待音频加载完毕即可。但是，有些环境在用户开始播放音频之前不会加载<audio>源，因此这将无法普遍工作。

你提出的想法是个好办法。具体来说，您需要：

1. 使用fetch或XMLHttpRequest获取音频数据
2. 加载完成后，将数据放在Blob对象中
3. 使用URL.createObjectURL从Blob创建URL
4. 使用该URL作为src属性在您的<audio>上

其中一个实现如下所示

fetch("someaudio.ogg")
  .then(response=>response.blob())
  .then(blob=>myAudioElem.src = URL.createObjectURL(blob))

或与XHR：

var xhr = new XMLHttpRequest();
xhr.responseType = "blob";
xhr.open("GET", "someaudio.ogg");
xhr.send();
xhr.addEventListener("load", function() {
    myAudioElem.src = URL.createObjectURL(xhr.response);
});

一旦提取完成，myAudioElem将准备好一个完全加载的blob作为它的src属性。播放应该立即进行，因为网络抓取已经完成，blob引用本地缓存的数据。