audio标签离线播放必须通过http服务（如python3 -m http.server）运行，禁用file://协议；音频路径须用相对路径（如src="audio/intro.mp3"），标签必须声明type属性（如type="audio/mpeg"），并设置preload="metadata"以确保控件正常渲染。
audio标签离线播放必须用相对路径，不能用file://协议
直接双击HTML文件在浏览器中打开（即使用file://协议），绝大多数现代浏览器（Chrome ≥60、Firefox、Edge、Safari）会静默拒绝加载audio标签中的本地音频资源——即使文件和HTML在同一目录下。这不是路径写错了，而是安全策略拦截，控制台通常不报错，只显示“Failed to load resource”且Network面板无请求。
可行方案只有两个：
- 把整个项目放在本地HTTP服务下运行（如
python3 -m http.server 8000，然后访问http://localhost:8000） - 音频文件必须通过相对路径引用，例如
src="audio/intro.mp3"，而非src="./audio/intro.mp3"或绝对路径；./前缀在某些浏览器（尤其是Safari）下会导致离线失败 - 避免任何跨目录引用（如
../assets/sound.wav），部分浏览器对..解析不稳定
离线场景下必须带type属性，否则Safari跳过加载
当使用多个<source></source>提供MP3/OGG等格式回退时，Safari（包括iOS）若未看到type属性，会直接忽略该<source></source>，最终导致无可用音源、控件不渲染。这不是兼容性“建议”，而是离线环境下的硬性要求。
错误写法：<source src="sound.mp3"></source>
正确写法：<source src="sound.mp3" type="audio/mpeg"></source><source src="sound.ogg" type="audio/ogg"></source>
注意：type值必须与实际MIME类型严格匹配，MP3必须用audio/mpeg（不是audio/mp3），WAV用audio/wav，否则部分浏览器仍会跳过。
preload="metadata"是离线首屏加载的关键开关
离线环境没有网络重试机制，preload="auto"（默认值）会尝试加载整段音频，一旦文件稍大（>2MB）或路径微小偏差，就直接卡死：控件不出现、duration为NaN、play()静默失败。
应强制设为：<audio controls preload="metadata"></audio>
这样浏览器只请求音频头信息（时长、采样率等），不拉取主体数据，既保证控件立即渲染，又避免因文件缺失导致整个audio元素失效。实测在无网络时，loadedmetadata事件仍可正常触发，后续用户点击播放再按需加载——但注意：此时play()调用必须包裹在用户手势事件内（如click），否则被拦截。
离线调试要盯住Network面板的Status列，不是Console
离线问题90%出在资源未加载，但浏览器很少在Console报明文错误。真正有效的排查方式是打开开发者工具 → Network 面板 → 刷新页面 → 观察音频请求行的Status列：
- 显示
(failed) net::ERR_FILE_NOT_FOUND：路径错误或文件名大小写不符（Linux/macOS敏感） - 显示
0B且Status为空：file://协议被拦截，必须切HTTP服务 - 显示
200但响应体为空：服务器未配置正确Content-Type，需确保本地服务返回Content-Type: audio/mpeg
最易忽略的是：本地Python HTTP服务默认不识别.mp3后缀，需手动配置MIME类型，或改用live-server等专用静态服务工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
