Hentikan audio yang dibuat melalui javascript

Question

Berikut kira-kira tampilan skrip saya.

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

Dan itu hampir terus berlanjut seperti ini. Jadi, tergantung tombol mana yang ditekan, lagu yang berbeda diputar. Tetapi saya ingin membuatnya tidak hanya menekan tombol untuk memulai lagu yang sesuai, tetapi juga harus menghentikan lagu apa pun yang sedang diputar. Karena objek audio dibuat secara lokal dan menghilang setelah pemanggilan fungsi, bagaimana cara melakukannya? Apakah tidak ada cara untuk meminta halaman menghentikan pemutaran suara apa pun tanpa menentukan dari mana asalnya?

Answer 1

Pertanyaannya menanyakan bagaimana audio yang sedang diputar dapat dijeda saat audio baru dipilih.

Ada masalah tambahan. Kode yang diberikan membuat elemen baru setiap kali tombol ditekan tetapi tidak pernah menghilangkannya sehingga secara bertahap penyimpanan akan dipenuhi dengan elemen audio yang tidak akan pernah dikunjungi kembali.

Cara sederhana untuk menyelesaikannya adalah dengan hanya memiliki satu elemen audio dan mengubah src ketika sebuah tombol diklik. Dengan begitu kami tidak membangun elemen yang kemudian menjadi mubazir.

Coba kode ini terlebih dahulu:

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

Jika berhasil, Anda dapat mempertimbangkan untuk menyederhanakan kode Anda, misalnya dengan memiliki sumber audio sebagai atribut data-src di setiap tombol Anda daripada harus memilah audio mana yang akan diputar melalui id.