iPad Safari因音频节能策略会主动中断HTML5音频：页面失焦、后台、无交互30秒或低电量模式下自动静音/暂停，且无法JS恢复；必须用用户手势触发play()，推荐m4a格式并添加PWA配置以提升锁屏续播成功率。
iPad 上 HTML5 <audio></audio> 播放音乐频繁中断，不是代码写错了，而是 Safari 对自动播放、后台暂停和资源释放有强干预策略。
为什么 iPad Safari 会“主动断开”HTML5 音频
iPad（尤其是 iOS/iPadOS 16+）的 Safari 默认启用「音频节能策略」：一旦页面失去焦点、进入后台、或检测到用户未显式交互，<audio></audio> 就会被静音或暂停；即使调用 play()，也大概率抛出 NotAllowedError: The request is not allowed by the user agent。这不是 bug，是 Apple 强制的隐私与功耗控制。
- 页面刚加载时直接
play()→ 必失败（无用户手势上下文） - 用户切到其他 App 或锁屏 → 音频立即暂停，且无法通过 JS 恢复
- 长时间播放（>30 秒无交互）→ Safari 可能回收音频上下文，触发
ended或静音 - 使用
src动态赋值后立刻play()→ 多数情况被拦截，尤其 mp3/m4a 等非流式格式
<audio></audio> 的正确初始化姿势（防初始断连）
必须绑定在真实用户手势（tap/click）内，并确保媒体已加载就绪。绕过「自动播放策略」只有一条路：等用户点一下再播。
<button id="playBtn">▶ 播放音乐</button>
<audio id="player" preload="auto">
<source src="song.mp3" type="audio/mp3">
<source src="song.m4a" type="audio/mp4">
</audio>
<script>
const btn = document.getElementById('playBtn');
const audio = document.getElementById('player');
btn.addEventListener('click', async () => {
try {
// ⚠️ 必须在事件回调中调用，且不能延迟
await audio.play();
console.log('播放已启动');
} catch (err) {
console.warn('播放被拒绝：', err.name);
}
});
</script>
-
preload="auto"帮助提前加载元数据（但不保证全文件缓存） - 避免在
DOMContentLoaded或load事件里调play() - 不要用
ontouchstart替代click—— iPadOS 17+ 对 touch 事件的权限更严
后台播放与锁屏续播（iOS/iPadOS 限制级应对）
iPad Safari **不支持真正的后台音频播放**。所谓“续播”，仅限于：页面仍在前台但用户锁屏（需满足特定条件），且必须启用 Web Audio API + 手动维持上下文活跃。
立即学习“前端免费学习笔记（深入）”；
- 必须添加
<meta name="apple-mobile-web-app-capable" content="yes">并以「添加到主屏幕」方式打开（PWA 模式） - 需监听
visibilitychange，在document.hidden === false时尝试恢复播放（成功率低，仅作补救） - MP3 文件建议转为 AAC 编码的
.m4a，Safari 对其解码更稳定，减少因格式解析失败导致的中断 - 若需可靠后台播放，请放弃纯 HTML5 方案，改用 Cordova / Capacitor 封装 + 原生音频插件（如
cordova-plugin-media）
兼容性兜底：当 <audio></audio> 彻底失效时的降级方案
不是所有 iPad 用户都开着最新系统，也不是所有网络都能稳定加载音频。别只依赖一个 <source></source> 标签。
<audio id="player" controls preload="metadata"> <source src="song.m4a" type="audio/mp4"> <source src="song.ogg" type="audio/ogg"> <p>您的浏览器不支持音频播放。</p> </audio>
-
preload="metadata"比"auto"更省流量，且能更快触发canplay事件 - 务必提供至少两种格式：
.m4a（Safari 主力） +.ogg（Firefox/旧 Chrome 兜底） - 用
audio.networkState和audio.readyState监听加载状态，而不是只靠onerror—— 很多“断连”实际是NETWORK_NO_SOURCE或HAVE_METADATA卡住
最常被忽略的一点：iPad 上的「低电量模式」会强制禁用所有非关键音频解码，哪怕你写了完整逻辑，开关一开，play() 就静默失败。上线前务必在设置 > 电池里手动开/关测试两遍。
