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

Answer 2

只需在HTML中添加muted属性：

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

在JS中，只要播放音频就取消静音。

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

我没有测试此代码，但我认为，根据新政策，它应该能很好地工作。

您可以从此处获取自动播放政策的详细信息： https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

收到错误-未捕获（承诺）的DOMException：play（）失败，因为用户未首先与文档进行交互

2 个答案: