如何从内存加载音频源？

Question

我目前有一些逻辑，可以将一些文本发送到后端，然后取回代表该文本语音的音频文件。该URL被设置为'audio'元素的'src'属性。

指定的端点很慢（〜3s），因此我想进行一次HTTP调用，以提取音频数据并将其保留在内存中几秒钟，以便可以将其用作音频元素的来源。音频文件的大小可以在300KB至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-URL作为其src属性来进行准备。播放应该立即进行，因为已经完成了网络提取，并且Blob URL引用了本地缓存的数据。