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

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

谢谢。

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