问答

html5音频mp3无法在Firefox中运行

 来源    2019-07-11    1  

我有这个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标记才会出现此问题.

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

(上面的两个avconv操作也可以使用ffmpeg执行.)

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

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

javascript – HTML5音频不会在Firefox中第二次播放
问答我正在开发一个网络应用程序,我需要播放单词和句子音频文件.我正在使用骨干来从服务器获取和呈现内容.音频文件存在于S3上.当渲染内容时,我播放单词音频文件,然后播放句子音频文件.我还有一个按钮,因此可以 ...
2
javascript – 如何让这个HTML5全屏功能在Firefox中运行?
问答我想要一个使用HTML5全屏API触发全屏模式的按钮.我在网络上关注了一些示例以获取下面的代码,但它仅适用于Safari / Chrome,因为它是特定于webkit的前缀.我想使用moz前缀(以及标 ...
1
firefox – html5中的音频无法在FF4 / Safari中运行
问答我的html5文档中有这个音频链接: <audio src="http://sverigesradio.se/topsy/ljudfil/3017771.m4a" type= ...
2
javascript – html5 drawImage在firefox中运行,而不是chrome
问答我刚刚开始涉足HTML5 / Javascript,目前正在尝试组建一个简单的二十一点游戏.我的主浏览器是Chrome,我注意到我的卡片绘图功能无效.我简化了代码,但drawImage()函数似乎仍然 ...
1
google-app-engine – 如何使用HTML5音频标签在jsp文件中使用app引擎blob存储的Blob-key播放mp3文件?
问答我在App引擎blobstore上传了我的4MB mpe文件.通过检索其Blob键,我尝试使用HTML 5音频标签在jsp文件中播放它.但它不起作用.代码如下: <%@page import=& ...
如何在linux上使用HTML5在firefox中运行webm视频文件?
问答我在linux上使用apache服务器,并希望运行.webm视频文件.我有.webm视频文件,我试图使用HTML5在Firefox(V 12.0)中运行,但浏览器显示为"没有支持格式的视频和 ...
2
html – 为什么我的嵌入式YouTube视频在Firefox中运行,而不是在Internet Explorer中运行?
问答我正在使用以下代码显示YouTube视频. <object width="425" height="344"> <param name=&qu ...
2
HTML5输入类型号在Firefox中不起作用
问答我使用的是HTML5输入类型=数字.它在Chrome浏览器中完美运行,但它不适用于Firefox和IE9. 我想将数量增加1,即step = 1,我也设置min = 1. 我使用以下代码: <f ...
javascript – 动态创建的SVG无法在Firefox中运行,但可以在Chrome中运行
问答我试图弄清楚为什么这段代码在Firefox中不起作用.它应该创建水平路径,但我无法在Firefox中看到它们. Chrome和IE正确显示它们.可能是什么问题? https://jsfiddle.ne ...
1
javascript – HTML5音频对象无法在Safari中播放
问答在my page,我在JavaScript中动态创建HTML5 Audio元素: bell = new Audio("alarmclock.mp3"); 稍后(响应jQuery C ...
1
有没有办法在Firefox中运行Dart用于开发目的?
问答我知道您可以使用Dartium(带有嵌入式Dart VM的Chrome)在浏览器中本地运行Dart代码,您可以将Dart编译为JavaScript. 但是看到我更喜欢使用Firefox进行Web开发, ...
1
html – 视频标签无法在桌面firefox中运行,但可以在移动版Firefox上运行
问答我有两个视频标签,一个工作正常,但第二个给我错误, 没有支持格式的视频和mime. 这是第一个视频标签.哪个工作正常,从This Link.开始 <video loop controls cla ...
1
如何检测HTML5音频MP3支持
问答我知道如何检查HTML5如果HTML5音频播放可用.但是如何具体检查MP3音频播放是否可用,因为IE9和Chrome支持它,而Firefox和Opera不.::您可以检查User-Agent并查看正在 ...
1
c# – 用于渲染图像的ASPX页面突然无法在Firefox中运行.适用于Chrome / IE
问答我有一个ASPX页面用于从数据库中提取图像并写入字节.我过去曾使用过这种方法,但它运行得很好.基本渲染代码如下: GetBannerImage.aspx.cs Response.Clear(); Re ...
1
javascript – 无法使HTML5音频标记在移动浏览器上运行
问答我有一个使用HTML5的网络应用程序标签,出于某种原因,虽然它在Windows和Mac PC上运行良好,但它在iOS和Android上不起作用. 这是我的代码的相关片段: 使用Javascript: ...
1
html5 – .ogg视频没有在Firefox中播放
问答我们刚刚开始使用html5视频,似乎无法在Firefox中获取.ogg文件,任何提示?以下是我们使用的来源: <video width="640" height=" ...
JavaScript粘贴事件在Chrome中运行良好但在Firefox中运行良好
问答我最初的目标是从剪贴板粘贴图像.但是我遇到了粘贴事件的麻烦. 在JSFiddle中,我重现了这个问题,HTML只包含一个div: <div style="width: 200px; h ...
1
asp.net – 我的javascript代码无法在mozilla firefox中运行
问答这是我的代码,仅用于创建文本框接受号码. <asp:TextBox ID="txtRotationNo" runat="server" onkeydown ...
1
android – HTML5音频无法在PhoneGap App中播放(可以使用Media?)
问答在国外旅行的基本音板上工作.设置一切在浏览器中工作正常,但希望使用PhoneGap Build / GitHub使其可下载,因为单元服务将无法使用. 一切都在桌面浏览器中运行良好,但是一旦安装在And ...
1