Is there a way to create a shuffle mode with html5 audio player

Question

I am trying to create a shuffle mode for multiple playlists with the native html5 audio player. I am not that great with javascript i am more of a web designer and not developer. I cannot find anything on creating a shuffle mode online so I figured I would ask the question here and see if someone can help. I have multiple playlists and would like to create a shuffle mode for each individual playlist and load it into the one audio player. Is this possible with javascript or jquery? Here is my code that I have for my audio playlists.

 <audio id="player" controls="controls">
    <source src="#" type="audio/ogg">
    <source src="#" type="audio/mp3">
 </audio>

 <ul class="playlist">
     <li><button class="music-button" onclick='track1()'>Track1</button </li>
     <li><button class="music-button" onclick='track2()'>Track2</button </li>
     <li><button class="music-button" onclick='track3()'>Track3</button </li>
 </ul>

 <ul class="playlist2">
     <li><button class="music-button" onclick='track1()'>Track1</button </li>
     <li><button class="music-button" onclick='track2()'>Track2</button </li>
     <li><button class="music-button" onclick='track3()'>Track3</button </li>
 </ul>

 <script>
      function track1(){

      var player=document.getElementById('player');
      var sourceOgg=document.getElementById('player');
      var sourceMp3=document.getElementById('player');

      sourceOgg.src='url.ogg';
      sourceMp3.src='url.mp3';

       player.load();
       player.play(); 
 }

      function track2(){

      var player=document.getElementById('player');
      var sourceOgg=document.getElementById('player');
      var sourceMp3=document.getElementById('player');

      sourceOgg.src='url.ogg';
      sourceMp3.src='url.mp3';

       player.load();
       player.play(); 
 }

      function track3(){

      var player=document.getElementById('player');
      var sourceOgg=document.getElementById('player');
      var sourceMp3=document.getElementById('player');

      sourceOgg.src='url.ogg';
      sourceMp3.src='url.mp3';

       player.load();
       player.play(); 
 }

 </script>

Answer 1

I know this is 3 months old, but someone might have use for this. I created a JSFiddle. http://jsfiddle.net/vkMqR/1404/

<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
</audio>
<div id="playing">
</div>

var audio;
var playlist;
var tracks;
var current;

var musicarr = ["http://www.archive.org/download/CanonInD_261/CanoninD.mp3",
                "http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3",
                "http://www.archive.org/download/bolero_69/Bolero.mp3",
                "http://www.archive.org/download/onclassical-quality-wav-audio-files-of-classical-music/onclassical_demo_demicheli_geminiani_pieces_allegro-in-f-major_small-version_64kb.mp3",
                "http://www.archive.org/download/onclassical-quality-wav-audio-files-of-classical-music/onclassical_demo_elysium_anonymous-elysium_the-young-false-man_small-version_live-and_restored_64kb.mp3",
                "http://www.archive.org/download/onclassical-quality-wav-audio-files-of-classical-music/onclassical_demo_ensemble-la-tempesta_porpora_iii-notturno_iii-lezione_live_small-version_64kb.mp3",
                "http://www.archive.org/download/onclassical-quality-wav-audio-files-of-classical-music/onclassical_demo_roccato_anonymous-roccato_riflessi_small-version_64kb.mp3"
               ];
shuffle(musicarr);

init();
function init(){
    current = 0;
    audio = $('audio');
    audio[0].volume = .40;
    len = musicarr.length;

    run(musicarr[current], audio[0]);

    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
        }
        run(musicarr[current],audio[0]);
    });
}

function run(link, player){
        player.src = link;
        audio[0].load();
        audio[0].play();
        $('#playing').html("<ul><li><a>" + link+ "</a></li></ul>");     
}

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex ;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

I took the code from http://www.lastrose.com/html5-audio-video-playlist and removed the playlist and used an array with track links which I shuffle on page load. The ended eventlistener will load the next track when the current is finished.

Answer 2

Why don't you try creating an array of all the tracks you have, and then try shuffling the array? Here's a great StackOverflow resource for shuffling arrays: Fisher Yates Shuffle