audio预加载应优先设preload="metadata"，仅加载头部信息（
设置 audio 标签的预加载策略，核心是用对 preload 值、配合服务端支持，并在必要时交由 JavaScript 主动控制——不是靠“多加载”来提速，而是靠“少而准”地加载关键信息，从而节省流量又不牺牲响应速度。
优先选 preload="metadata"
这是兼顾体验与流量最稳妥的选择：浏览器只请求音频头信息（时长、采样率、封面等），体积通常不到 10 KB，耗时短、兼容好，且能支撑进度条和播放按钮正常显示。用户点下播放键后，才开始下载实际音频数据。
- 写法：
- 避免写
preload="auto"或preload="true"：前者在 iOS Safari 中基本被忽略，后者非法，等同于none - 确保服务器返回
Accept-Ranges: bytes响应头，否则浏览器可能被迫下载前几 MB 才能解析出时长
明确不需要预加载时设为 preload="none"
适用于页面中大量音频但用户大概率只播少数几个的场景（如播客列表、评论语音附件）。它向浏览器明确建议“暂不获取数据”，可显著降低首屏带宽消耗。
- 注意：
none不等于“零请求”——Chrome 等桌面浏览器仍可能预取前几 KB（如 ID3 或 ADTS 帧）以优化首播，这是实现层面的合理权衡，非配置错误 - 若需彻底杜绝任何预取，可延迟创建 audio 元素，或用 JS 动态赋值
src后再调用load() - 适合搭配
controls属性使用，因为用户主动点击即触发加载，逻辑清晰
关键音效必须用 JS 主动加载
像提示音、按钮反馈音这类对延迟敏感的资源，不能只依赖 HTML 属性。浏览器默认策略偏保守，需 JS 显式介入，提前拉取并等待真正可用状态。
- 示例：
const audio = new Audio('alert.mp3');<br>audio.preload = 'none';<br>audio.src = 'alert.mp3?cache-bust=' + Date.now();<br>audio.load();<br>audio.addEventListener('canplaythrough', () => { /* 此时可随时低延迟播放 */ }); - 监听
canplaythrough而非loadedmetadata：前者表示缓冲已足够，播放不会中断，更贴近真实可用 - 元素必须已插入 DOM 或至少处于有效上下文（如用户已交互过），否则部分浏览器会静默失败
用 提前抢占资源通道
这是比 preload 属性更底层、更可靠的预加载方式，让浏览器在解析 HTML 阶段就发起请求，不受元素是否渲染、是否在视口影响。
- 写法：
- 仅支持同域资源；不自动解码，但能大幅缩短首次
play()的等待时间 - 推荐搭配 JS 使用：创建 Audio 实例后直接
play()，此时资源极大概率已在缓存中
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
