HTML5 视频的多个音轨

Posted 2023-05-08

【中文标题】HTML5 视频的多个音轨

【英文标题】：Multiple audio tracks for HTML5 video

【发布时间】：2011-12-14 10:01:26

【问题描述】：

我正在使用 html5 为我的网站制作视频。理想情况下，我只有一个无声视频文件和五个与视频同步的不同语言的不同音轨。

然后我会有一个按钮，允许用户在音轨之间切换，即使视频正在播放；并且正确的音轨会变得栩栩如生（无需视频暂停或重新开始或其他任何事情；很像 DVD 音轨选择）。

我可以在 Flash 中非常简单地做到这一点，但我不想这样做。必须有一种方法可以在纯 HTML5 或 HTML5+jQuery 中做到这一点。我想你会以 0 音量播放所有音频文件，并且只会增加活动轨道的音量......但我什至不知道该怎么做，更不用说在用户暂停或倒带时处理它视频...

提前致谢！

【参考方案1】：

音频和视频之间的同步远比简单地同时启动音频和视频要复杂得多。声卡将以稍微不同的速率播放。 （对我来说 44.1 kHz 是多少，对你来说实际上可能是 44.095 kHz。）

通常，视频与音频流同步，但播放器负责处理。通过加载多个对象进行播放，您实际上是在使它们不同步。

唯一可行的方法是，如果您能找到一种方法来控制来自视频播放器的不同音频流。我不知道这是否可能。

相反，我建议您使用不同的流对视频进行多次编码。您可以为此使用 FFMPEG，甚至可以自动化该过程，具体取决于您的工作流程。在流之间切换成为一个问题，但大多数视频播放器足够强大，可以在给定比特率的情况下猜测文件中的字节偏移量。

如果您只需要两种语言，您可以简单地调整左右立体声音频通道之间的平衡。

【讨论】：

对于浏览器来说，在播放之前像 ffmpeg 一样在一个单一的流中即时混合流有什么难的？

@themihai 当您有一个包含一个视频轨道和多个音频轨道的视频文件时，它们都会同步到一个公共参考点。当您将多个文件全部分开时，它们不是。您不能只排列 8 个音频对象，告诉它们播放，并期望它们同时播放，因为它们都有自己的解码、缓冲等，并且假设浏览器甚至会尝试同时播放它们。实际上，您称之为“播放”，浏览器会在需要时执行它的操作（在合理的时间内，以便看起来即时）。

@themihai 使用 FFmpeg，您可以获取所有这些轨道，将它们混合到同一个文件中，并为它们提供公共参考点。作为这里有人提出的替代方案，Web Audio API 可用于以样本精确的方式安排播放。也就是说，首先将所有音频解码为 PCM 样本，然后可以同时开始。此时，时钟参考就是输出设备。

@themihai 关于时钟参考同步的另一点是，并非每个输出设备都会以完全相同的速率播放。如果您有一个没有音轨的视频，它将以接近软件获得的帧速率播放。但如果有音频，那可能会滞后于头发或落后于头发，以匹配音频。声卡将有自己的采样时钟，这就是驱动事物的原因。每个设备的速度略有不同，这对于较长的内容更为重要。

我相信，就像 ffmpeg 可以在单个文件中混合流一样，浏览器可以使用缓冲区在运行中/在内存中混合流，然后将它们发送以进行处理/播放。从技术上讲，您实际上可以使用编译为 wasm 的 ffmpeg 并使用混合流提供视频源来做到这一点。

【参考方案2】：

可以通过 Web Audio API 实现。

我的程序的一部分会监听视频元素事件并停止或重新启动使用网络音频 API 创建的音轨。这使我能够以完美同步的方式打开和关闭任何轨道。

有一些缺点。

除了 Edge 之外，Internet Explorer 中不支持 Web 音频 API。

该技术仅适用于缓冲音频，这是有限的。大文件存在一些问题：https://bugs.chromium.org/p/chromium/issues/detail?id=71704

【讨论】：

仍然 - 感谢mediagroup 的提示。它现在的支持比您撰写本文时更好；）

我很高兴能提供任何帮助。也很高兴看到这些规格被带入生活:)

媒体组已被弃用/取消发货（至少通过 chrome）

【参考方案3】：

如果您愿意让所有五首曲目都下载，为什么不将它们混音到视频中呢？视频不限于单个音轨（即使是 AVI 也可以制作多个音轨）。然后应该为您处理同步。您只需根据需要启用/禁用音轨。

【讨论】：

那么我将如何使用 javascript 来控制它呢？ :)

@EmphramStavanger: whatwg.org/specs/web-apps/current-work/multipage/… 给出一个audioTracks 元素，然后您可以在每个轨道上使用.enable() 和.disable()。自己没有测试过。

太棒了，我去看看！

audioTracks 现已在 IE10 和 IE11 中实现，此处使用示例：msdn.microsoft.com/en-us/library/windows/apps/hh452774.aspx

Chrome 中缺少 audioTrack / videoTracks