结论：用 标签，src 必填且须为有效相对路径或绝对 url，controls 建议添加，preload 推荐设为 "metadata"；关键音效需 js 主动 load() 并监听 canplaythrough；服务端必须支持 accept-ranges: bytes。
直接给结论：用 <audio></audio> 标签，src 必填，controls 建议加上，preload 别写 auto —— 大多数场景下，preload="metadata" 是最稳的选择。
preload="metadata" 为什么比 auto 更可靠
浏览器对 preload="auto" 几乎不认账：iOS Safari 完全忽略它；Chrome 在移动网络下默认降级为 metadata；Firefox 表现也不一致。而 preload="metadata" 明确告诉浏览器“只拉头部信息”，100–300ms 内就能触发 loadedmetadata 事件，进度条能立刻显示总时长，用户点播才真正下载主体。
- 适合带播放控件的页面（如课程音频列表、播客详情页）
- 避免大文件初始加载阻塞首屏，也省流量
- 前提是服务端响应头含
Accept-Ranges: bytes，否则浏览器被迫整文件下载
src 必须是有效 URL，且不能依赖本地路径
src 值必须是相对路径（如 "./sounds/notify.mp3"）或绝对 URL（如 "https://cdn.example.com/audio/intro.ogg"），绝不能是 "C:\music\alert.mp3" 这类本地文件系统路径 —— 浏览器会静默失败，控制台可能连错误都不报。
- 开发阶段用
http://localhost或https://服务访问，别双击 HTML 打开 - 路径大小写敏感，尤其部署到 Linux 服务器后容易 404
- URL 建议加时间戳防缓存：
src="alert.mp3?_t=20261021"
关键音效必须用 JS 主动 load()，不能只靠 preload 属性
像按钮点击音、表单提交提示音这类资源，preload 属性太被动。浏览器可能延迟加载、甚至跳过，尤其在 display: none 的元素上会静默失败。
- 创建
Audio实例后，显式调用load()方法 - 监听
canplaythrough而非loadedmetadata：前者表示缓冲足够、后续播放不会卡顿 - 示例：
const audio = new Audio('click.mp3');<br>audio.preload = 'none';<br>audio.src = 'click.mp3?cache-bust=' + Date.now();<br>audio.load();<br>audio.addEventListener('canplaythrough', () => { /* 可安全调用 play() */ });
真正难的不是写对标签，而是确认服务端支持 Range 请求 —— 没这个，所有预加载策略都失效。用 curl -I your-audio-url 看响应头，必须有 Accept-Ranges: bytes，否则再怎么设 preload="metadata"，浏览器也只能硬下整个文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
