根据随机化改变音乐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">但随机分组后从来没有改变过，直到链接被点击默认源。

因此，它始终发挥第一个。 添加上面的代码会将随机化后的源代码更改为第一个链接。