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

audioRed只会发射一次。

尝试2 （尝试通过调用加载函数强制重新加载）：

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

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

尝试3 （重建元素）：我想到的另一种尝试是在每次触发方法时重新构建并重新加载音频标记，但这看起来很荒谬且可笑。

尝试4 （从setTimeout创建延迟）：再次，我知道这是一个可怕且不准确的但是如果问题是时机可能这可能会阻止同样的事情发生如果它被调用或同时被调用，则同时调用。

尝试5 （更改音频元素的来源以强制重新加载）：我认为如果更改元素的来源而不是将其更改回来，则会强制它查看第二个改变与第一个不同。

初学者是否真的可以访问音频，还是需要使用流和缓冲区才能真正起作用？

Answer 1

使用媒体事件在ended event上触发。如果您考虑一下，您可以尝试播放，加载，然后同时播放所有内容。这就像说，＆＃34;播放，加载，播放！＆＃34;没有等待它完成。

注意，我不知道媒体事件的浏览器支持（由于文件源的访问限制，该演示在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/

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

1 个答案: