HTML5 音频 - 单击时重复播放声音，无论之前的迭代是否完成答案

【问题标题】：HTML5 audio - play sound repeatedly on click, regardless if previous iteration has finishedHTML5 音频 - 单击时重复播放声音，无论之前的迭代是否完成
【发布时间】：2011-10-17 02:38:36
【问题描述】：

我正在构建一个点击播放 wav 文件的游戏 - 在这种情况下，它是一个枪声“砰”的一声。

问题是，如果我快速点击，每次点击都不会播放一次声音 - 就好像在播放声音时忽略了点击，一旦声音结束，它就会再次开始监听点击。延迟似乎是一秒左右，所以你想如果有人每秒点击 4 或 5 次，我想要 5 次刘海，而不是 1 次。

这是我的 HTML：

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

这是我的 JS：

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

想法？

【问题讨论】：

标签： html audio html5-audio

【解决方案1】：

一旦gun_bang.wav 被预加载，您就可以动态地创建带有该声音的新元素，播放音频，然后在音频结束后将其删除。

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();
});

【讨论】：

这看起来很有希望。我唯一担心的是在创建元素时点击和音频之间会有延迟。我还需要我最初的audio 标签吗？我想这就是它的预加载方式？
哈所有的恐惧都被揭穿了，谢谢！现在 JQuery 什么时候开始支持这些功能，这样我就可以做$('selector').play() 之类的了？
这太过分了。只需将currentTime 设置为0：stackoverflow.com/a/7005562/352796
@AllenWebguy 你可以在jQuery中使用$('selector')[0].play();
@katspaugh 会切断声音。

【解决方案2】：

我知道这是一个很晚的答案，我只是想这样做，但寻求解决方案我发现在我的情况下，最好的方法是预加载声音，然后每次我想播放它时克隆节点，这允许即使上一个还没有结束我也要播放它：

var sound = new Audio("click.mp3");
sound.preload = 'auto';
sound.load();

function playSound(volume) {
  var click=sound.cloneNode();
  click.volume=volume;
  click.play();
}

【讨论】：

这很棒。有没有办法做同样的事情，但使用多个 mp3？
@jmservera 这很好，但是每次新的点击都会添加一个 HTTP 请求 :(
在 Chrome 中就像一个魅力，但由于某种原因 Firefox 无法播放。我确实在 Firefox 选项卡上看到了扬声器图标，所以有音频，如果我的 PC 上播放了任何其他音频（youtube 视频、Skype 通话等），那么 Firefox 甚至可以听得见 - 否则我听不到它： -/ 有任何想法吗？我正在通过 for 循环射出许多克隆，因此可以将其视为机关枪射击
嗨@jmservera，我想知道这种克隆方法是否会导致内存泄漏？因为克隆的元素永远不会被清理吧？

【解决方案3】：

您可以使用您自己的程序特定的点击逻辑包装以下内容，但以下内容同时演示了 3 种枪声。如果你想要任何延迟，你可以引入一个小的 sleep() 函数（很容易找到许多 kludge hacks），或者你可以使用 setTimeout() 来调用后续函数。

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

【讨论】：

preload="preload" 在 HTML5 中点击播放按钮之前是否会加载音频？