有没有办法播放在 html5 中同步的多个音频文件？答案

【问题标题】：Is there a way to play multiple audio files synchronised in html5?有没有办法播放在 html5 中同步的多个音频文件？
【发布时间】：2019-10-19 18:17:00
【问题描述】：

我们在会议室录制，在那里我们有多个演讲者的对话。每个扬声器都连接了一个个人麦克风，每个麦克风的语音都被录制为一个单独的通道（单独的音频文件）。

我们的目标是让用户一次播放所有音频（频道）。我们最多可以有 12 个单独的文件。此外，我们需要用户能够控制每个流的音量（因此仅在后端合并文件不是解决方案）。

我们可以用什么来实现这一目标？一次播放所有这些内容的幼稚解决方案可能行不通，因此我们想知道现代 html5 API 是否解决了这种挑战。

--- 更新以回答@Amdadan 的评论 ---

为什么不呢？你试过了吗？您是否担心连接吞吐量，如果你在流式传输它们吗？您是否担心 API 限制？

是的，我们试过了。 1）当我们对所有文件调用“播放”时 - 它不会同时启动（它开始全部加载，一个加载更快，一个加载更慢，等等）。 2）当它已经在播放并且文件到达“缓冲”时间的末尾时 - 它也会停止，而其他人继续播放。

我们尝试使用事件来处理这些情况，但我们没有成功 - 有很多情况需要处理。

如果在播放之前将它们全部加载，您是否担心大小？

是的，我们是。文件可能长达几个小时 - 不能全部缓冲。

如果您正在流式传输，您是否担心连接吞吐量他们？您是否担心 API 限制？

不，我们使用连接到 s3 的 CloudFront - 吞吐量还可以，没有具体限制

提前谢谢你， - 杰克

【问题讨论】：

为什么不呢？你试过了吗？如果您在玩之前将它们全部加载，您是否担心大小？如果您正在流式传输它们，您是否担心连接吞吐量？您是否担心 API 限制？
@Amadan - 遍历音频文件数组并对其调用播放，可能会在第一个和第十二个之间产生一些延迟，即使这个延迟是 100 毫秒，听起来也很可怕。这就是为什么我们正在寻找可以处理一组音频文件的东西。
为什么会有 100 毫秒的延迟？此外，您可以手动同步文件。例如，看看this example：当每个文件播放时，它们会确定正确的偏移量以传递给start，因此所有文件都是同步的（if (offset == 0) { trackSource.start(); offset = audioCtx.currentTime; } else { trackSource.start(0, audioCtx.currentTime - offset); }）。
现在，在此示例中，您已经预加载了曲目，而您将对其进行流式传输；如果您的吞吐量不足以使轨道不滞后并开始缓冲，那么我想您必须决定要做什么（所有流都应该暂停吗？缓冲流是否应该尝试赶上其他流并保持静音直到它设法做到这一点，而所有其他人都继续？等）在询问如何做之前:)
我在之前的评论中确实解决了这个问题 - 同步多个流的 start 相当容易（使用 Audio，在所有源上等待 canplay 事件，当一切准备就绪时，全部启动）；但是您需要决定如果来源之一stalls out) 会发生什么。正如 Oliver M Grech 所提到的，另一种可能的方法是使用多轨源（我相信，同步是自动为您完成的）。

标签： html html5-audio web-audio-api

【解决方案1】：

无论您选择什么，请确保轨道之间有 0 毫秒的延迟，因为这可能会产生相位问题和梳状滤波。（对于没有音频的人来说，这些问题听起来很糟糕）

WebM 似乎正在使用支持多轨的 Matroska。详情见下方链接。

Multi Track Audio (and Video) HTML5

还可以查看支持多轨播放的 Howler.js，我认为它最适合您的需求。

Howler.js on GitHub

【讨论】：

我检查了您发布的链接，Chrome 不支持提供的解决方案： - 大多数浏览器不支持 audioTracks - 看起来只有 Safari 处理它 (developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/…) - 媒体组将是一个了不起的解决方案，这正是我所需要的。但它在任何地方也不受支持:(另外，我检查了 Howler，但看起来它也适用于 mediaBuffers 并且对于我的测试，它试图将整个音频下载到内存中。我是否配置错误？我在文档中没有找到任何关于缓冲区大小...
Howler 应该适用于所有主流浏览器，请查看其 GITHUB 上的说明（Google Chrome 7.0+、Internet Explorer 9.0+、Firefox 4.0+、Safari 5.1.4+、Mobile Safari 6.0+（在用户之后）输入），Opera 12.0+，Microsoft Edge）
另外，为什么在内存中加载它是个问题？（如果我可能会问）大多数有声望的 DAW 和多轨播放器在同步流式传输之前将其加载到内存中。个人认为这是正常行为。您的文件大小和曲目数量有多大？
在 Chrome 上不起作用注意与“多轨音频（和视频）HTML5”建议有关。 Chrome 不支持它。
这些文件很长！它们最长可达 10 小时，因此不能在内存中缓冲。

【解决方案2】：

也许使用MediaSync library 是您的一个选择。它允许您同步两个<video/> 元素，如其页面所示。但这也适用于音频。

【讨论】：