Changement de musique basé sur aléatoire

Question

c'est la première fois que je pose une question sur Stack Overflow. S'il vous plaît excusez-moi pour toute erreur.

Je voudrais savoir comment je peux changer la première chanson jouée basée sur ul. Actuellement, la liste est randomisée chaque fois que je charge la page, mais la première chanson est toujours musique/1.mp3. Ce qui suit est mon code HTML et 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

Ajouter cette ligne:

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

juste en dessous des lignes suivantes:

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

Here is the JSFiddle demo

Le problème est que votre code html charge la source par défaut qui est <source src="music/1.mp3"> mais jamais changé après la randomisation jusqu'à ce que les liens sont cliqués.

Par conséquent, il a toujours joué le premier. Ajouter le code ci-dessus changerait la source au premier lien après randomisation.