preload 属性设成 "auto" 为什么还是不预加载？
因为浏览器根本没买账——preload 是提示，不是指令。尤其在移动 Safari、Chrome（省电模式下）、Firefox（隐私模式）里，preload="auto" 常被直接忽略，连网络请求都不会发。
常见错误现象：network 面板里看不到音频资源请求；audio.readyState 长时间卡在 0（HAVE_NOTHING）；用户点播放时明显卡顿。
-
preload只有三个合法值："none"、"metadata"、"auto"，其他字符串（比如"true"或空字符串）等价于"none" - 移动端默认倾向用
"metadata"，哪怕你写了"auto"，浏览器也可能降级处理 - 如果页面启用了
document.hasStorageAccess()限制（如第三方上下文），或用户开启了“低数据模式”，preload会被强制禁用
怎么让音频真正在后台静默加载？
靠 preload 不够，得主动触发加载流程。核心思路是：用 audio.load() 强制初始化，配合 canplaythrough 或 loadeddata 判断就绪状态，但要注意时机和副作用。
- 不要在
DOMContentLoaded后立刻调load()，某些浏览器会因元素未挂载 DOM 而静默失败；确保audio已插入文档或至少display: none - 调用
load()后，监听canplaythrough（表示后续可连续播放，含缓冲判断）比loadedmetadata更可靠 - 如果音频 URL 带动态参数（如 token），注意缓存策略：
Cache-Control: no-cache会让预加载失效，建议用immutable+ 长期哈希名
示例：
立即学习“前端免费学习笔记（深入）”；
const audio = document.querySelector('audio');
audio.preload = 'none'; // 先关掉默认行为
audio.src = '/sound/alert.mp3?ts=' + Date.now();
audio.load(); // 主动触发加载
audio.addEventListener('canplaythrough', () => {
console.log('已缓冲足够，可随时播放');
});
为什么 preload="metadata" 有时也拿不到时长和尺寸？
因为服务器没返回 Content-Range 或 Accept-Ranges: bytes 响应头，浏览器无法通过 HEAD 请求快速探查媒体信息，只能下载部分数据块解析，而这个过程可能被中断或超时。
- 检查响应头：
curl -I https://example.com/audio.mp3，确认含Accept-Ranges: bytes - MP3 文件若无 ID3v2 尾部或 VBR 头信息，
duration可能为NaN，即使preload="metadata"成功 - 使用
audio.buffered.end(0)可验证是否真缓存了元数据——它只在元数据就绪后才有效，否则抛错
服务端和 CDN 配置哪些关键项能提升预加载成功率？
客户端再努力，服务端不配合照样白搭。重点不在“加功能”，而在“别拦着”。
- 必须支持
Range请求：Nginx 需开启range模块（默认开启），Apache 需启用mod_headers并设置Header set Accept-Ranges bytes - 避免对音频资源设置过严的
CSP策略，例如media-src 'self'要覆盖所有可能的子域名或 CDN 域 - CDN 缓存策略中，禁止对
.mp3、.ogg等后缀添加Cache-Control: no-store—— 这会导致每次预加载都走回源
容易被忽略的是：某些云存储（如 S3）上传时未显式设置 Content-Type: audio/mpeg，浏览器会当成 application/octet-stream，拒绝解析元数据。
