문제

Using the tag in html I have been able to play music in Google Chrome easily and clicking a link to another song will change the song playing in the player without changing the webpage. The problem is, if I try to do the same in Internet Explorer 11 the controls for the player will not show but the default song still plays. The element is still there as the music will still play and clicking the links will change the song that is playing. Moving the code over into JSFiddle with a simple copy and paste, the controls open in Internet Explorer. Here is the link Would anyone know how to help fix this?

Here is the code for the audio:

<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>
도움이 되었습니까?

해결책

I am guessing the following could help you if you havent done it:

Try wrapping the jQuery within:

$(window).load(function(){
    /*scripts*/
});

Entire code as shown in 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>

다른 팁

I found 2 formats,supported by IE11: .m4a and .3ga

also it is possible to rename .3ga to .m4a - it worked. I found no way to play mp3 in IE11 now

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top