Interrompe um áudio criado por meio de javascript

Dec 17 2020

Aqui está aproximadamente a aparência do meu script.

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 continua assim. Portanto, dependendo de qual botão é pressionado, uma música diferente é reproduzida. Mas quero fazer com que não apenas o pressionamento de um botão inicie a música correspondente, mas também interrompa qualquer música que esteja tocando no momento. Visto que o objeto de áudio é criado localmente e desaparece após a chamada de função, como posso fazer isso? Não há como simplesmente pedir à página que pare qualquer som que esteja tocando sem especificar de onde ele vem?

Respostas

1 AHaworth Dec 17 2020 at 14:14

A questão pergunta como o áudio que está tocando pode ser pausado quando um novo é selecionado.

Existe um problema adicional. O código fornecido cria um novo elemento cada vez que um botão é pressionado, mas nunca se livra dele, então o armazenamento gradualmente será preenchido com elementos de áudio que nunca serão revisitados.

Uma maneira simples de contornar isso é ter apenas um elemento de áudio e alterar o src quando um botão for clicado. Dessa forma, não estamos construindo elementos que posteriormente se tornam redundantes.

Experimente este código antes de tudo:

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 funcionar bem, você pode considerar a simplificação do seu código, por exemplo, tendo a fonte de áudio como um atributo data-src em cada um de seus botões, em vez de escolher qual áudio tocar por meio de um id.