Question

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

我有以下内容：

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

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

然而，它总是在点击时播放两次。 click事件仅触发一次（使用断点和日志进行测试）。

游戏是vanilla 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>

Javascript音频播放两次

1 个答案: