iPhone端通过JavaScript播放音频不打断后台音乐的技术问询

iOS Safari 网页音频默认采用独占式音频会话，调用原生 <audio> 元素的 play() 方法时会主动中断后台正在播放的其他音频，这是系统默认的音频策略限制。

可行实现方案 #

iOS 15 及以上版本的 Safari 已经支持混音能力，核心是通过 Web Audio API 调整音频会话属性，具体操作步骤如下：

• 优先使用 Web Audio API 替代原生 <audio> 元素播放音频，原生 <audio> 元素本身没有公开的混音配置入口，需要依赖 Web Audio 的全局会话配置生效。
• 所有音频初始化逻辑必须放在用户主动触发的交互事件回调（如 click、touchstart 事件）中执行，这是iOS Safari的强制限制，非用户交互触发的音频配置会被系统忽略。
• 初始化音频上下文时开启混音权限：

// 在用户交互回调内执行
const audioContext = new (window.AudioContext || window.webkitAudioContext)({
  latencyHint: 'interactive'
});
// 配置音频会话允许与其他应用音频混音
if (audioContext.webkitAudioSession) {
  audioContext.webkitAudioSession.category = 'playback';
  audioContext.webkitAudioSession.setActive(true, {
    mixWithOthers: true
  });
}

• 完成上述配置后，不管是通过 Web Audio API 加载播放音频，还是后续调用原生 <audio> 元素的 play() 方法，都不会中断后台正在播放的音乐，两类音频会自动混合输出。

同步播放校准方案 #

如果需要网页音频和后台音乐实现精准同步，可以通过 audioContext.currentTime 获取高精度的音频时间戳，校准你的音频播放进度，精度可以控制在10ms以内，满足绝大多数场景的同步需求。

注意事项 #

• 该方案仅支持 iOS 15 及以上版本的 Safari，更低版本的iOS没有开放网页端的混音配置接口，暂时没有可行的实现方案。
• 若使用原生 <audio> 元素，建议给标签添加 webkit-playsinline 属性，避免系统自动调用全屏播放器接管音频输出。

内容的提问来源于stack exchange，提问作者Rogier de Ruijter