html5 audio mp3 not working in firefox

Question

I have this jsFiddle which works perfectly in Chrome and Safari but does not work in firefox. Sample code:

<!DOCTYPE html>
<html>
<head>
    <title>Simple Media Player</title>
    <style>
        body, div { margin: 0; }
    </style>
</head>
<body>
    <audio preload="auto" controls autoplay>
       <source src="http://dev-audio-test.s3-website-us-east-1.amazonaws.com/08xCf21_niXjQmGmanVUrR0Tk2h2mKSMw_sxg03CrycaxhNiqhX9_NFYhHBw7eJcp_ru52kdQRW88YigtmTE0w==.mp3" type="audio/mpeg" />
    </audio>
</body>
</html>

I have set up a simple example of what is not working here it consists of the simple media player (index.html) and a single mp3 as named in the code sample above.

The audio controls appear and then disappear when testing in firefox and the following message is displayed in the developer tools console:

13:33:01.217 Media resource http://dev-audio-test.s3-website-us-east-1.amazonaws.com/08xCf21_niXjQmGmanVUrR0Tk2h2mKSMw_sxg03CrycaxhNiqhX9_NFYhHBw7eJcp_ru52kdQRW88YigtmTE0w==.mp3 could not be decoded.1 dev-audio-test.s3-website-us-east-1.amazonaws.com

I have tested this in firefox on OS X 10.11.4 (Chrome, Safari, Firefox), Ubuntu 14.04 (Chrome, Firefox) and Windows 10 (Chrome Firefox) in all instances Firefox does not playback the audio whilst the other browsers do.

Edit:

In response to the comments, when I click a direct link to the mp3 it plays fine in Firefox. The issue occurs only with the html tag.

"could not be decoded" seems pretty clear. Have you tried different MP3s? Do you know how the MP3 was encoded, using what program / what settings? — Pekka
Firefox MP3 playback depends on the platform decoders - maybe check that these are available on you OSes support.mozilla.org/en-US/kb/… — Peter Campbell
The audio file in question is not a MP3 file but a WAVE file container file which seem to be embedding MP3 encoded data. — user1693593
K3N, your comment got me testing and it resulted in the answer which I posted. I am happy to delete my answer if you post one. I'm a noob on stackoverflow: don't know the etiquette. — JLM

JLM JLM · Accepted Answer · 2016-04-28T11:30:20

K3N correctly presents the issue in his comment "The audio file in question is not a MP3 file but a WAVE file container file which seem to be embedding MP3 encoded data". I confirmed this by performing avconv -i <filename> on the .mp3 in question. I then re-encoded the file using avconv -i <filename> -ar 11025 <new-filename> and created a new test-link here which correctly plays back the .mp3 file in Firefox.

(Both of the avconv operations above can be performed using ffmpeg as well.)

I have tested this in firefox on OS X 10.11.4, Ubuntu 14.04 and Windows 10 in all instances Firefox plays back the new repackaged file.

NB. After further investigation, the sampling rate (11025 Hz) is a non-issue. My tests there masked the issue which K3N raised by properly repackaging the .mp3

html5 audio mp3 not working in firefox

1 Answers