html5音频mp3无法在Firefox中运行

时间:2016-04-26 11:41:05

标签: html5 audio html5-audio web-audio

我有这个jsFiddle在Chrome和Safari中完美运行但在Firefox中不起作用。示例代码:

<!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>

我已经设置了一个简单的例子,说明了什么不起作用here它包含简单的媒体播放器(index.html)和上面代码示例中命名的单个mp3。

在firefox中进行测试时,音频控件会出现然后消失,并且开发人员工具控制台中会显示以下消息:

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

我已经在OS X 10.11.4(Chrome,Safari,Firefox),Ubuntu 14.04(Chrome,Firefox)和Windows 10(Chrome Firefox)上的firefox中进行了测试,所有情况下Firefox都不播放音频而其他浏览器做。

编辑:

在回复评论时,当我点击直接link到mp3时,它在Firefox中播放正常。只有html标记才会出现此问题。

1 个答案:

答案 0 :(得分:0)

K3N在他的评论中正确地提出了这个问题&#34;有问题的音频文件不是MP3文件,而是WAVE文件容器文件,它似乎嵌入了MP3编码数据&#34;。 我通过在.mp3上执行avconv -i <filename>来确认这一点。然后我使用avconv -i <filename> -ar 11025 <new-filename>对文件进行了重新编码,并创建了一个新的测试链接here,可以在Firefox中正确播放.mp3文件。

(上述两个avconv操作也可以使用ffmpeg执行。)

我已经在OS X 10.11.4,Ubuntu 14.04和Windows 10上的Firefox中测试了这一点,在所有情况下Firefox都会播放新的重新打包文件。

NB。经过进一步调查,采样率(11025 Hz)不成问题。我的测试掩盖了K3N通过正确重新包装.mp3

而引发的问题