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