【问题标题】:Javascript Audio plays twiceJavascript 音频播放两次
【发布时间】:2016-12-24 13:13:51
【问题描述】:

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

我有以下几点:

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

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

但是它总是在点击时播放两次。点击事件只触发一次(用断点和日志测试)。

游戏是普通的 JS,没有 jQuery。

我是否遗漏了一些明显的东西?

我发现了其他与视频相关的问题,但没有针对音频的可靠解决方案。

【问题讨论】:

  • 控制台是否打印出 'tile clicked' 一次或两次?
  • 只触发一次日志。

标签: javascript html audio


【解决方案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>

【讨论】:

  • 令人尴尬的是,我认为这是浏览器同步的某种缓存问题/问题。重新启动 browserSync 并清除缓存解决了这个问题。不过感谢您的全面回复。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-09-20
相关资源
最近更新 更多