audio标签需合理设置controls、autoplay、loop、muted、preload五属性并搭配多格式source（mp3+ogg+wav/opus）才能兼容主流浏览器；js播放须捕获错误并监控networkstate/readystate。
audio 标签不是“加了就能播”，浏览器是否真能响，取决于属性组合是否合理、格式是否覆盖主流解码能力。直接上 MP3 一个源，在 Safari 或旧版 Firefox 里大概率静音或报错。
audio 标签的 5 个关键属性怎么设才不踩坑
这些属性看似简单，但组合错误会导致自动播放被拦截、控件不显示、首帧卡顿等问题：
-
controls：必须显式写，不写就无播放器界面；空值或controls=""都有效，但别写controls="false"—— 浏览器会当成真值处理 -
autoplay：现代浏览器（Chrome ≥70、Firefox ≥66、Safari ≥12.1）默认阻止有声自动播放；若必须用，必须搭配muted，否则play()会抛NotAllowedError -
loop：只对单次加载生效；若音频中途被 JS 修改src，loop 状态不会重置，需手动audio.loop = true -
muted：布尔属性，写muted即生效；设为false无效，JS 中要改回有声得用audio.muted = false -
preload：三个值影响明显：none最省流量但首播延迟高；metadata是推荐值（只读时长、采样率等，不下载音频体）；auto在移动端常被忽略，部分 Android WebView 直接降级为metadata
为什么多格式方案不能只靠 MP3 + OGG
MP3 + OGG 覆盖大部分桌面端，但漏掉两个关键场景：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- Safari（尤其是 iOS）对
audio/ogg支持不稳定，即使声明type="audio/ogg"，也可能跳过该source；实测中，audio/wav在 Safari 上兼容性反而更稳（尤其短提示音） - 某些企业内网环境禁用 MP3 解码（版权策略），只允许 WAV 或 OPUS；OPUS 虽未在原始资料中列出，但 Chrome/Firefox 已支持
audio/opus，文件体积比 MP3 小 30%～50% - 顺序很重要：
source按 DOM 顺序尝试，应把兼容性最广、解码最快（通常是 MP3）放第一位；WAV 放最后——它文件大、加载慢，仅作兜底
如何用 JavaScript 安全触发播放并捕获失败原因
用户点击后调用 play() 不等于一定能响，必须监听拒绝和加载错误：
- 用
audio.play().catch(e => { ... })捕获NotAllowedError（自动播放被拒）、NotSupportedError（格式不支持）、AbortError（网络中断） - 监听
error事件可发现具体哪个source失败：audio.addEventListener('error', () => console.log(audio.error?.code))，code === 4表示所有source均不可用 - 不要依赖
canplay判断是否就绪——它在元数据加载完就触发，音频体可能还没到；canplaythrough更可靠，但会显著延迟首次播放时机
真正麻烦的不是写对标签，而是当 audio 在某个设备上无声时，你得快速判断是格式问题、权限问题，还是 preload 策略导致资源根本没加载——这时候看 audio.networkState 和 audio.readyState 比猜更有用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
