Javascript Audio spielt zweimal

Question

Ich baue ein einfaches HTML5/Javascript-Spiel und möchte eine Sounddatei wiedergeben, wenn etwas angeklickt wird.

Ich habe folgendes:

function tileClickListener(e) { 
    e.preventDefault(); 
    console.log('tile clicked'); 

    var audio = new Audio('sounds/click.wav'); 
    audio.play(); 
} 

jedoch immer zweimal auf Klick spielt. Das Klickereignis wird nur einmal ausgelöst (getestet mit einem Haltepunkt und einem Protokoll).

Das Spiel ist Vanille JS, kein jQuery.

Fehle ich etwas offensichtlich?

Ich habe andere Fragen im Zusammenhang mit Video gefunden, aber keine solide Lösung für Audio.

Answer 1

Diese naive Implementierung scheint nur einmal für mich zu spielen.

Array.from(document.querySelectorAll(".tile")).forEach(function(el){ 
 
    el.addEventListener("click", tileClickListener); 
 
}); 
 

 
function tileClickListener(e) { 
 
    e.preventDefault(); 
 
    console.log('tile clicked'); 
 
    var audio = new Audio('http://www.soundjay.com/button/beep-01a.wav'); 
 
    audio.play(); 
 
}

.tile{ 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: aliceblue; 
 
    border: solid 1px; 
 
    text-align: center; 
 
    line-height: 100px; 
 
}

<div class="tile">click</div>