<audio> 标签到 audioBuffer - 有可能吗？

Question

我的 javascript-webApp 首先读取一个简短的 mp3 文件并在其中找到静音间隙（用于导航目的），然后它播放相同的 mp3 文件，提示它从一个或另一个静音结束的地方开始。这与通常的 webAudio 场景不同，该场景旨在授予对当前在流中播放的音频数据（而不是整个轨道）的访问权限。

要让我的 webApp 工作我必须两次读取/访问 mp3 文件：

1. 通过 XMLHttpRequest 读取整个 MP3 文件并将其放入音频缓冲区，随后我可以使用 audioContext.decodeAudioData() 对其进行解码 - 如下所述：Extracting audio data every t seconds
2. 通过指定<audio> 标签允许我按需播放文件，以毫秒为单位指定提示/起点。 Playing audio with Javascript?。

问：目前有什么方法可以先声明<audio>tag，然后以某种方式直接从中派生audioBuffer，而不诉诸XMLHttpRequest？

我有read 大约createMediaElementSource，但我不知道如何使用它来获得audioBuffer。

Answer 1

在做你的第一个 XHR 时，请求一个 blob：

xhr.responseType = 'blob'

然后从中取出一个 ArrayBuffer：

var arrayBuffer;
var fileReader = new FileReader();
fileReader.onload = function() {
    arrayBuffer = this.result;
};
fileReader.readAsArrayBuffer(blob);

然后像往常一样把它交给 decodeAudioData 来获取 AudioBuffer。您现在可以进行处理了。

然后，当你的处理完成后，将 blob 给标签，作为一个源，当你想播放它时，它会照常工作：

 audio.src = window.URL.createObjectURL(blob);

您可能需要在 URL 前加上 webkit 供应商前缀，我不记得他们是否实现了无前缀版本。无论如何，blob 是要走的路！