如何跨浏览器同步 HTML5 音频？

Question

我的音频（mp3）必须以相当精确的时间戳开始。 我在 Chrome 中选择了时间戳，只是意识到它们加载到 Firefox 和 Safari 中的不同位置。 到 30 分钟后，差异约为 5 秒。 有没有人有这方面的经验，是否可以使这些以相同的速度运行？ 我只希望时间戳与跨浏览器的内容相匹配...

示例： https://dtak.github.io/dharmaseed-topics/archive/interface/index.html

Answer 1

听起来TimingObject可以很好地适用于您的用例。 它旨在跨浏览器和/或设备同步时间线。

我曾经做过一个演示，展示了如何同步视频，但同样的技术也适用于音频元素。

https://chrisguttandin.github.io/video-synchronization-demo/

该演示使用了timing-object 、 timing-provider和timingsrc库。 完整的源代码可在 GitHub 上找到，但短版本看起来像这样：

import { TimingObject } from 'timing-object';
import { TimingProvider } from 'timing-provider';
import { setTimingsrc } from 'timingsrc';

const timingObject = new TimingObject(
    new TimingProvider('your-client-id')
);

timingObject.addEventListener('readystatechange', () => {
    if (timingObject.readyState === 'open') {
        setTimingsrc(
            document.getElementById('your-audio-element'),
            timingObject
        );
    }
}

要启动音频元素，您可以像这样使用TimingObject ：

timingObject.update({ velocity: 1 });

在多个选项卡/浏览器/设备中运行此代码时，只要自动播放策略不阻止它们，它们都应该播放相同的音频。

Answer 2

MP3 文件的流中实际上没有时间戳。 它只是一系列 MPEG 帧，根本没有时间信息。

在 stream 中寻找时间偏移需要计算字节偏移，通常通过查看第一帧的比特率，然后将其乘以每帧的样本数。 这是有问题的，因为可能已使用可变比特率来生成 stream。

一种效率较低的方法是逐帧实际搜索整个 stream。 这将更准确，但需要遍历整个文件。

不同的玩家会使用不同的方法，这可能就是你看到时间差异的原因。 解决方案是使用实际上支持时序信息的容器格式。

您可以将 MP3 编码的音频包装在 MP4/ISOBMFF 文件中。 这将为您提供所需的时间戳，同时不需要转码。 理想情况下，go 回到原始音频源并使用更好的编解码器（例如 AAC）进行编码，然后将其放入 MP4 中。 或者，考虑 WebM 中的 Opus。