Howler.js

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，因为当我尝试使用 Audio() Web API 在 JavaScript.

这是我的代码：

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 目录中，这样它才能播放。出于某种原因，它没有自动捆绑。

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

Howler.js - The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page

javascript

node.js