javascript - 在移动浏览器上同时播放多个单发音效？

Question

我正在尝试在用户点击我的网络应用程序中的按钮时播放声音效果。

我首先尝试了这个方法:

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

我写了一个网络音频库，Wad.js，我认为在这种情况下它会对你有所帮助。

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

sound.play();

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

检查一下。 https://github.com/rserota/wad

但是，跨浏览器兼容性并不完美。我希望它能在 chrome for android 中运行，但我还没有测试过。