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

这是我的代码。声音存储在名为 Sounds 的文件夹中，其 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();
        });
    };
});