调用audio.play()时HTML Audio中断iOS音乐播放器的解决方案咨询

核心原理 #

• iOS系统对HTML <audio> 标签的默认音频会话策略是独占音频通道，只要调用audio.play()就会强制中断所有后台正在播放的系统音乐，且播放结束后不会主动恢复后台播放。
• Web Audio API支持自定义音频会话的混播策略，配置为可混播模式后就不会抢占独占音频通道，可实现网页音频播放同时后台音乐正常播放，或是网页音频播放结束后后台音乐自动恢复。

具体实现步骤 #

步骤1：初始化Web Audio上下文并配置混播属性 #

iOS 14.5及以上版本的Web Audio新增了音频会话配置参数，直接设置允许混播即可，所有初始化操作必须在用户主动交互事件（比如点击、触摸事件）中执行，否则会被iOS的自动播放限制拦截。

// 必须放在click、tap等用户主动触发的事件回调内执行
const audioContext = new (window.AudioContext || window.webkitAudioContext)({
  // 核心配置：设置音频会话类别为环境音模式，允许和其他后台音频混播
  category: 'ambient',
  // 可选配置：如果需要网页音频播放时压低后台音乐音量，可添加以下参数
  categoryOptions: ['mixWithOthers', 'duckOthers']
});

兼容iOS 14.5以下旧版本：初始化上下文后需要额外调用await audioContext.resume()手动激活上下文，再执行后续加载、播放操作。

步骤2：加载并解码音频文件 #

将需要播放的音频资源加载为ArrayBuffer后解码为Web Audio可识别的音频数据：

async function loadAudioFile(url) {
  const res = await fetch(url);
  const audioBuffer = await audioContext.decodeAudioData(await res.arrayBuffer());
  return audioBuffer;
}

步骤3：播放音频 #

function playWebAudio(audioBuffer) {
  // 创建音频源节点
  const audioSource = audioContext.createBufferSource();
  audioSource.buffer = audioBuffer;
  // 连接到音频输出设备
  audioSource.connect(audioContext.destination);
  // 0表示立即播放
  audioSource.start(0);
  
  // 监听播放结束事件
  audioSource.onended = () => {
    // 无需额外操作，后台音乐本身不会被中断，若配置了duckOthers参数会自动恢复后台音乐原有音量
  };
}

必须使用HTML

如果业务场景无法完全切换为Web Audio API，可采用折中方案：调用audio.play()之前，先通过Web Audio API按上述步骤短暂激活混播模式，再触发audio标签的播放，大部分场景下也能实现不中断后台音乐的效果。

注意事项 #

• 不要在页面加载完成后自动初始化音频相关逻辑，必须等待用户第一次主动交互后再执行，否则会被iOS判定为自动播放被拦截。
• 尽量不要同时混用<audio>标签的play()方法和Web Audio API的播放逻辑，避免出现音频会话策略冲突。

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