react自动播放音频错误修复play() failed because the user didn‘t interact with the document first.

错误信息App.js:76 Uncaught (in promise) NotAllowedError: play() failed because the user didn’t interact with the document first.

浏览器拦截针对自动播放音频时的默认拦截行为

需求是chorme浏览器前端开发的时候，想自动播放音频报错

为什么会出现这个问题？

这个错误是由于浏览器的自动播放策略引起的。现代浏览器（如 Chrome）会阻止页面自动播放音频或视频，尤其是在没有用户交互的情况下。这个策略旨在改善用户体验，防止网站在没有用户同意的情况下自动播放媒体内容。

解决方法

1. 添加muted属性muted是静音的效果

 <audio ref={audioRef} controls preload="auto" muted onEnded={handleAudioEnd} style={{ display: 'none' }} >
          <source src='./音频.mp3' />
  </audio>

2. 设置浏览器权限打开声音权限
   
3. 在生命周期的钩子函数中添加逻辑代码

先设置静音，等加载完成以后再开启播放

  const audioRef = useRef(null);  // 用于控制音频播放的ref
   useEffect(() => {
    if (audioRef.current) {
        // 设置音频静音，浏览器允许自动播放
        audioRef.current.play().then(() => {
          // 自动播放成功后取消静音
          audioRef.current.muted = false;
        }).catch((error) => {
          console.log("自动播放失败", error);
        });
      }
    }, [])