Javascript Girl
  1. Javascript Girl
  3. Changement automatique à la prochaine chanson après la fin
Intereting Posts
Capturez le contenu de la console d'erreur Firefox / IE via un code? Array.sort fonctionne différemment dans Chrome et Firefox et IE Obtenir l'URI complet de la propriété href d'un lien RequireJS: Multiple main.js? Comment forcer l'exécution séquentielle de Javascript? Comment puis-je faire avancer les événements de la souris sur le défilement de la page? Pourquoi ++ ] ] + ] renvoie la chaîne "10"? Comment créer une ligne de texte svg dans javascript? AngularJS Best Practice – Usine avec plusieurs méthodes Communication entre l'application natif d'iOS et le javascript de la page Web Fonction Javascript ne renvoie pas la valeur Conserver la position de la barre de défilement même après le rechargement à l'aide de javascript Ajouter une animation entre deux objets dans Fabric js Qu'est-ce que \\ $ & in "str.replace (specials," \\ $ & ")" signifie? JavaScript setTimeOut ne semble pas fonctionner comme j'attends

Changement automatique à la prochaine chanson après la fin

Je veux que l'auto joue la prochaine chanson après la fin de la dernière chanson. Actuellement ce mon code.

HTML 

<audio id="audio" src="Music/Inuyasha - Dearest ~Instrumental~.mp3" controls></audio> <div class="btn" name="Music/Inuyasha - Dearest ~Instrumental~.mp3"></div><br> <div class="btn" name="Music/Fear and Loathing in Las Vegas - Just Awake.mp3"></div><br> <div class="btn" name="Music/Fear and Loathing in Las Vegas - How Old You Are Never Forget Your Dream.mp3"></div><br> <div class="btn" name="Music/Fear and Loathing in Las Vegas - Short but Seems Long time of our Life Lyrics.mp3"></div><br> <div class="btn" name="Music/My First Story - Calling You.mp3"></div><br> <div class="btn" name="Music/My First Story - Bullet Radio.mp3"></div>

JavaScript

$ () Est document.getElementById (). Je le possède. 

  // my codes is not JQuery but Pure JavaScript. var btn = document.getElementsByClassName('btn'); for(i=0; i < btn.length; i++){ btn[i].addEventListener('click', function(v){ $('audio').src = v.target.getAttribute('name'); $('audio').play(); }, false); //Above codes is not problem but bottom for auto to change next song after ended btn[i].index = i; $('audio').addEventListener('ended', function(){ $('audio').src = btn[this.index+1].getAttribute('name'); $('audio').play(); }, false); }

// mes travaux terminés est lorsque la chanson est terminée, il obtiendra une composition actuelle du champ d'index, puis +1 le tableau d'index actuel et le jouera jusqu'à la dernière chanson. Mais ça ne marche pas.

J'ai trouvé un moyen de le faire en JS pur en utilisant un auditeur d'événements. J'espère que vous trouverez le code utile. Mise à jour: ajout de support pour ajouter plus de chansons facilement 

  <!DOCTYPE html> <html> <body> <audio controls id="au" autoplay="autoplay"> <source src="Airport Lounge.mp3" type="audio/mpeg"> Your browser does not support this audio format. </audio> <script> var c=0; var songs = ["Airport Lounge.mp3", "Airport Lounge.mp3", "Airport Lounge.mp3"]; var a=document.getElementById("au"); a.addEventListener('ended', function(){ document.getElementById("au").src=songs[c]; a.load(); console.log(c); c++; if(c>=songs.length){ c=0; } }); </script> </body> </html> 
 var btn = document.getElementsByClassName('btn'), currentBtn = -1; for(i=0; i < btn.length; i++){ btn[i].addEventListener('click', function(){ // get current btn index currentBtn = Array.prototype.slice.call( btn ).indexOf(this); $('audio').btn[currentBtn].getAttribute('name'); $('audio').play(); }, false); } $('audio').addEventListener('ended', function() { // get next button index. if it was last one - repeat from first btn currentBtn++; if (currentBtn >= btn.length) { currentBtn = 0; } $('audio').src = btn[currentBtn].getAttribute('name'); $('audio').play(); }, false);