当我们设置闹钟时，闹钟会通过javascript自动运行。无需按任何按钮

Question

我正在使用铃声数组。当用户设置闹钟时。同时，其闹钟内容（铃声、小时、分钟、闹钟名称等）存储在浏览器的本地存储中。 从本地存储中检索内容（铃声、小时、分钟、闹钟名称等）。 通过铃声名称搜索所需铃声的路径。 所需铃声的路径已添加到

new Audio()

函数中。

const ringsobj = {
    battle: "./rings/gun-battle-long-34065.mp3",
    beep: "./rings/alarm-clock-beep-close-perspective-7092.mp3",
    short: "./rings/alarm-clock-short-6402.mp3",
}
    for (const localnum of localstorage) {
for (const ring in ringsobj) {
             if (ring === localnum.ringtones) {
                 yourringtone = new Audio(ringsobj[ring]);
                 ringtone = true;
             }
         }
}

创建了一个播放铃声的函数。

function playRingtones() {
     console.log("Alarm data:", yourringtone);
     yourringtone.play();
}

案例1： 当到达闹钟时间时执行此功能。

setTimeout(() => {
         console.log("Run the timeout!");
         playRingtones();
     }, 5000);

案例2： 当到达闹钟时间时执行此功能。

setTimeout(() => {
         console.log("Run the timeout!");
     clocksection.click();
         playRingtones();
     }, 5000);

     clocksection.addEventListener("click", () => {
         console.log("Click on Clocksection!");
     });

在这两种情况下都会出现此错误。 DOMException：play() 失败，因为用户没有先与文档交互。

当从其他页面移动到此页面时，警报就会响起。 但如果用户必须在警报之前与文档进行交互，那么警报有什么用。

这个函数就是用来解决这个问题的。

playRingtones();

但它没有返回预期的结果。

Answer 1

浏览器对“自动播放”音频或视频内容有限制，因为它可能会给用户带来意想不到的体验。浏览器需要某种用户交互。 此外，如果用户没有执行任何操作，您必须将音频默认设置为

静音

。 另一种但不太出色的方法可能是使用

Notifications Web API 它将在特定事件上触发 浏览器通知。这可能不是您正在寻找的，但这是我们能做的最好的事情（不幸的是）。