javascriptを介して作成されたオーディオを停止します

Question

これが私のスクリプトの大まかな例です。

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

そして、それはほとんどこのように続きます。そのため、どのボタンを押すかによって、別の曲が再生されます。ただし、ボタンを押すと対応する曲が開始されるだけでなく、現在再生中の曲もすべて停止するようにしたいと思います。オーディオオブジェクトはローカルで作成され、関数呼び出し後に消えるので、どうすればよいですか？どこから来たのかを特定せずに、再生中のサウンドを停止するようにページに要求する方法はありませんか？

Answer 1

質問は、新しいオーディオが選択されたときに、現在再生中のオーディオを一時停止する方法を尋ねます。

追加の問題があります。指定されたコードは、ボタンが押されるたびに新しい要素を作成しますが、それが削除されることはないため、ストアは徐々に再訪されることのないオーディオ要素でいっぱいになります。

これを回避する簡単な方法は、オーディオ要素を1つだけにして、ボタンがクリックされたときにsrcを変更することです。そうすれば、後で冗長になる要素を構築することはありません。

まず最初にこのコードを試してください：

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

それがうまくいく場合は、コードを単純化することを検討できます。たとえば、IDを介して再生するオーディオを分類するのではなく、各ボタンのdata-src属性としてオーディオソースを設定します。