HTML5音频 - 无论先前的迭代是否完成,都会在点击时反复播放声音

Question

我正在构建一个游戏,其中一个wav文件在点击播放 - 在这种情况下,它是一个枪声"爆炸".

问题是如果我快速点击,每次点击都不会播放一次声音 - 就像在播放声音时忽略点击一样,一旦声音结束,它就会再次开始听取咔嗒声.延迟似乎是大约一秒钟,所以你想,如果有人每秒点击4或5次,我想要5个刘海,而不是1个.

这是我的HTML:

<audio id="gun_sound" preload>
    <source src="http://www.seancannon.com/_test/audio/gun_bang.wav" />
</audio>

这是我的JS:

$('#' + CANVAS_ID).bind(_click, function() {
    document.getElementById('gun_sound').play();
    adj_game_data(GAME_DATA_AMMO_ID, -1);
    check_ammo();
}); 

想法？

Answer 1

一旦gun_bang.wav被预装,可以动态做出新的元素与连接到它的声音,播放音频,然后删除它们时,音频已完成.

    function gun_bang(){
        var audio = document.createElement("audio");
        audio.src = "http://www.seancannon.com/_test/audio/gun_bang.wav";
        audio.addEventListener("ended", function () {
            document.removeChild(this);
        }, false);
        audio.play();   
    }

    $('#' + CANVAS_ID).bind(_click, function() {
        gun_bang();
        adj_game_data(GAME_DATA_AMMO_ID, -1);
        check_ammo();
    }); 

Answer 2

我知道这是一个非常晚的答案,我只是想,但寻求解决方案我发现在我的情况下最好的是预加载声音,然后每次我想播放时克隆节点,这允许我玩它即使前一个没有结束:

var sound = new Audio("click.mp3");
sound.preload = 'auto';
sound.load();

function playSound(volume) {
  var click=sound.cloneNode();
  click.volume=volume;
  click.play();
}