有没有办法使用 html5 音频播放器创建随机播放模式

Question

我正在尝试使用原生 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>

Answer 1

我知道这是 3 个月大，但有人可能会用到它。我创建了一个 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;
}

我从http://www.lastrose.com/html5-audio-video-playlist 获取代码并删除了播放列表，并使用了一个带有曲目链接的数组，我在页面加载时会随机播放。结束的事件监听器将在当前完成时加载下一首曲目。

Answer 2

您为什么不尝试创建一个包含所有曲目的数组，然后尝试改组该数组？这是一个用于洗牌数组的绝佳 StackOverflow 资源：Fisher Yates Shuffle