html5 audio mp3 not working in firefox

问题

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.

回答1:

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

来源：https://stackoverflow.com/questions/36863917/html5-audio-mp3-not-working-in-firefox

标签

html

audio

html5-audio

web-audio-api