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

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