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

這是我的代碼。這些聲音存儲在名爲sound的文件夾中，並且其ID位於JSON文件中。

我試圖停止當按下新按鈕時播放當前所有聲音。

更改爲下面的代碼將停止並單擊同一個按鈕時重新啓動聲音。但是，如果我點擊其他按鈕，那麼多個聲音將同時播放。

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

我希望它一次只播放1個聲音，不管按哪個按鈕。有什麼建議麼？

謝謝。

Answer 1

這三行代碼應該會停止所有聲音的播放，包括當前播放的聲音。

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

Object.keys(howlerList)獲取提供的對象的鍵並將它們作爲數組返回。然後，您使用forEach循環訪問howlerList中的每個項目並調用stop()函數來停止每個聲音。

添加到您的代碼，它可以像這樣使用

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