有没有办法用html5音频播放器创建随机播放模式 [英] Is there a way to create a shuffle mode with html5 audio player

问题描述

我正在尝试使用本机html5音频播放器为多个播放列表创建随机播放模式.我对javascript不太满意，我更像是网页设计师，而不是开发人员.在网上创建随机播放模式时，我找不到任何东西，所以我想在这里问这个问题，看看是否有人可以提供帮助.我有多个播放列表，并且想为每个单独的播放列表创建随机播放模式，并将其加载到一个音频播放器中.这可能与javascript或jquery一起吗?这是我用于音频播放列表的代码.

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>

推荐答案

我知道这已经3个月大了，但是有人可能会为此使用.我创建了一个JSFiddle. http://jsfiddle.net/vkMqR/1404/

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

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

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.

这篇关于有没有办法用html5音频播放器创建随机播放模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！