在移動瀏覽器上同時播放多個一鍵式音效？

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中使用，但我尚未測試過。