audio标签不支持后台预缓存和真正无缝循环，需通过preload="auto"+隐藏元素、双实例轮换、mediasource api及ios专项适配等组合策略实现近似效果。
audio 标签本身不支持后台预缓存和真正无缝循环，这是 HTML5 原生限制。它没有提供底层缓冲控制、多缓冲区切换或音频时间线精确对齐能力。但可通过组合策略逼近“长音频后台预加载 + 低延迟循环衔接”效果，关键在规避浏览器自动暂停、利用 preload 和 play() 时机、配合 JavaScript 精确调度。
用 preload="auto" + hidden audio 实现后台预缓存
浏览器对 preload 的实际行为因 UA 而异，但可提高缓存概率：
- 创建一个
<audio preload="auto" style="display:none"></audio>元素，设置src指向长音频（如 MP3/WAV/OGG） - 不调用
play()，仅让浏览器自主开始下载并缓存（部分浏览器会在空闲时填充缓冲区） - 监听
canplaythrough事件，表示已缓存足够数据可连续播放（非绝对保证，但较可靠） - 注意：iOS Safari 默认忽略
preload，需用户首次交互后才允许后台加载；Android Chrome 较友好
用两个 audio 实例交替实现“视觉无缝”循环
单个 audio 的 loop=true 在长音频中易出现毫秒级停顿或跳帧，尤其网络波动或解码压力大时。双实例轮换可显著降低感知中断：
- 准备两个
<audio></audio>元素（A 和 B），相同src，均设preload="auto" - A 播放至末尾前约 200–500ms（通过
timeupdate监听currentTime判断），立即B.play()并B.currentTime = 0 - 同时
A.pause()，B 开始播放；下次循环同理切换回 A - 为减少切换毛刺，可在切换前
B.volume = 0，播放瞬间淡入（volume动画需 requestAnimationFrame 控制）
用 MediaSource API 实现可控流式缓冲（进阶方案）
若需真正后台持续预加载、自定义缓冲长度、精确循环点控制，应弃用简单 <audio src></audio>，改用 MediaSource：
- 创建
MediaSource对象，绑定到<audio></audio>的src - 用
fetch分块请求音频（如每 5s 一段），通过sourceBuffer.appendBuffer()注入 - 维护缓冲区长度（如始终保有 30s 数据），当播放头接近末尾时提前追加新数据
- 循环时只需重置
currentTime并确保首段数据已在 buffer 中——无网络等待，无解码重启，真正无缝 - 注意：需服务端支持字节范围请求（
Accept-Ranges: bytes），且音频格式推荐使用 MP4（带 moov 头）或 WebM
绕过 iOS 自动暂停与后台限制的实用技巧
iOS 是最大障碍，必须主动应对：
- 首次播放必须由用户手势触发（
click/touchstart），之后可调用play()无需手势 - 进入后台时 iOS 会暂停所有音频，需监听
visibilitychange或pagehide，保存currentTime，唤醒后play().then(() => audio.currentTime = saved) - 避免使用
loop=true，iOS 对其支持不稳定；坚持用 JS 控制循环逻辑 - 考虑降级：iOS 上优先用 Web Audio API +
AudioBuffer（适合 ≤30s 音频），长音频仍走 MediaSource
不复杂但容易忽略：预缓存效果高度依赖网络环境与浏览器策略，务必在真机（尤其 iOS）上实测缓冲进度与切换延迟。核心思路是“用 JS 接管控制权”，而非依赖原生属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
