获取错误 - 未捕获（承诺）DOMException: play() 失败，因为用户没有先与文档交互

Question

我想播放音频作为警报，但我收到类似“未捕获（承诺）DOMException: play() 失败，因为用户没有先与文档交互。

HTML代码：

<audio id="alarm" src="alarm.mp3"></audio>

JavaScript 代码：

function alarm() {
    var value = document.getElementById("rvoltage").innerHTML;
    if (value > 230) {
        document.getElementById('alarm').play();
    }
}

Answer 1

这是因为许多浏览器不允许 HTML 元素在页面加载时自动播放音乐和视频以节省带宽等。您可以创建一个按钮并在单击事件时播放音乐，或者绕过它来实现它在页面上的任何点击事件上播放。

如果满足以下条件，则允许自动播放声音： 用户已与域交互（单击、点击等）。在桌面上，用户的媒体参与度指数阈值已被突破，这意味着用户之前播放过有声视频。在移动设备上，用户已[将该网站添加到其主屏幕]。

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes