Question

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>
Was it helpful?

Solution

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>

OTHER TIPS

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top