HTML5 audio - воспроизводить звук повторно по клику, независимо от того, завершена ли предыдущая итерация - PullRequest
Новая
       37

HTML5 audio - воспроизводить звук повторно по клику, независимо от того, завершена ли предыдущая итерация

16 голосов
/ 01 августа 2011

Я создаю игру, в которой wav-файл воспроизводится по щелчку - в данном случае это звук пушки "bang".

Проблема в том, что если я быстро нажму, он не будет воспроизводить звук один раз для каждого щелчка - это как если бы щелчки игнорировались во время воспроизведения звука, и как только звук закончился, он начинал слушатьщелкает снова.Задержка, похоже, длится около одной секунды, поэтому вы полагаете, что если кто-то нажимает 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();
});

Идеи?

Ответы [ 3 ]

15 голосов
/ 01 августа 2011

После того, как 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();
    });
13 голосов
/ 23 сентября 2012

Я знаю, что это очень поздний ответ, я просто хотел, но в поисках решения я обнаружил, что в моем случае лучше всего было предварительно загрузить звук и затем клонировать узел каждый раз, когда я хочу его воспроизвести, это позволяетмне играть в нее, даже если предыдущий еще не закончился: 

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

function playSound(volume) {
  var click=sound.cloneNode();
  click.volume=volume;
  click.play();
}
1 голос
/ 02 ноября 2012

Вы можете заключить следующее с вашей собственной логикой щелчка, специфичной для программы, но ниже показано, как 3 звука пушки одновременно.Если вам нужна какая-либо задержка, вы можете ввести небольшую функцию sleep () (многие хаки для этого легко найти) или использовать 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>
...