现代浏览器需同时设置 autoplay 和 muted 才能自动播放音频；source 标签须按 mp3→ogg 顺序并显式声明 type；preload 推荐 metadata；controls 样式不统一，定制需注意 ios touchstart 和音量限制。
audio 标签的 autoplay 和 muted 必须同时设置才能在 Chrome/Firefox/Safari 自动播放
现代浏览器（Chrome 66+、Firefox 66+、Safari 13.1+）默认禁止有声视频/音频自动播放，仅静音状态下允许 autoplay 生效。单独写 autoplay 或 autoplay="autoplay" 都无效。
实操建议：
- 必须显式添加
muted属性： - 不要依赖
volume="0"或 JS 动态设音量——这些无法绕过 autoplay 策略 - 移动端 iOS Safari 还要求用户至少触发一次手势（如点击）后，后续的
play()才能解除静音并恢复声音，这是硬性限制
用多个 source 标签覆盖不同编码格式，但顺序不能错
不同浏览器支持的音频编码差异大：audio/mp3（Chrome/Firefox/Safari 全支持），audio/ogg（Firefox/Chrome 支持，Safari 不支持），audio/wav（兼容性差，体积大，不推荐）。
实操建议：
- 优先把
.mp3放在第一个source，确保绝大多数环境兜底 - 第二个可加
.ogg（如需 Firefox 旧版本兼容），但注意：Android Hybrid WebView（如华为/联想机型）只读第一个source，放错顺序会导致直接失败 - 务必写
type属性，避免浏览器下载错误格式再报错；例如：<source src="a.mp3" type="audio/mpeg"></source> - 不要省略
type仅靠后缀判断——某些 CDN 或代理可能改 content-type，导致 fallback 失效
preload 属性影响首屏加载行为，auto 在移动网络下反而拖慢体验
preload 控制媒体元数据和主体内容的预加载策略，但它不是“越早加载越好”。尤其在 3G/4G 或弱网环境下，preload="auto" 会强制下载完整音频，造成带宽浪费和首屏阻塞。
实操建议：
- 默认用
preload="metadata"：只取时长、尺寸等基本信息，足够渲染 controls 和时间轴 - 明确需要秒开（如语音播报类应用），且资源小（≤200KB）、CDN 加速到位，才考虑
preload="auto" - 完全不想预加载（如播客列表页的非首项），用
preload="none"，但注意：首次点击播放会有明显延迟 - 不要在
autoplay场景下误设preload="none"——它会和 autoplay 冲突，部分 Android WebView 直接拒绝播放
controls 样式不可靠，自定义 UI 前先确认是否真需要
原生 controls 在不同系统表现差异极大：iOS 上是深色圆角控件，Android Chrome 是扁平化 Material 风格，桌面 Safari 则带阴影和动画。想统一外观？基本做不到。
实操建议：
- 如果只需基础功能（播放/暂停/进度条/音量），保留
controls最省事、最稳定 - 若必须定制 UI，禁用
controls后用 JS 操作play()、pause()、currentTime、volume，但要注意：volume在 iOS Safari 中被锁定为 1，无法 JS 调节 - 自定义进度条需监听
timeupdate+loadeddata+canplay多个事件，否则拖动时易卡顿或跳变 - 别忽略 touchstart / click 双事件绑定——移动端必须响应
touchstart才能触发播放，仅绑click在 iOS 上会失效
preload 或 type，但在混合环境（PC + 安卓 WebView + iOS）里，漏掉一个就可能让音频在某类设备上彻底静默。真正麻烦的不是写法多，而是每个属性背后都绑着一堆平台特异性规则。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
