audio标签需用source多格式兜底并正确声明type，autoplay须绑定用户手势触发，preload推荐metadata，服务器Content-Type必须匹配type值。
现代浏览器已原生支持音频播放，audio 标签是唯一需要的 HTML 元素，无需 Flash 或第三方库。但直接写 <audio src="a.mp3"></audio> 很可能在 Safari 或旧版 IE 中静音、卡住甚至不显示控件——关键不在“能不能放”，而在“怎么放才稳”。
audio 标签必须用 <source> 多格式兜底
单靠一个 src 属性无法覆盖所有浏览器。IE9+ 只认 MP3，Safari 不支持 OGG，Firefox 对 WAV 支持有限。硬编码单一格式等于主动放弃部分用户。
- 必须用
<source>列出至少两种格式，按兼容性从高到低排序：MP3 放第一个（全主流浏览器都支持），OGG 或 WAV 放第二位 -
type属性不能省：type="audio/mpeg"对应 MP3，type="audio/ogg"对应 OGG，type="audio/wav"对应 WAV；类型写错会导致浏览器跳过该源 - 不要依赖文件扩展名自动推断 MIME 类型——服务器未正确配置时，
type缺失会让 Chrome 拒绝加载
正确写法示例：
<audio controls> <source src="song.mp3" type="audio/mpeg"> <source src="song.ogg" type="audio/ogg"> 您的浏览器不支持 audio 元素。 </audio>
autoplay 在 Chrome/Firefox/Safari 中默认被禁用
即使写了 autoplay 属性，现代桌面和移动端浏览器几乎都要求用户有“交互行为”（如点击）后才能触发播放。这是防骚扰策略，不是 bug。
- 纯靠
autoplay+muted有时能绕过限制（尤其在移动 Safari），但不可靠；iOS Safari 仍可能拒绝自动播放，哪怕静音 - 如果业务强依赖自动播放（如语音导览），必须绑定用户手势：比如监听
click或touchstart，在回调里调用audio.play() -
play()方法会返回 Promise，失败时需捕获catch并降级处理（例如显示“点击开始播放”按钮）
preload="metadata" 是性能与体验的平衡点
preload 控制页面加载时是否下载音频。设为 auto 可能提前拉取整段音频，浪费带宽；设为 none 则用户点播放时明显卡顿。
-
preload="metadata"只请求文件头信息（时长、采样率等），足够渲染进度条、显示总时长，又不加载实际音频数据 - 对长音频（>5MB）或弱网环境，这是最实用的默认值
- 服务器若不支持 HTTP Range 请求，
metadata模式可能退化为加载整个文件——需检查响应头是否有Accept-Ranges: bytes
controls 属性缺失时，JS 控制容易失效
去掉 controls 属性后，audio 元素变成“无界面黑盒”。此时即使调用 play()，部分浏览器（特别是 Safari）会拒绝执行，除非之前已通过用户手势触发过一次播放。
- 隐藏原生控件不等于能自由接管——建议用 CSS 覆盖样式（如
audio::-webkit-media-controls），而非移除controls - 自定义 UI 必须确保首次播放由真实用户事件触发，且后续
play()/pause()调用紧接在该事件链内 - 注意 iOS Safari 的特殊限制：
play()必须在touchend后立即调用，延迟超过 1 秒会被忽略
最常被忽略的是服务器配置——type 写对了，但服务器返回的 Content-Type 错误（比如 MP3 返回 text/plain），浏览器照样拒播。上线前务必用 curl 或 DevTools 的 Network 面板确认响应头中的 Content-Type 是否匹配 <source> 的 type 值。
