Next.js新订单触发浏览器自动播放MP3遇Safari权限问题

问题原因 #

Safari严格执行浏览器自动播放政策，默认禁止无用户交互的音频自动播放，触发NotAllowedError，提示需用户先与文档交互或手动授予站点播放权限。

代码兼容方案 #

若无法依赖用户手动设置权限，可通过监听用户首次交互获取播放权限，后续即可实现自动播放：

// 预创建音频实例（不立即播放）
let audioInstance;

// 监听用户首次点击/触摸交互，初始化音频并获取播放权限
document.addEventListener('click', setupAudio, { once: true });

function setupAudio() {
  audioInstance = new Audio(newOrderRing);
  // 首次交互后播放一次，完成权限获取
  audioInstance.play().catch(error => {
    console.error('音频初始化失败:', error);
  });
}

// 后续需要自动播放时调用此函数
function triggerAutoPlay() {
  if (audioInstance) {
    audioInstance.currentTime = 0; // 重置到音频开头
    audioInstance.play().catch(error => {
      console.error('自动播放失败:', error);
    });
  } else {
    console.warn('请先点击页面以启用音频播放功能');
  }
}

手动开启Safari站点自动播放权限 #

若需要完全无需用户交互的自动播放，可引导用户按以下步骤设置：

• 打开Safari并访问目标站点
• 点击地址栏左侧的锁形图标，打开网站设置面板
• 在「自动播放」选项中，选择「允许所有自动播放」
• 刷新页面后，站点即可无交互自动播放音频

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