Dźwięk HTML5 - odtwarzaj dźwięk wielokrotnie po kliknięciu, niezależnie od tego, czy poprzednia iteracja zakończyła się.

Question

Buduję grę, w której plik wav jest odtwarzany po kliknięciu - w tym przypadku jest to dźwięk pistoletu "bang".

Problem polega na tym, że jeśli szybko kliknę, dźwięk nie będzie odtwarzany raz dla każdego kliknięcia - to tak, jakby kliknięcia były ignorowane podczas odtwarzania dźwięku, a po zakończeniu dźwięku znowu zaczęły nasłuchiwać kliknięć . Opóźnienie wydaje się być około jednej sekundy długo, więc figura jeśli ktoś kliknie 4 lub 5 razy na sekundę, chcę 5 grzywkę, a nie 1.

Tu jest mój HTML:

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

Oto moje JS:

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

Pomysły?

Answer 1

Po wstępnym załadowaniu gun_bang.wav można dynamicznie tworzyć nowe elementy z dołączonym dźwiękiem, odtwarzać dźwięk, a następnie usuwać je po zakończeniu dźwięku.

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

Wiem, że to bardzo późną odpowiedź, chciałem po prostu, ale szukając rozwiązania Okazało się, że w moim przypadku najlepszy był wstępnego ładowania dźwięku i klonowania węzła za każdym razem, kiedy chcę zagrać to, to pozwala mi grać, nawet jeśli poprzedni nie został zakończony:

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

można owinąć następujące z własnym programem specyficzne click logiki, ale dodaje demonstruje 3 pistolet dźwięków jednocześnie. Jeśli chcesz uzyskać jakiekolwiek opóźnienie, możesz wprowadzić mniejszą funkcję sleep() (można łatwo znaleźć wiele hacków kludge) lub możesz użyć metody setTimeout() w celu wywołania kolejnych.

<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>