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，因为当我尝试在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目录中，这样它才能播放。出于某种原因，它没有自动绑定。