HTML5 音频持续时间在 chrome 和 Firefox 中有所不同



我已经阅读了这个问题 HTML5 音频标签在 Chrome 中显示错误的 MP3 持续时间,但仍然无法解决我的问题。 音频文件的链接在这里: http://img.kmf.com/toefl/listening/TPO/TPO-48-C1.mp3。在 chrome 中,音频的持续时间返回 168.408,但在 Firefox 中返回 169.192194。

document.getElementById('jp_audio_0').addEventListener('loadedmetadata', function() {
console.log(this.duration);
});
<audio id="jp_audio_0" preload="metadata" src="http://img.kmf.com/toefl/listening/TPO/TPO-48-C1.mp3"></audio>

Chrome 信任您文件中的元数据(ID3 标签((几乎每个人,甚至 ffmpeg 都信任(,但 Firefox 不信任。

您的歌曲实际上是 02:49.17,但其元数据另有说明。

当您删除这些元数据信息时(我使用了这个在线工具(,那么每个人都同意您的音频持续时间为 02:49.17(或 chrome 为 169.16898s,FF 为 169.192194(。

这是文件,没有元数据:

a.onloadedmetadata = e => console.log(a.duration);
<audio id="a" src="https://dl.dropboxusercontent.com/s/adw96fb4xaz377n/TPO-48-C1_noID3.mp3" controls>

对于后来出现的任何人来说,我都遇到了同样的问题。无论出于何种原因,Firefox 在触发loadedmetadata事件时都不会正确报告audio.duration。在该时间点,audio.duration将仅等于浏览器缓冲的音频的任何部分,这可能不是整个音频剪辑的完整持续时间。相比之下,Chrome 在loadedmetadata上正确报告了完整的持续时间。

为了绕过 Firefox 上的这个限制,我开始收听durationchange事件,每当浏览器缓冲另一个音频块时,该事件就会触发。不幸的是,这意味着通常需要一些事件才能给出真正的(完整(持续时间,所以一开始你会得到3.4567(以秒为单位(,然后是24.456等等,但经过几次更新后,你会得到真正的持续时间,然后一旦整个剪辑被缓冲,你就会停止接收更新。

这显然不理想,可能不足以满足所有用例,但是我正在播放的音频剪辑相当短,因此如果在音频开始播放时持续时间更改几次,这没什么大不了的。但是Firefox中没有很多其他选项。

最新更新