Wie können Sie mehrere mp3-Dateien auf Knopfdruck mit Javascript oder jquery nacheinander abspielen lassen?

Question

Ich habe das folgende HTML und Skript, um ein Audio zu spielen/anzuhalten, indem ich eine Taste anklicke.

muß ich es so bearbeiten, wie mehrere MP3-Dateien nacheinander in einer bestimmten Reihenfolge zu spielen und nur stoppen, wenn der letzte Ton gespielt hat.

Ich weiß einfach nicht, wie man das macht. Kann jemand helfen?

Answer 1

Sie können einen Ereignishandler für das Audio-Tag registrieren, wenn die aktuelle Datei beendet ist;

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

Wenn Sie eine Liste von Spuren haben in einer Reihe zu spielen, dann spielen Sie einfach das nächste nach dem aktuellen Titel beendet ist. Mit der setTimeout-Funktion können Sie eine Verzögerung zwischen den Tracks einfügen. Ein einfaches Beispiel ist wie folgt;

<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> 

Beachten Sie, dass Kuhglocke Spur 52 Sekunden lang ist, also, wenn Ihr die obige Prüfung (für die eigene geistige Gesundheit) den Kontrollen Eigenschaft auf den Audio-Tag, so dass Sie durch die meisten davon überspringen.