提问者:小点点

有没有一种方法可以在React中自动播放音频,而不使用onhtml事件?


尝试在componentDidMount中播放音频时出现此错误。”未捕获(promise中)DomeException: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。

    绕过此问题的唯一方法是鼠标移动实现