Interrompe um áudio criado por meio de javascript
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
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.