整个代码如jsfiddle所示：

Question

使用html中的标签我可以轻松地在谷歌浏览器中播放音乐，点击其他歌曲的链接将改变播放器中播放的歌曲，而无需更改网页。问题是，如果我尝试在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>

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

Answer 2

我找到了IE11支持的2种格式：.m4a和.3ga

也可以将.3ga重命名为.m4a - 它有效。我发现现在无法在IE11中播放mp3

Internet Explorer 11中的<audio>标记兼容性</audio>

2 个答案:

整个代码如jsfiddle所示：