如何在倒计时结束后自动播放音频？

Question

我想在倒计时完成后播放声音。通常我会使用这种和平的代码来做到这一点

   var audio = new Audio('path to file.mp3');
   audio.play();

但是我收到以下错误未处理的承诺拒绝：NotAllowedError：当前上下文中的用户代理或平台不允许该请求，可能是因为用户拒绝了权限。

事情是...... Google 它自己正在使用 HTML5 音频标签

如果您在 google 搜索字段中键入 countdown timer，它应该会显示在倒数计时器结束后播放声音的小部件。

这是 Google 计时器的样子，如果你们不知道我在说什么的话:)

Answer 1

通过让您单击此 "START" 按钮，他们要求用户做出手势，从而将他们的文档标记为用户批准播放音频。这意味着它们不再受 chrome 的 autoplay policies 约束。

现在，默认情况下，Safari 甚至比 Chrome 更严格，简单地单击文档是行不通的：在此浏览器中，您需要从用户事件本身开始播放。

所以在你的情况下，它不会工作，即使你确实从点击开始倒计时 Google。

解决方法是从点击事件开始播放，然后立即暂停。这样做，您的元素将被标记为用户批准，您将完全控制它。

const audio = new Audio("https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3");
let time = 5;

btn.onclick = e => {
  // mark our audio element as approved by the user
  audio.play().then(() => { // pause directly
    audio.pause();
    audio.currentTime = 0;
  });
  countdown();
  btn.disabled = true;
};


function countdown() {
  pre.textContent = --time;
  if(time === 0) return onend();
  setTimeout(countdown, 1000);
}


function onend() {
  audio.play(); // now we're safe to play it
  time = 5;
  btn.disabled = false;
}

<button id="btn">start countdown</button><br>
<pre id="pre"></pre>

如何在倒计时结束后自动播放音频？

How to autoplay audio when the countdown timer is finished?

javascript

html5-audio