HTML5 <audio>标签在IE10 </audio>中不起作用/播放

时间:2013-05-19 05:51:51

标签: .htaccess internet-explorer cross-browser mp3 html5-audio

我有一个页面,显示一些音频.ogg / .mp3文件,用于在浏览器中收听(它是购买的产品,显示在“收据”页面上)。

这些文件在Chrome,Opera,Safari和Firefox中非常出色,我可以播放,暂停,重启以及所有内容。

今天我使用快速修复并强制浏览器如果IE模拟IE7版本然后它可以工作,但当然是看起来很难看。我也可以跳过<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">并使用兼容性视图并获得相同的结果。

在IE10 Win7(获得最新版本)中显示,我甚至无法按下播放按钮:http://snag.gy/kANRy.jpg 您可以在http://energyshop.se/testry.php/

查看自己

另外,myclient使用旧版IE,对她来说也一样。

我还可以补充一点,如果Ihit f12并切换到IE10的兼容性视图,音频将正常工作并且我能够收听它们 - 但是一旦我取消单击兼容性视图就不会。

这是用于音频的代码(TEST代码)(以及http://pastebin.com/ENrPj8cx我的pdt.php的完整代码版本):

<!DOCTYPE html>
<html>
<head>
<title>Tack för Ert köp!</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>

<link rel="stylesheet" type="text/css" href='/phpstyles.css' />

</head>
<body>
<?php


                                echo("<audio id='testry' controls preload='auto'>");
                                echo("<source src='/1.mp3' />");
                                echo("<source src='1.mp3' />");
                                echo("<source src='1.mp3' />");
                                echo("<source src='/1.mp3' type='audio/mpeg' />");
                                echo("<source src='1.mp3' type='audio/mpeg' />");
                                echo("<source src='/1.mp3' type='audio/mp3' />");
                                echo("<source src='1.mp3' type='audio/mp3' />");

                                echo("Your browser does not support the audio tag.");
                                echo("</audio>");



?>
</body>
</html>

这是我的.htaccess:http://pastebin.com/2mz8QwEV

此外,这是我的页面的元头和元文件(它是一个pdt.php)

<!DOCTYPE html>
<html>
<head>
<title>Tack för Ert köp!</title>

<link rel="stylesheet" type="text/css" href='/phpstyles.css' />
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
</head>

我知道IE9 +支持.mp3,我已经更新了,所以最新消息?任何人吗?

4 个答案:

答案 0 :(得分:3)

我之前见过一个非常类似的问题。专门处理IE9 + html5音频中的.ogg和.mp3文件类型。

问题通过调整.htaccess文件中的MIME类型声明来解决,而文件类型在其他浏览器中运行得很好 - 仅IE9对于它可以使用的内容非常挑剔......

进一步调查 - 很快就会有更多信息。

我很好奇你的托管情况如何? (win / linux - 自托管/共享?)我最初假设共享linux因为php文件,因为这是最常见的情况。

编辑:

取决于托管情况 - (您拥有硬件/ VPS /或使用共享主机)有些人发现他们的基于Windows的托管服务提供商web.config文件实际上是覆盖他们的mime类型声明但我是由于我的托管情况是基于linux的

,因此无法验证 经过一些搜索后,我发现了一些其他记录在案的案例和其他一些解决方案:

for shared / hosted sites, this developer将他的mp3文件转换为.m4a,IE9中有mime类型

另外,如果你感兴趣this Microsoft Developer Network article - 详细说明IE9这样做的原因

this stack question is similar解决您在Apache Tomcat服务器上的问题

答案 1 :(得分:1)

请检查IE上支持哪种格式:http://textopia.org/androidsoundformats.html。您可以使用内置的开发人员工具进行检查,看看它是如何实现的。

此处Microsoft Offers a Guide to Using HTML5 Audio

关于Unlocking the power of HTML5

答案 2 :(得分:1)

只是为了添加完整性,添加到音频元素的属性,键入并将其设置为'mp3'或'audio / mpeg'不确定哪个,但至少你知道页面明确告知borwser您要链接的资源的类型。

如果这不起作用,HTML中没有其他选项来定义这些资源,那么我会考虑IE10的支持作为问题吗?

答案 3 :(得分:0)

我认为这是因为您的服务器没有为您提供的网址发回正确的内容类型。

http://energyshop.se/testry.php/1.mp3提供内容类型:  内容类型:text / html;字符集= UTF-8

http://energyshop.se/1.mp3提供内容类型:  Content-Type:application / octet-stream

我看到您在Why doesn't the audio tag work in IE?

发布了.htaccess文件

您可能设置八位字节流类型以提示下载。尝试将其设置为“audio / mpeg”,并仅将“/1.mp3”设置为音频标签上的源。