React使用new Audio实现通知音效遇用户未交互导致播放失败如何解决

该报错由现代浏览器的自动播放安全策略直接触发：浏览器会拦截所有未获得用户有效交互授权的音频自动播放行为，避免网页未经许可自动播放声音干扰用户。
现有代码在用户未和页面产生任何交互（点击、按键、触摸输入等）的场景下，临时创建Audio实例直接调用play()方法，完全不符合浏览器的交互校验规则，因此被拦截。

核心逻辑是提前完成音频资源加载、提前获取播放授权，不要在通知到达时临时创建音频对象请求播放权限：

• 全局统一维护单个Audio实例，禁止每次播放时重复新建对象
• 监听用户和页面的首次交互动作，在交互回调中提前完成音频播放权限解锁
• 通知到达时直接调用已完成授权的音频实例播放音效

实现代码参考：

// 全局存储单例音频对象
let notificationAudio = null;

// 页面初始化阶段调用，完成音频预加载和权限监听绑定
const initNotificationAudio = () => {
  // 提前创建音频实例，设置自动预加载完整资源
  notificationAudio = new Audio(`${process.env.PUBLIC_URL}/notificationsound.mp3`);
  notificationAudio.preload = 'auto';

  // 定义权限解锁逻辑
  const unlockAudioAccess = () => {
    if (!notificationAudio) return;
    // 以静音状态触发一次播放，获取浏览器播放授权（用户无感知）
    notificationAudio.muted = true;
    notificationAudio.play().then(() => {
      // 授权获取成功后恢复正常音量，重置播放进度
      notificationAudio.muted = false;
      notificationAudio.currentTime = 0;
      // 解锁完成后移除事件监听，避免重复执行
      document.removeEventListener('click', unlockAudioAccess);
      document.removeEventListener('keydown', unlockAudioAccess);
      document.removeEventListener('touchstart', unlockAudioAccess);
    }).catch(err => console.log('音频权限初始化失败', err));
  };

  // 绑定常见的用户交互触发事件
  document.addEventListener('click', unlockAudioAccess);
  document.addEventListener('keydown', unlockAudioAccess);
  document.addEventListener('touchstart', unlockAudioAccess);
}

// 通知到达时直接调用该方法播放音效
const triggerNotificationSound = () => {
  if (!notificationAudio) return;
  // 每次播放前重置进度，避免连续触发时声音叠加
  notificationAudio.currentTime = 0;
  notificationAudio.play().catch(err => console.log('通知音效播放失败', err));
}

• 音频权限解锁的核心是必须真实调用play()方法，仅提前加载资源、设置音量为0，是无法通过浏览器权限校验的
• 不要每次播放通知音效时重新执行new Audio()，新建的音频实例会重新触发权限校验逻辑，大概率再次出现相同报错
• 如果用户长时间未和页面交互（如后台挂起数小时），部分浏览器会收回已授权的播放权限，这种场景可以绑定系统通知的点击动作触发音效，用户点击通知的动作本身就属于有效交互。

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