Comment faire en sorte que plusieurs fichiers mp3 soient joués les uns après les autres en un clic sur un bouton en utilisant javascript ou jquery?

Question

J'ai le html et le script suivant pour lire/mettre en pause un audio en cliquant sur un bouton.

J'ai besoin de le modifier de manière à jouer plusieurs fichiers mp3, un par un dans un ordre défini et arrêter que lorsque le dernier audio a joué.

Je ne sais pas comment faire fonctionner ça. Quelqu'un peut-il aider?

Answer 1

Vous pouvez enregistrer un gestionnaire d'événements pour la balise audio, celle-ci d'abord lorsque le fichier en cours est terminé;

document.getElementById("testAudio").addEventListener("ended",function(e) { 
    // Play next track 
}); 

Si vous avez une liste de pistes à jouer dans un tableau, puis jouez simplement la suivante après la piste en cours est terminé. En utilisant la fonction setTimeout, vous pouvez mettre un délai entre les pistes. Un exemple simple est le suivant:

<script> 
var playlist= [ 
    'https://api.twilio.com/cowbell.mp3', 
    'https://demo.twilio.com/hellomonkey/monkey.mp3' 
]; 
var currentTrackIndex = 0;  
var delayBetweenTracks = 2000; 

document.getElementById("playAudio").addEventListener("click", function(){ 
    var audio = document.getElementById('testAudio'); 
    if(this.className == 'is-playing'){ 
    this.className = ""; 
    this.innerHTML = "Play" 
    audio.pause(); 
    }else{ 
    this.className = "is-playing"; 
    this.innerHTML = "Pause"; 
    audio.play(); 
    } 
}); 

document.getElementById("testAudio").addEventListener("ended",function(e) { 
    var audio = document.getElementById('testAudio');  
    setTimeout(function() { 
    currentTrackIndex++; 
    if (currentTrackIndex < playlist.length) { 
     audio.src = playlist[currentTrackIndex]; 
     audio.play(); 
    } 
    }, delayBetweenTracks); 
}); 
</script> 

Notez que la piste est Cowbell 52 secondes, donc si votre test ci-dessus (pour votre propre santé mentale) définir la propriété des contrôles à la balise audio afin que vous puissiez passer à travers la plus grande partie.