Web Audio API：将 mp3 声音流合并到一个文件并在 <audio> 标签中播放

Posted 2023-02-25

【中文标题】Web Audio API：将 mp3 声音流合并到一个文件并在 <audio> 标签中播放

【英文标题】：Web Audio API: Merging stream of mp3 sounds to one file and playing it in <audio> tag

【发布时间】：2015-02-07 11:02:31

【问题描述】：

我对从远程服务器流式传输 mp3 文件并将它们播放为 one 做了一些研究，但因为我对 Web Audio API 完全陌生，所以我有点困惑。 p>

我拥有的是存储在另一台服务器上的 5 个 MP3 文件的路径。它们的长度约为 10 分钟，因此文件大小“很大”。 我想下载第一个文件，开始播放它，在播放时我想继续并按顺序下载其他文件。

我已经读到我需要为每个文件创建一个 XMLHttpRequest 并将其作为“arraybuffer”获取。然后我需要做的是解码arraybuffer。 解码是什么意思？

假设 arraybuffer 被解码，我如何在 html5 标签中播放它？ 我如何继续做 XMLHttpRequests 并将它们添加到已经播放的第一个文件的数组缓冲区中？

编辑：我忘了说我不希望每次新声音文件开始播放时都重新启动进度条...我希望它显示从第一个声音文件到最后一个声音文件的持续时间一个。

【参考方案1】：

如果您只想端到端播放文件，我认为您尝试这样做的方式有点过头了。如果您使用 Web Audio API，XMLHttpRequest 和解码缓冲区将是实现它的方法，但您应该能够在没有它的情况下做到这一点。只需像这样在 HTML 中添加标签：

<audio src="1.mp3" autoplay></audio>
<audio src="2.mp3" preload="auto"></audio>
<audio src="3.mp3" preload="auto"></audio>
<audio src="4.mp3" preload="auto"></audio>
<audio src="5.mp3" preload="auto"></audio>

所以第一个当然会自己开始播放（可能在 ios 上除外，我认为原则上不支持自动播放）。然后，您的 javascript 可以侦听每个音频元素上的事件，并在适当的时间开始播放下一个。 onended 事件是要监听的事件。

【讨论】：

根本不需要 Web Audio API...您所拥有的一切都可以正常工作。

也许我忘了提，但我需要进度条来显示从第一个文件到最后一个文件的持续时间。我不希望每次更改声音文件时都重新开始进度条。

@user4440845，我认为有某种原因不能提前制作一个大的 mp3 文件并使用它，而不是尝试在客户端按顺序播放它们？这显然是最简单的方法。否则，您需要执行我上面展示的操作（或更复杂的操作）并根据每个音频元素的 currentTime 属性实现您自己的进度条。