我已经阅读了这个问题 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中没有很多其他选项。