HTML5 音频播放器中的不一致搜索

Posted 2023-02-25

技术标签:

【中文标题】HTML5 音频播放器中的不一致搜索【英文标题】：Inconsistent seeking in HTML5 Audio player 【发布时间】：2015-08-21 15:24:48 【问题描述】：

我想从特定时间戳开始播放音频。但我什至无法让最简单的例子正常工作。我尝试了以下，还修改了w3school's example。

<body>
    <audio src="skyfall.mp3" id="audio" controls preload></audio>
    <button onclick="play()">Play</button>
</body>
<script type="text/javascript">
    var secs = 32;
    function play()

        var p = document.getElementById("audio");
        p.currentTime = secs;
        console.log('Playing at secs: ' + secs); 
        p.play();
    
</script>

但在每个浏览器上播放不同的音频：Windows 版 Chrome 延迟大约 4 秒，android 版 Chrome 似乎正常，Mobile Safari 已关闭。（即使是 VLC 在播放文件时也会出现这个问题。）如果从文件开头开始播放，它们会保持同步。

所以在我看来，html5 音频标准要么实施不正确，要么解释不善。

我读到服务器端支持有时是罪魁祸首，但我不确定当我读取本地文件时这会是什么问题。最终，我想让它在 Cordova 项目中工作。

有什么想法吗？

【问题讨论】：

【参考方案1】：

我遇到了同样的问题，我通过将 MP3 文件转换为 CBR（恒定比特率）格式解决了这个问题。从而解决currentTime与真正的sound不一致的问题。

Choose the CBR format

步骤：

下载并安装“Audacity”（任何平台均可免费使用）打开您的 MP3 文件点击[文件] -> [导出] -> [选项] -> [常量]（参见： Converting MP3 to Constant Bit Rate） Audacity 会要求您提供 LAME MP3 编码器（参见：[下载并安装 LAME MP3 编码器]）

不会有不一致/异步的问题。

另见：

HTML5 audio starts from the wrong position in Firefox Inconsistent seeking in HTML5 Audio player

TJ_Tsai / tsungjung411@gmail.com

【讨论】：

【参考方案2】：

问题在于文件编码。对于 MP3 文件，只有恒定比特率搜索才能在所有浏览器中正确/一致地工作。 W3 说 MP3 是所有浏览器官方普遍支持的唯一格式，所以我认为使用 CBR MP3 是答案。也就是说，Mozilla 在格式支持方面有更多的in-depth guide。

当比特率不恒定时，浏览器会在给定相同时间戳的情况下寻找不同的音频片段。寻找算法对于恒定比特率很简单，但对于可变比特率则更复杂（并且通常涉及某种形式的估计）；我在 HTML 标准中找不到这个操作的定义，所以不同的浏览器实现它的方式不同也就不足为奇了。

This answer 有更多讨论和潜在的解决方法。

【讨论】：

以上是关于HTML5 音频播放器中的不一致搜索的主要内容，如果未能解决你的问题，请参考以下文章

如何通过javascript删除html5音频播放器中的源音频文件