iOS设备无法播放HTML Audio及WebRTC通话双向无声音问题求助

核心适配逻辑 #

iOS Safari 除了公开的音频播放必须由用户主动交互触发的限制外，对 WebRTC 媒体流和 audio 元素的绑定还有额外的规则校验，未命中授权规则就会出现无音频问题，按以下步骤修改即可解决：

1. 提前初始化固定 audio 元素 #

页面加载阶段就写入固定的音频播放标签，不要在匹配成功后动态创建，必须添加playsinline属性适配iOS移动端播放逻辑：

<!-- 提前写入DOM，不要动态生成 -->
<audio id="localAudio" playsinline autoplay></audio>
<audio id="remoteAudio" playsinline autoplay></audio>

2. 首次用户交互阶段提前占坑获取播放授权 #

在用户第一次主动点击操作（比如进入匹配大厅按钮、首次匹配按钮）的同步回调中调用所有audio元素的play()方法，此时哪怕没有媒体流也可以调用，只要在用户交互的事件栈内执行，就能拿到长期有效的音频播放授权，后续切换通话不需要重复申请：

document.querySelector('#matchButton').addEventListener('click', () => {
  // 必须放在同步逻辑中，不要放到await等异步操作之后执行
  document.querySelectorAll('audio').forEach(el => {
    el.play().catch(() => {
      // 无流时调用的报错可以直接忽略，只要触发过交互栈内的play调用就完成了授权
    })
  })
  // 再执行后续的匹配、peer连接逻辑
  startMatchProcess()
})

3. 媒体流绑定规则 #

• 不管是本地采集的MediaStream还是peer连接拿到的远端MediaStream，都直接赋值给提前创建的audio元素的srcObject属性，不要创建新的audio元素，也不要用src属性绑定blob地址的旧方案，该方案在iOS上对WebRTC流兼容性极差
• 流赋值操作不要放在非交互触发的异步回调最深处，拿到流后直接赋值即可，不需要额外调用play()，之前已经拿到的授权依然生效

// 本地流绑定示例
const localStream = await navigator.mediaDevices.getUserMedia({audio: true, video: false})
document.querySelector('#localAudio').srcObject = localStream

// 远端流绑定示例
peerConnection.on('stream', (remoteStream) => {
  document.querySelector('#remoteAudio').srcObject = remoteStream
})

4. 边界问题排查 #

• 调用getUserMedia时必须明确指定audio: true，不要省略音频权限配置，iOS对权限申请字段的校验比桌面浏览器严格
• 不要给远端音频元素设置muted属性，本地音频如果不需要外放可以单独设置静音，不影响采集逻辑
• 切换通话对象时只需要更新对应audio的srcObject即可，不需要重新走授权逻辑

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