Zatrzymaj dźwięk, który został utworzony za pomocą javascript

Dec 17 2020

Oto z grubsza, jak wygląda mój skrypt.

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

I tak się prawie dzieje. Tak więc, w zależności od tego, który przycisk jest wciśnięty, odtwarzana jest inna piosenka. Ale chcę, aby było tak, że naciśnięcie przycisku nie tylko uruchamia odpowiedni utwór, ale także musi zatrzymać aktualnie odtwarzaną piosenkę. Skoro obiekt audio jest tworzony lokalnie i znika po wywołaniu funkcji, jak mam się do tego zabrać? Czy nie ma sposobu, aby po prostu poprosić stronę o zatrzymanie dowolnego odtwarzanego dźwięku bez określania, skąd pochodzi?

Odpowiedzi

1 AHaworth Dec 17 2020 at 14:14

Pytanie dotyczy sposobu wstrzymania aktualnie odtwarzanego dźwięku po wybraniu nowego.

Jest dodatkowy problem. Podany kod tworzy nowy element za każdym naciśnięciem przycisku, ale nigdy się go nie pozbywa, więc stopniowo magazyn zapełni się elementami audio, które nigdy nie będą ponownie odwiedzane.

Prostym sposobem obejścia tego jest posiadanie tylko jednego elementu audio i zmiana src po kliknięciu przycisku. W ten sposób nie budujemy elementów, które później stają się zbędne.

Najpierw wypróbuj ten kod:

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

Jeśli to działa dobrze, możesz rozważyć uproszczenie kodu, na przykład poprzez umieszczenie źródła dźwięku jako atrybutu data-src w każdym z przycisków, zamiast sortowania dźwięku do odtworzenia za pomocą identyfikatora.