Detener un audio creado a través de javascript

Question

Así es aproximadamente como se ve mi guión.

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

Y prácticamente sigue así. Entonces, dependiendo de qué botón se presione, se reproducirá una canción diferente. Pero quiero hacer que no solo al presionar un botón se inicie la canción correspondiente, sino que también debe detener la canción que se está reproduciendo actualmente. Dado que el objeto de audio se crea localmente y desaparece después de la llamada a la función, ¿cómo lo hago? ¿No hay alguna forma de pedirle a la página que detenga cualquier sonido que se esté reproduciendo sin especificar de dónde viene?

Answer 1

La pregunta pregunta cómo se puede pausar el audio que se está reproduciendo actualmente cuando se selecciona uno nuevo.

Hay un problema adicional. El código dado crea un nuevo elemento cada vez que se presiona un botón, pero nunca se deshace de él, por lo que el almacenamiento se irá llenando gradualmente con elementos de audio que nunca se volverán a visitar.

Una forma sencilla de evitar esto es tener solo un elemento de audio y cambiar el src cuando se hace clic en un botón. De esa forma no estamos acumulando elementos que posteriormente se vuelven redundantes.

Pruebe este código en primer lugar:

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

Si eso funciona bien, podría considerar simplificar su código, por ejemplo, teniendo la fuente de audio como un atributo data-src en cada uno de sus botones en lugar de tener que ordenar qué audio reproducir a través de una identificación.