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()时都会创建一个新的音频缓冲源节点，因此您可以听到同一声音的多个实例，但所有这些音频缓冲源节点都使用相同的音频缓冲区，为您节省大量的计算工作。

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