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

Question

我想在倒数计时器完成后播放声音。通常我会使用这种和平的代码来完成它

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

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

事情是...... Google 自己正在使用 HTML5 音频标签来做到这一点

如果您在 Google 搜索字段中输入倒计时器，它应该会向您显示在倒计时器完成后播放声音的小部件。

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

Answer 1

通过让您单击此“开始”按钮，他们要求用户做出手势，从而将其文档标记为用户批准播放音频。这意味着它们不受 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>