可以在html 5中连续播放两次声音

Question

我试图建立一个西蒙游戏，用户必须记住在正确的顺序播放的声音。我已经连接了音频，当元素被点击时，它会正确地触发。但是，音频不会连续播放相同的声音两次，除非您单击两次。换句话说，我不能让计算机模拟连续两次按下按钮。

这是一个简化的除了我的js文件:

尝试1(调用函数两次):

...
var redButton    = document.getElementById("red");
var audioRed     = document.getElementById("audio-red");
redButton.addEventListener("click", function() {
   createNewSeq();
});
...
var createNewSeq = function () {
  audioRed.play();
  audioRed.play();
};

audiered只会触发一次。

尝试2(试图通过调用load函数强制重新加载):

var createNewSeq = function () {
  audioRed.play();
  audioRed.load();
  audioRed.play();
};

同样的问题-只播放一次。

尝试3(重建元素):我想到的另一个尝试是逐字重建和重新加载音频标签上的每一个方法的发射，但这似乎荒谬和可笑的效率低下。

尝试4(从setTimeout创建延迟):再一次，我知道这是一个可怕的和不准确的，但如果问题是计时，这可能会阻止同样的事情在同一时间被调用，模糊它是否被调用。

尝试5(更改音频元素的源以强制重新加载):我认为如果您更改元素的源而不是将其更改回来，则会迫使它将第二次更改视为不同于第一次更改。

音频对初学者来说真的很容易理解吗?还是你需要使用流和缓冲区才能真正工作?

Answer 1

使用Media Events触发ended事件。如果你仔细想想，你就会发现你在尝试着同时玩游戏，加载游戏，然后再玩游戏。这就像说，"播放，加载，播放!"而不等待它完成。

注意，我不知道浏览器对媒体事件的支持(由于文件源的访问限制，演示不能在IE11中工作，但它可以在Chrome和Firefox最新版中工作)。

演示(在按钮click上播放两次):

<audio id="audiotag1" src="https://upload.wikimedia.org/wikipedia/en/9/9f/Sample_of_%22Another_Day_in_Paradise%22.ogg" preload="auto"></audio>
<button type='button' id='test'>Play Sound</button>
<span id='played'>0</span>
var audiotag = document.getElementById('audiotag1'),
    test = document.getElementById('test'),
    played = document.getElementById('played'),
    times_played = 0,
    max_plays = 2;
test.addEventListener('click', function() {
    audiotag.play();
    times_played++;
    played.textContent = 'Play #: ' + times_played;
});
audiotag.addEventListener('ended', function(){
    console.log('run again', times_played);
    if (times_played >= max_plays) {
        times_played = 0;
        played.textContent = 'Play #: ' + times_played;
        return;
    }
    audiotag.currentTime = 0;
    audiotag.play();
    times_played++;
    played.textContent = 'Play #: ' + times_played;
});

http://jsfiddle.net/x7xybLus/3/