Ferma un audio creato tramite javascript

Question

Ecco più o meno come appare la mia sceneggiatura.

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();
    } ...
}

E praticamente va avanti così. Quindi, a seconda del pulsante premuto, viene riprodotto un brano diverso. Ma voglio fare in modo che non solo premendo un pulsante si avvii la canzone corrispondente, ma debba anche interrompere la canzone attualmente in riproduzione. Poiché l'oggetto audio viene creato localmente e scompare dopo la chiamata alla funzione, come posso procedere? Non c'è un modo per chiedere alla pagina di interrompere qualsiasi suono riprodotto senza specificare da dove proviene?

Answer 1

La domanda chiede come mettere in pausa l'audio attualmente in riproduzione quando ne viene selezionato uno nuovo.

C'è un ulteriore problema. Il codice dato crea un nuovo elemento ogni volta che si preme un pulsante, ma non lo elimina mai, quindi l'archivio gradualmente si riempirà di elementi audio che non verranno mai rivisitati.

Un modo semplice per aggirare questo problema è avere un solo elemento audio e cambiare src quando si fa clic su un pulsante. In questo modo non stiamo costruendo elementi che successivamente diventano ridondanti.

Prova prima questo codice:

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();
    }
}

Se funziona bene, potresti considerare di semplificare il tuo codice, ad esempio avendo la sorgente audio come attributo data-src in ciascuno dei tuoi pulsanti piuttosto che dover scegliere quale audio riprodurre tramite un id.