Howler.js - AudioContext 不允许启动。 它必须在页面上的用户手势后恢复（或创建）

Question

我试图在特定时间结束后触发警报。 我正在使用 Howler.js 播放警报，但由于某种原因，它显示此错误： howler.js:2500 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. howler.js:2500 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. 我切换到 Howler 是因为当我尝试在 JavaScript 中使用 Audio() Web API 时出现类似的错误。

这是我的代码：

const { Howl, Howler } = require("howler");

let i;
let timer;
var alarm = new Howl({
  src: ["alarm.mp3"],
});
let playTimer = true;
const timerDisplay = document.getElementById("timerDisplay");

document.addEventListener("DOMContentLoaded", () => {
  i = 5;

  timer = setInterval(() => {
    if (playTimer == true) {
      if (i != 0) {
        timerDisplay.textContent = i;
        i--;
      }

      if (i == 0) {
        alarm.play();
        clearInterval(timer);
      }
    }
  }, 1000);
});

我不知道这是否有用，但只是为了让您知道，我使用 Parcel 作为我的捆绑器。 提前感谢您的任何回答。

Answer 1

正如@Kokodoko 在我的问题评论中所说，音频必须由某种形式的用户交互触发。 所以，我在我的 HTML 中添加了一个按钮并替换了

document.addEventListener("DOMContentLoaded", () => {})

和

startTimerBtn.addEventListener("click", () => {})

所以这是最终的代码：

const { Howl, Howler } = require("howler");

let i;
let timer;
var alarm = new Howl({
  src: ["alarm.mp3"],
});
let playTimer = true;
const timerDisplay = document.getElementById("timerDisplay");
const startTimerBtn = document.getElementById("startTimer");

startTimerBtn.addEventListener("click", () => {
  i = 5;

  timer = setInterval(() => {
    if (playTimer == true) {
      if (i != 0) {
        timerDisplay.textContent = i;
        i--;
      }

      if (i == 0) {
        alarm.play();
        clearInterval(timer);
      }
    }
  }, 1000);
});

虽然这不是我想要得到的解决方案，但它很适合我的需求。

此外，对于像我这样使用 Parcel.js 的其他人来说，还有一件小事。 万一你不知道，你必须把你的音频文件放在 Parcel 的 dist 目录中才能播放。 出于某种原因，它没有自动捆绑。