出现错误 - Uncaught (in promise) DOMException: play() failed 因为用户没有先与文档交互

Posted 2023-05-07

【中文标题】出现错误 - Uncaught (in promise) DOMException: play() failed 因为用户没有先与文档交互

【英文标题】：getting error - Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first

【发布时间】：2019-03-28 13:13:29

【问题描述】：

我想播放音频作为警报，但我收到类似“Uncaught (in promise) DOMException: play() failed 因为用户没有先与文档交互。

html 代码：

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

javascript 代码：

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

【参考方案1】：

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

在以下情况下允许自动播放声音： 用户与域进行了交互（单击、点击等）。 在桌面上，用户的媒体参与指数阈值已被超过，这意味着用户之前播放过有声视频。 在移动设备上，用户已[将网站添加到他们的主屏幕]。

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

【讨论】：

@TamaghnaBanerjee 我不明白怎么做？这是在问题中：“未捕获（承诺）DOMException：播放（）失败，因为用户没有首先与文档交互”，包含在我的回答中：如果：用户已与域交互，则允许自动播放声音（点击、轻敲等）等等。发生错误的原因很清楚：除非满足要求，否则您无法立即播放音乐。 （至少在 chrome 中）

我得到了答案。谢谢。