Javascript音频播放两次

Question

我正在构建一个简单的HTML5/Javascript游戏，并希望在点击某些内容时播放声音文件。

我有以下几点：

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

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

然而，它始终在扮演点击两次。点击事件只触发一次（使用断点和日志进行测试）。

游戏是香草JS，没有jQuery。

我错过了一些明显的东西吗？

我发现了与视频有关的其他问题，但没有解决音频的问题。

Answer 1

这个天真的实现似乎只为我玩一次。

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>