HTML5 Audio duration is different in chrome and firefox

2
votes

I have read this question HTML5 Audio Tag Showing Wrong Duration of MP3 in Chrome , but still can't solve my problem. The audio file's link is here: http://img.kmf.com/toefl/listening/TPO/TPO-48-C1.mp3. In chrome, audio's duration return 168.408, but in firefox it returns 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>
1
javascriptjqueryhtmlgoogle-chromefirefox
According to ffmpeg chrome is right... – Kaiido
@Kaiido But how to solve this problem? – ChenLee
Ah no sorry actually FF is right ;-) Will add an answer. – Kaiido

1 Answers

3
votes

Chrome trusts the metadata (ID3 tags) that are in your file (almost everybody, even ffmpeg, does), but Firefox doesn't.

Your song is actually 02:49.17 but its metadata says otherwise.

When you remove these metadata info (I used this online tool), then everyone agrees that your audio has a duration of 02:49.17 (or 169.16898s for chrome and 169.192194 for FF).

Here is the file, without metadata : 

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