Stoppen Sie ein Audio, das mit Javascript erstellt wurde
Hier ist ungefähr, wie mein Skript aussieht.
var ButtonSelect = document.querySelectorAll(".musicBtn")
ButtonSelect.forEach(element => element.addEventListener("click", playMusic))
function playMusic(){
var audio = new Audio("music1.mp3");
if (this.id == "A")
audio.play();
else if (this.id == "B") {
audio.src="music2.mp3";
audio.play();
} else if (this.id == "C") {
audio.src="music3.mp3";
audio.play();
} ...
}
Und so geht es so ziemlich weiter. Je nachdem, welche Taste gedrückt wird, wird ein anderes Lied abgespielt. Aber ich möchte es so gestalten, dass durch Drücken einer Taste nicht nur das entsprechende Lied gestartet wird, sondern auch das gerade abgespielte Lied gestoppt werden muss. Wie gehe ich vor, da das Audioobjekt lokal erstellt wird und nach dem Funktionsaufruf verschwindet? Gibt es keine Möglichkeit, die Seite zu bitten, den abgespielten Sound anzuhalten, ohne anzugeben, woher er kommt?
Antworten
In der Frage wird gefragt, wie das aktuell wiedergegebene Audio angehalten werden kann, wenn ein neues ausgewählt wird.
Es gibt ein zusätzliches Problem. Der angegebene Code erstellt jedes Mal ein neues Element, wenn eine Taste gedrückt wird, wird jedoch nie entfernt, sodass der Speicher nach und nach mit Audioelementen gefüllt wird, die niemals erneut aufgerufen werden.
Eine einfache Möglichkeit, dies zu umgehen, besteht darin, nur ein Audioelement zu haben und den Quellcode zu ändern, wenn auf eine Schaltfläche geklickt wird. Auf diese Weise bauen wir keine Elemente auf, die später überflüssig werden.
Versuchen Sie zuerst diesen Code:
var ButtonSelect = document.querySelectorAll(".musicBtn")
var audio = new Audio("music1.mp3");
ButtonSelect.forEach(element => element.addEventListener("click", playMusic))
function playMusic(){
audio.pause();
if (this.id == "A") {
audio.src="music1.mp3";
audio.play();
}
else if (this.id == "B") {
audio.src="music2.mp3";
audio.play();
} else if (this.id == "C") {
audio.src="music3.mp3";
audio.play();
}
}
Wenn dies in Ordnung ist, können Sie Ihren Code vereinfachen, indem Sie beispielsweise die Audioquelle als data-src-Attribut in jeder Ihrer Schaltflächen verwenden, anstatt zu sortieren, welches Audio über eine ID abgespielt werden soll.