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

Posted 2023-02-25

【中文标题】可以在 html 5 中连续播放两次声音吗？

【英文标题】：Possible to play a sound twice in a row in html 5?

【发布时间】：2015-08-17 00:59:23

【问题描述】：

我正在尝试构建一个用户必须记住以正确顺序播放的声音的西蒙游戏。我已经连接了音频，并在单击元素时正确触发。但是，除非您单击两次，否则音频不会连续两次播放相同的声音。也就是说，我不能让电脑模拟连续按两次按钮。

这是一个简化的，除了我的 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（尝试通过调用 load 函数来强制重新加载）：

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

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

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

尝试 4（从 setTimeout 之类创建延迟）：再一次，我知道这是一个可怕且不准确的问题，但如果问题是时间问题，这可能会阻止同时调用相同的东西时间模糊是否被调用。

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

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

【问题讨论】：

这里有一些可能有用的好东西：***.com/questions/8733330/…

我在发布之前查看了该内容，但没有看到可以解决我的问题的内容。我目前正试图强制重绘元素，但这似乎是个坏主意。

@user3162553，你想让它在第一次结束后播放第二次对吗？

这是正确的@mido22，我认为这就是我正在寻找的方法。

【参考方案1】：

使用媒体事件在ended event 上触发。如果您考虑一下，您正在尝试同时播放，加载，然后播放所有内容。这就像说，“播放，加载，播放！”无需等待它完成。

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

【讨论】：

感谢演示 - 这正是我想要的。我不知道为什么我从来没有想过能够为结束的音频事件设置事件监听器。