React页面渲染时Audio无法自动播放问题咨询

热重载可正常播放的原因 #

这是浏览器自动播放策略和开发环境热重载机制共同导致的：

• 主流浏览器（Chrome、Firefox、Edge等）均有强制媒体自动播放限制规则：页面必须获得至少一次用户主动交互（点击、触摸、键盘输入等）后，才能调用音频/视频的play()方法，该规则用于避免页面未经用户同意播放扰民的广告音频。
• 开发环境的热重载属于页面增量更新，不会销毁整个文档的上下文状态，你在修改代码前已经和页面产生过交互操作，这个交互授权状态在热重载后会被保留，因此play()调用不会被拦截。
• 手动刷新页面、首次打开部署后的站点时，会加载全新的文档上下文，没有任何用户交互记录，因此浏览器会直接拦截play()调用，抛出对应的DOMException。

实现音频自动播放的可行方案 #

按兼容性从高到低排序：

方案一：引导用户主动交互触发（100%兼容，官方推荐） #

新增交互入口让用户主动触发播放，完全符合浏览器策略，不会出现兼容问题，示例代码如下：

class Audio extends Component {
  state = {
    isUserInteracted: false
  }
  randomTrack(){
        // 原有逻辑
  }
  handlePlay = () => {
    this.setState({isUserInteracted: true})
  }
  componentDidUpdate(prevProps, prevState) {
    if(this.state.isUserInteracted && !prevState.isUserInteracted) {
      const audioEl = document.querySelector(".audio-element")
      // play返回Promise，需加catch捕获异常
      audioEl.play().catch(err => console.log('播放失败：', err))
    }
  }
  render() {
    if(!this.state.isUserInteracted) {
      return <button onClick={this.handlePlay}>点击播放背景音乐</button>
    }
    const trackname = this.randomTrack();
    return (
      <div>
        <audio className="audio-element" loop>
          <source src={trackname} />
        </audio>
      </div>
    )
  }
}
export default Audio;

方案二：静音自动播放 #

浏览器允许页面加载后直接静音播放媒体，你可以给audio标签添加autoPlay和muted属性，后续再引导用户点击取消静音即可：

<audio className="audio-element" autoPlay muted loop>
  <source src={trackname} />
</audio>

方案三：依赖用户白名单授权 #

如果你的站点是用户常用站点，用户手动将你的域名加入了浏览器的自动播放白名单，或者用户将站点添加为桌面端PWA，这种情况下也可以实现非静音自动播放，但该逻辑依赖用户的主动设置，无法覆盖所有访问用户。

内容的提问来源于stack exchange，提问作者Liunai