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

Question

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

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

1. 通过XMLHttpRequest读取整个 MP3 文件并将其放入音频缓冲区中，我随后可以使用该缓冲区进行解码audioContext.decodeAudioData()- 如此处所述：每 t 秒提取音频数据
2. 通过指定<audio>标签以允许我按需播放文件，以毫秒为单位指定提示/开始点。 用 Javascript 播放音频？.

问：目前有什么方法可以先声明<audio>标签，然后以某种方式直接从它派生 audioBuffer，而不用求助于XMLHttpRequest？

我已经阅读过，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);

您可能需要使用 webkit 供应商前缀作为 URL 前缀，我不记得他们是否实现了无前缀版本。无论如何，斑点是要走的路！