ハウラーjQueryは、新しいサウンドを再生するときにすべてのサウンドを停止します。

Question

$(document).ready(function() 
{ 
    const howlerList = {}; 

    for (var i = sounds.length - 1; i >= 0; i--) 
    { 
     howlerList[sounds[i]] = new Howl({src: ["/sounds/" + sounds[i] + ".mp3"]}); 

     $("#" + sounds[i]).click(function() 
     { 
      howlerList[$(this).attr("id")].play(); 
     }); 
    }; 
}); 

ここは私のコードです。サウンドはサウンドと呼ばれるフォルダに保存され、IDはJSONファイルに格納されます。

新しいボタンを押したときに現在再生されているサウンドをすべて停止しようとしています。

次のコードを変更すると、同じボタンをクリックするとサウンドが停止して再開します。しかし、他のボタンをクリックすると、同時に複数のサウンドが再生されます。

$("#" + sounds[i]).click(function() 
{ 
    howlerList[$(this).attr("id")].stop(); 
    howlerList[$(this).attr("id")].play(); 
}); 

どのボタンを押しても、一度に1音しか再生しません。助言がありますか？

ありがとうございました。

Answer 1

これらの3行のコードは、現在再生中のサウンドを含め、すべてのサウンドの再生を停止する必要があります。

Object.keys(howlerList).forEach(function(key) { 
    howlerList[key].stop(); 
}); 

Object.keys(howlerList)は、指定されたオブジェクトのキーを取得し、配列として返します。次にforEachを使用してhowlerListの各項目をループし、stop()関数を呼び出して各サウンドを停止します。あなたはすべてのhowlerList要素をループして、彼らがクリックされた特定のものを再生する前に）（それらを停止しようとしたことがあり

があなたのコードに追加されました、それがこの

$(document).ready(function() 
{ 
    const howlerList = {}; 

    for (var i = sounds.length - 1; i >= 0; i--) 
    { 
     howlerList[sounds[i]] = new Howl({src: ["/sounds/" + sounds[i] + ".mp3"]}); 

     $("#" + sounds[i]).click(function() 
     { 
      Object.keys(howlerList).forEach(function(key) { 
       howlerList[key].stop(); 
      }); 
      howlerList[$(this).attr("id")].play(); 
     }); 
    }; 
});