javascript - 标记到 audioBuffer - 这可能吗？

Question

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

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

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

问: 目前有什么方法可以申报 <audio>首先标记然后以某种方式直接从它派生 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 vendor 前缀，我不记得他们是否实现了无前缀版本。无论如何，blob 是必经之路!