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

IT技术 javascript reactjs
2021-05-11 04:56:32

尝试在 componentDidMount 中播放音频时出现此错误。“未捕获(Promise)DOMException:play() 失败,因为用户没有先与文档交互。”

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 触发音频开始,但理想情况下,音乐将在没有任何用户交互的情况下开始。

2个回答

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

一些技巧可以尝试,但没有一个真的能保证跨浏览器工作。

自动播放策略更改不再允许在没有用户交互的情况下自动播放。

  • 始终允许静音自动播放。
  • 在以下情况下允许自动播放声音:
    • 用户已与域交互(单击、点击等)。
    • 在桌面上,用户的媒体参与指数阈值已被超过,这意味着用户之前曾播放过有声视频。
    • 用户已将该站点添加到其移动设备的主屏幕或在桌面设备上安装了 PWA。
  • 顶级框架可以将自动播放权限委托给它们的 iframe 以允许自动播放声音。

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