正确设置 audio 标签需三要素：type 属性必须准确（如 mp3 用 audio/mpeg）、preload 设为 metadata、自动播放须满足 muted+用户手势；否则 safari 等浏览器静默失败。
只写 <audio></audio> 标签 + 一个 MP3，大概率在 Safari 或旧版 Firefox 里不响，不是代码写错了，是浏览器根本没加载成功。
每个 <source></source> 必须带正确的 type 值
浏览器不会解析文件内容来判断格式，它只按 type 属性做 MIME 类型匹配。省略 type 或写错（比如 audio/mp3），iOS Safari 会直接跳过该 <source></source>，控制台可能静默失败，duration 为 NaN，canplay 事件也不触发。
实操建议：
-
MP3对应type="audio/mpeg"，不是audio/mp3 -
OGG对应type="audio/ogg" -
WAV对应type="audio/wav"；短提示音用它比 OGG 更稳，尤其在 Safari 上 -
OPUS可选，Chrome/Firefox 已支持audio/opus，体积比 MP3 小 30%～50%，适合内网或对带宽敏感场景
preload 设成 metadata 是最实用的起点
preload="auto" 在 iOS Safari 和多数 Android WebView 中被忽略，preload="none" 导致首播延迟高，而 preload="metadata" 只拉取头信息（时长、采样率等），100–300ms 内就能触发 loadedmetadata，进度条可显示、控件可点击，用户点下才下载音频体。
注意：
- 服务端响应头必须含
Accept-Ranges: bytes，否则浏览器可能被迫下载前几 MB 才能解析时长 - 别写
preload="true"—— 这是非法值，等同于none - 若需关键音效（如按钮点击声）零延迟，仅靠
preload不够，得用 JS 主动load()
自动播放必须满足静音 + 用户手势双重条件
现代浏览器（Chrome ≥70、Firefox ≥66、Safari ≥12.1）默认拦截有声自动播放。autoplay 单独写等于白写，autoplay muted 也只是“可能播”，iOS Safari 还额外要求页面已获得用户手势授权（比如用户曾点击过任意区域）。
实操建议：
- 放弃
autoplay+ 无muted的组合，它在任何主流环境下都不可靠 - 要静音自动播，必须同时写
autoplay muted，且确保后续没 JS 改写audio.muted = false或audio.volume = 1 - 如有声播放是刚需，唯一可靠路径是监听用户首次交互（如
document.addEventListener('click', ...)），再调用audio.play() - 所有
play()调用必须用.catch()捕获拒绝：常见错误包括NotAllowedError（手势缺失）、NotSupportedError（格式不支持）、AbortError（网络中断）
JS 控制播放前，先确认元素已挂载且状态可用
用 JS 创建 new Audio() 或操作 DOM 中的 <audio></audio>，如果元素还没挂载到 DOM（哪怕只是 display: none），load() 会静默失败；如果还没触发 canplaythrough 就设 currentTime，iOS WebKit 直接无视。
实操建议：
- 动态创建的
<audio></audio>，务必先document.body.appendChild(audio)（或插入到某容器），再调用load() - 监听
canplaythrough而非canplay：前者表示缓冲足够、后续播放不会卡顿，更贴近真实可用状态 - 不要依赖
canPlayType()判断格式支持 —— 返回"probably"不等于“一定能播”，静态多格式 fallback 更可靠 - 本地开发时用
python3 -m http.server启服务，file://协议下 Chrome 会禁用play()，连错误都不抛
兼容管理最难的不是写多少种格式，而是把 type 写对、把 preload 设稳、把用户手势和静音条件对齐 —— 这三处一错，其他全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
