HTML5 Audio Tag Showing Wrong Duration of MP3 in Chrome

Question

When I try to play some of my MP3s through the HTML5 player, the player seems to return two different duration times. When I query the duration with jQuery, I get the current duration, but in the default Chrome player, the song tries to play for significantly longer than the song actually is. This is not an issue in Safari (7.0.1 on MacOSX). What is causing this issue with certain MP3s and how can I get Chrome (v. 31) to use the correct time?

Here is the code:

<audio controls="" autoplay="" name="media"><source src="http://musicalfamilytree.com/_private/c/cowboys_the/clown-car_2.mp3" type="audio/mpeg"></audio>
<input type="button" onclick='alert($("audio")[0].duration);' value="check duration" />

Here is a JSFiddle of the audio file: http://jsfiddle.net/spKqh/5/

Answer 1

This all boils down to the specific MP3 file. Estimating the length of an MP3 file sounds like it would be a straightforward task, but there is no 1 correct way to do it. There are different tagging standards at play and sometimes such tags store a length, which may or may not be accurate. Another approach is to determine if the MP3 file is a constant vs. variable bit rate file and then crunch some numbers to determine the length.

My guess is that Safari does the former (estimate with tags) to find the true length of 126 seconds while Chrome does the latter (guess by bit rate and file size) to guess a length of 227 seconds. To explain further:

I downloaded the MP3 in question for analysis (clown-car_2.mp3). It is 9096504 bytes long. According to playback utilities, it is encoded at a constant bit rate of 320 kilobits per second. Assuming a kilobit is 1000 bits:

320000 bits per second / 8 bits per byte = 40000 bytes per second
9096504 bytes / 40000 bytes per second = ~227 seconds

What's going on here? The MP3 file is carrying a ton of baggage in the form of extra metadata. FFmpeg identifies it as having a motion JPEG video track (probably a static cover art image). This is likely throwing off the length calculation.

I used FFmpeg to re-code the MP3 while scrubbing the metadata:

ffmpeg -i clown-car_2.mp3 -vn -acodec copy clown-car_2.scrubbed.mp3

This command ignores the video track (-vn) and losslessly transcodes the encoded audio (incurs no audio quality loss). FFmpeg identifies this file as being 126 seconds (while claiming 227 seconds before). Note that this new file is 5043953 bytes:

5043953 bytes / 40000 bytes per second = ~126 seconds

So, you might want to work on tightening up those MP3 files by losing the bulky image metadata (and perhaps consider a lower bitrate than 320 kbits/sec which is the max that MP3 supports and not that common for internet streaming).