有没有办法在不使用 onClick 事件的情况下在 React 中自动播放音频？答案

【问题标题】：Is there a way to auto play audio in React without using an onClick event?有没有办法在不使用 onClick 事件的情况下在 React 中自动播放音频？
【发布时间】：2021-03-11 22:22:45
【问题描述】：

尝试在 componentDidMount 中播放音频时出现此错误。 'Uncaught (in promise) DOMException: play() failed 因为用户没有先与文档交互。'

componentDidMount() {
  document.getElementById("backgroundMusic").play();
}

<audio id="backgroundMusic">
<source src={url} type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

它适用于 onclick 事件。有没有办法在 React 中自动播放音频？我想我可以通过使用 onMouseOver 来触发音频开始，但理想情况下，音乐会在没有任何用户交互的情况下开始。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您收到的错误消息几乎是不言自明的。大多数现代浏览器会在用户与页面交互之前阻止音频/视频自动播放。他们这样做是为了避免对用户造成某些不良影响（例如，用户可能设置了最大音量，自动播放响亮的音频可能会让她感到惊讶/害怕）。

有certain hacks 可以尝试，但没有一个能真正保证跨浏览器工作。

【讨论】：

【解决方案2】：

Autoplay Policy Changes 不再允许在没有用户交互的情况下自动播放。

始终允许静音自动播放。

在以下情况下允许自动播放声音：

用户与域进行了交互（点击、点击等）。

在桌面设备上，用户的媒体参与指数阈值已被超过，这意味着用户之前播放过有声视频。

用户已将网站添加到移动设备的主屏幕或在桌面设备上安装了 PWA。

顶级框架可以将自动播放权限委托给其 iframe 以允许自动播放声音。

绕过这个的唯一方法是你的鼠标移动实现

【讨论】：