在移动浏览器上同时播放多个一键式音效？

Question

当用户单击Web应用程序中的按钮时，我正在尝试播放声音效果。

我首先尝试了这种方法：

var sound = new Audio("soundeffect.ogg");
function clickHandler(){
    sound.play();
}

但是，如果用户快速连续按两次按钮，则声音只会播放一次。 我认为这是因为声音尚未播放完毕，因此不会倒带。

然后，我尝试了这种解决方案。

var sound = new Audio("soundeffect.ogg");
function clickHandler(){
    sound.currentTime = 0;
    sound.play();
}

但是，这会导致第一个声音在播放下一个声音之前被切断。

然后，我尝试了此版本，每次单击该按钮时，都会创建一个新的声音效果：

function clickHandler(){
    var sound = new Audio("soundeffect.ogg");
    sound.play();
}

这在我的开发人员机器上完美运行，但是在移动数据上使用android chrome时，每次单击按钮似乎都必须加载声音效果，这会导致播放声音之前延迟几秒钟。

我希望在全局范围内声明声音效果，然后克隆它可能有助于将其保留在缓存中，但似乎没有帮助。

var sound = new Audio("soundeffect.ogg");
function clickHandler(){
    var oneShotSound = sound.cloneNode();
    oneShotSound.play();
}

Answer 1

我写了一个Web音频库Wad.js，在这种情况下，我认为它将为您提供帮助。

var sound = new Wad({ source : 'soundeffect.ogg' });

sound.play();

每次调用play() ，Wad.js都会创建一个新的音频缓冲区源节点，因此您可以听到相同声音的多个实例，但是所有这些音频缓冲区源节点都使用相同的音频缓冲区，从而节省了大量计算时间工作。

看看这个。 https://github.com/rserota/wad

但是，跨浏览器的兼容性并不完美。 我希望它可以在chrome for android中使用，但我尚未测试过。