跨页面切换背景音频时sound2、sound3仅在iOS设备无法触发播放问题

问题产生原因 #

• iOS 平台的 WebKit 内核对音视频播放有严格的用户交互限制，每个独立的 <audio> 实例的首次播放必须由用户的物理交互操作（点击、触摸等事件）直接同步触发，异步上下文、间接触发的播放请求都会被系统拦截。你遇到的 sound1 可播放、sound2/sound3 无法播放，大概率是 sound1 的首次播放是在用户首次交互的同步回调中触发，完成了解锁，而 sound2、sound3 的首次播放没有直接绑定在用户交互的同步执行栈里，被系统拦截。
• 部分旧版本 iOS 还存在单音频实例限制，未提前解锁的多个音频实例无法同时/轮流播放。
• 你现有代码中仅对定义了 origvolume 属性的音频执行暂停重置逻辑，首次播放的音频不会触发这部分逻辑，也可能叠加导致状态异常。

可行解决方案 #

• 提前解锁所有音频：监听页面首次用户交互事件（如 touchstart、click），在事件回调的同步逻辑中依次触发所有三个音频的 play() 后立即执行 pause() 并重置 currentTime = 0，完成所有音频实例的系统解锁，后续切换播放就不会被拦截。示例代码如下：

// 页面首次交互时解锁所有音频
document.addEventListener('click', function unlockAudio() {
  $('audio').each(function() {
    this.play().then(() => {
      this.pause();
      this.currentTime = 0;
    }).catch(() => {});
  });
  // 事件只触发一次，解锁后移除监听
  document.removeEventListener('click', unlockAudio);
}, { once: true });

• 简化音频实现逻辑：废弃多 <audio> 标签方案，使用单个 <audio> 标签，切换音频时直接修改 src 属性再调用 play()，仅需要一次解锁就可以适配所有音频切换场景，兼容性更好，也更节省设备资源。
• 确保所有 play() 调用都在用户交互的同步执行上下文内，不要放在 setTimeout、接口请求回调、动画结束回调等异步逻辑中执行。

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