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();
}

Answer 3

您可以使用自己的程序特定点击逻辑包装以下内容，但以下内容同时演示了3种枪声。如果你想要任何类型的延迟，你可以引入一个小的sleep（）函数（很容易找到很多kludge hacks），或者你可以使用setTimeout（）来调用后续函数。

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

<script type="text/javascript">
jQuery(document).ready(function($){

  $('#gun_sound').clone()[0].play();
  $('#gun_sound').clone()[0].play();
  $('#gun_sound').clone()[0].play();

});
</script>

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

3 个答案: