根據隨機化改變音樂ul

Question

這是我第一次問Stack Overflow問題。請原諒我的錯誤。

我想知道如何改變基於隨機化ul播放的第一首歌曲。目前，每當我加載頁面時，該列表都是隨機的，但第一首歌總是音樂/ 1.mp3。以下是我的HTML和JS代碼：

HTML：

<audio id="audio" preload="auto" tabindex="0" controls="" > 

     <source src="music/1.mp3"> 

    </audio> 


    <ul id="playlist"> 
     <li> 
      <a href="music/1.mp3"> 
       1 
      </a> 
     </li> 
     <li> 
      <a href="music/2.mp3"> 
       2 
      </a> 
     </li> 
     <li> 
      <a href="music/3.mp3"> 
       3 
      </a> 
     </li> 
    </ul> 

JS：

var audio; 
    var playlist; 
    var tracks; 
    var current; 
    var ul = document.querySelector('ul'); 
    for (var i = ul.children.length; i >= 0; i--) { 
     ul.appendChild(ul.children[Math.random() * i | 0]); 
    } 


    init(); 
    function init(){ 
     current = 0; 
     audio = $('#audio'); 
     playlist = $('#playlist'); 
     tracks = playlist.find('li a'); 
     len = tracks.length; 
     audio[0].volume = 1; 
     audio[0].play(); 
     playlist.find('a').click(function(e){ 
      e.preventDefault(); 
      link = $(this); 
      current = link.parent().index(); 
      run(link, audio[0]); 
     }); 
     audio[0].addEventListener('ended',function(e){ 
      current++; 
      if(current == len){ 
       current = 0; 
       link = playlist.find('a')[0]; 
      }else{ 
       link = playlist.find('a')[current]; 
      } 
      run($(link),audio[0]); 
     }); 
    } 

    function run(link, player){ 
      player.src = link.attr('href'); 
      par = link.parent(); 
      par.addClass('active').siblings().removeClass('active'); 
      audio[0].load(); 
      audio[0].play(); 
    } 

Answer 1

加入這一行：

$("#audio").find("source").attr("src", $("ul li:first-child a").attr("href")); 

右以下行如下：

for (var i = ul.children.length; i >= 0; i--) { 
    ul.appendChild(ul.children[Math.random() * i | 0]); 
} 

Here is the JSFiddle demo

的問題是，你的HTML載入這是<source src="music/1.mp3">但隨機分組後從來沒有改變過，直到鏈接被點擊默認源。

因此，它始終發揮第一個。 添加上面的代碼會將隨機化後的源代碼更改爲第一個鏈接。