iPhone Safari下HTML Audio播放无响应且不触发error/ended事件咨询

让onerror事件正常触发的优化方案 #

• 提前绑定所有事件监听器：给audio元素赋值src之前，就完成error、abort、suspend三类事件的监听，Safari下大量资源加载中断的场景会触发abort而非error，未绑定该事件就会收不到异常通知。同时不要在play()调用之后才绑定事件，部分同步抛出的异常会被遗漏。
• 捕获play方法的Promise异常：Safari中audio.play()返回Promise，播放权限限制、资源加载失败等场景不会触发元素的error事件，只会reject该Promise，必须主动捕获：

audio.play().catch(err => {
  // 此处处理播放失败逻辑，直接跳转下一首即可
  console.log('播放异常：', err)
})

• 避免直接赋值base64到src：Safari对长base64资源的解析异常捕获存在缺陷，先将base64转成Blob再生成ObjectURL赋值，能大幅提升异常触发率：

// base64转Blob工具函数
function base64ToAudioBlob(base64Str, mimeType = 'audio/mpeg') {
  const pureBase64 = base64Str.replace(/^data:audio\/[^;]+;base64,/, '')
  const byteArr = Uint8Array.from(atob(pureBase64), c => c.charCodeAt(0))
  return new Blob([byteArr], { type: mimeType })
}

// 使用示例
const audio = new Audio()
audio.onerror = () => console.log('资源加载错误')
audio.addEventListener('abort', () => console.log('加载被中断'))
audio.src = URL.createObjectURL(base64ToAudioBlob(你的base64音频数据))

• 不要复用audio实例：Safari的媒体资源池有复用次数限制，同一实例加载超过5次以上不同资源后可能出现静默卡死，每次播放新音频前销毁旧实例并新建，播放结束后主动释放资源：

// 播放结束后释放资源
audio.addEventListener('ended', () => {
  URL.revokeObjectURL(audio.src)
  audio.src = ''
  audio = null
})

其他排查思路 #

• 远程调试看底层日志：用Mac端Safari连接iPhone做远程调试，开启「媒体」面板的「记录媒体事件」选项，可以看到Safari内部未抛出到JS层的所有媒体异常，比如资源解析失败、媒体实例数量超限、内存不足回收资源等底层原因，直接定位问题。
• 检查音频实例数量：移动端Safari最多允许同时存在3-4个活跃的audio实例，如果你的sound pool是预创建audio实例存储，超过上限后新实例会被静默冻结，不会触发任何事件。优化方案是sound pool只存储base64或Blob原始数据，播放时才临时创建audio实例，全程保持最多1个活跃实例。
• 加超时兜底机制：每次触发playNwait时启动一个超时定时器，时长设置为当前音频的总时长+3秒，若超时后未收到ended/error/abort任何一个事件，直接判定为播放失败，销毁当前实例后跳转下一首，避免流程永久卡住。
• 统一音频编码格式：Safari对音频编码的兼容性要求远高于Chrome和安卓浏览器，可变比特率(VBR)的MP3、非44.1/48kHz采样率的音频都可能出现中途解析卡住的情况，将所有音频统一转成固定比特率(CBR)128kbps、44.1kHz的MP3格式再测试。

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