Internet Explorer 11 中的 <audio> 标记兼容性
Posted
技术标签:
【中文标题】Internet Explorer 11 中的 <audio> 标记兼容性【英文标题】：<audio> tag compatibility in Internet Explorer 11 【发布时间】：2014-03-03 08:04:16 【问题描述】：使用 html 中的标签，我可以轻松地在 Google Chrome 中播放音乐，单击指向另一首歌曲的链接将更改播放器中正在播放的歌曲，而无需更改网页。问题是，如果我尝试在 Internet Explorer 11 中执行相同操作，播放器的控件将不会显示，但默认歌曲仍会播放。该元素仍然存在，因为音乐仍将播放，单击链接将更改正在播放的歌曲。通过简单的复制和粘贴将代码移到 JSFiddle 中，控件在 Internet Explorer 中打开。 Here is the link 有人知道如何解决这个问题吗？
这是音频的代码：
<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
<source type="audio/mp3" src="http://www.archive.org/download/bolero_69/Bolero.mp3">
Sorry, your browser does not support HTML5 audio.
</audio>
<ul id="playlist">
<li class="active"><a href="http://www.archive.org/download/bolero_69/Bolero.mp3">Song 1</a></li>
<li><a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">Song 2</a></li>
<li><a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">Song 3</a></li>
<li><a href="http://www.archive.org/download/PatrikbkarlChamberSymph/PatrikbkarlChamberSymph_vbr_mp3.zip">Song 4</a></li>
【问题讨论】：
所以添加到 jsfiddle 可以正常工作？ 是的，它确实在 jsfiddle 中工作 作为一般说明：根据html5test.com for IE 11，应该完全支持音频元素，尽管Audio Web API 不支持。不确定这是否会在以后为您添加 IE 11 中的问题。
如果我使用单个音频文件播放，IE11 的音频控件 GUI 会显示。如果我对多个文件使用我的代码，音频控制 GUI 的区域是白色的，但仍然存在。音频也会继续播放。
不幸的是，有多种问题可能导致音频无法在 IE11 中播放，例如内容类型、内容处置、url 中的查询字符串、跨域问题、浏览器多媒体设置、 MS 拒绝支持其自己的 WAV 格式等格式……不胜枚举。
【参考方案1】：
如果您还没有这样做，我猜以下内容可能会对您有所帮助：
尝试将 jQuery 包装在：
$(window).load(function()
/*scripts*/
);
整个代码如jsfiddle所示：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function()
var audio;
var playlist;
var tracks;
var current;
init();
function init()
current = 0;
audio = $('audio');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length - 1;
audio[0].volume = .50;
playlist.find('a').click(function(e)
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);
);
audio[0].addEventListener('ended',function(e)
current++;
if(current == len)
current = 0;
link = playlist.find('a')[0];
else
link = playlist.find('a')[current];
run($(link),audio[0]);
);
function run(link, player)
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
audio[0].load();
audio[0].play();
//]]>
</script>
</head>
<body>
<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
<source type="audio/mp3" src="http://www.archive.org/download/bolero_69/Bolero.mp3">
Sorry, your browser does not support HTML5 audio.
</audio>
<ul id="playlist">
<li class="active"><a href="http://www.archive.org/download/bolero_69/Bolero.mp3">Song 1</a></li>
<li><a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">Song 2</a></li>
<li><a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">Song 3</a></li>
<li><a href="http://www.archive.org/download/PatrikbkarlChamberSymph/PatrikbkarlChamberSymph_vbr_mp3.zip">Song 4</a></li>
</body>
</html>
【讨论】：
是的，我用过它，它允许它在 Chrome 中工作。只是音频控件的 GUI 不会在 IE11 中显示。 @Kinexd 很好，如果它在小提琴中工作，那么我添加到我的答案的整个代码复制粘贴到你的页面可能会有所帮助 我更新了 jsfiddle 页面，因为我上传的第一个页面不起作用，因为我没有粘贴所有内容。我在第一篇文章中更新的新链接是here。看看这个是不是有明码的？ 抱歉不明白你在上面的评论中问了什么 感谢您的帮助。我从 jsfiddle 的 IE 中的开发人员工具中复制了我的代码，不知何故它现在可以在没有 jsfiddle 的 IE11 中运行。我想我的代码中一定有一些错误，我必须检查一下。【参考方案2】：我找到了 2 种 IE11 支持的格式：.m4a 和 .3ga
也可以将 .3ga 重命名为 .m4a - 它有效。 我现在没办法在 IE11 中播放 mp3
【讨论】：
以上是关于Internet Explorer 11 中的 <audio> 标记兼容性的主要内容，如果未能解决你的问题，请参考以下文章
Internet Explorer 11 中的“未处理的承诺拒绝 TypeMismatchError”
:after, :before Internet Explorer 11 中的问题
Internet Explorer 11 中的 window.postMessage 是不是有最大长度限制？
无法在 AngularJS 中的 Internet Explorer 11 中获取事件目标的父级