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

这是我的代码。声音存储在名为sounds的文件夹中，其ID在JSON文件中。

我正在尝试停止按下新按钮时播放的所有当前声音。

更改为下面的代码将在单击相同按钮时停止并重新启动声音。但如果我点击其他按钮，则会同时播放多个声音。

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

我希望无论按下哪个按钮，它一次只能播放1个声音。有什么建议吗？

感谢。

Answer 1

这三行代码应该停止播放所有声音，包括当前播放的声音。

<div class="topnav">
   <ul class="buttons">
      <li class="flip"> Canada</li>
      <li class="flip">International</li>
   </ul>
  <div class="bottombar1" id="bottombar1"></div>
</div>

Object.keys(howlerList).forEach(function(key) { howlerList[key].stop(); });获取提供的对象的键并将它们作为数组返回。然后，您使用Object.keys(howlerList)循环浏览forEach中的每个项目并调用howlerList函数，以停止每个声音。

添加到您的代码中，可以像这样使用

stop()

咆哮jQuery在播放新声音时停止所有声音

1 个答案: