Javascript 有没有办法用html5音频播放器创建洗牌模式

我正在尝试使用本机html5音频播放器为多个播放列表创建洗牌模式。我对javascript不是很在行，我更多的是一个网页设计师，而不是开发人员。我在网上找不到任何关于创建洗牌模式的信息，所以我想我会在这里问这个问题，看看是否有人能帮上忙。我有多个播放列表，希望为每个播放列表创建一个随机播放模式，并将其加载到一个音频播放器中。这在javascript或jquery中是可能的吗？这是我的代码，我有我的音频播放列表

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

---

为什么不尝试创建一个包含所有曲目的数组，然后尝试洗牌该数组？这里有一个很好的用于洗牌数组的StackOverflow资源：

我知道这已经3个月了，但可能有人会用到它。我创建了一个JSFIDLE

---

我从播放列表中取出了代码，并使用了一个带有曲目链接的数组，我在页面加载时将其洗牌。当当前曲目结束时，ended eventlistener将加载下一首曲目。

html5音频播放器是否会知道最后一首歌曲何时结束，然后播放下一首曲目？我查看了代码，但正如我所说，javascript不太好，因此我不确定如何实现这一点。你能给我举个有帮助的例子吗。感谢您的回复。一旦您洗牌了一个数组，您可以继续从数组中弹出元素。你弹出的每个元素都是要播放的歌曲。当数组不为空时，可以继续弹出这些元素。一旦它空了，你可以重新洗牌数组并重新开始。因为我怀疑这不会播放数组中的下一首歌，我可能做错了什么，但不确定，因为我对javascript的经验有限，我只知道基本知识，如果有人能帮上忙，我会非常感激。举个例子会很有帮助。我尝试过为列表创建一个数组，但它只会洗牌列表，显然不会播放歌曲。我尝试过为函数创建一个数组，但不确定它是否启动，我甚至不知道这是否可行。我觉得我什么都试过了。不知道为什么每个人都一直点击这个问题旁边的向下箭头，也许这个论坛对于刚开始使用javascript的人来说是一个不好的问代码问题的地方。我一直在不停地研究这个问题，已经有一个星期了，但找不到任何答案。也许是时候放弃了，阵列不为我工作idk为什么。

<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;
}