应监听error、loadedmetadata、canplaythrough事件组合并检查networkstate，根据audio.error?.code（如4）及readystate等状态显示具体原因+操作指引的友好提示，避免仅依赖fallback文本或静默失败。
audio 标签报错时怎么显示友好提示
浏览器不会主动弹框告诉你 audio 播不了，它只是静默失败：控件灰掉、duration 为 NaN、canplaythrough 死活不触发。所谓“错误提示”，其实是你得自己监听并接管失败路径。
- 别等用户点播放才判断——
error事件在第一个<source></source>加载失败时就触发，但只触发一次；若所有<source></source>都失败，audio.error?.code会是4（MEDIA_ERR_SRC_NOT_SUPPORTED） - 必须监听
error+loadedmetadata+canplaythrough三者组合：仅靠error会漏掉网络超时或 MIME 类型错（此时可能没 error，但 readyState 停在HAVE_NOTHING） - 友好提示不是“播放失败”，而是具体原因+可操作动作：比如“音频格式不支持，请换用 Chrome 或 Firefox 浏览器”或“网络未连接，请检查后重试”
怎么用 JS 捕获并替换默认的静默失败
原生 audio 标签没有“失败占位图”机制，得靠 JS 动态控制 UI 层。关键不是替换标签，而是接管状态流转：
- 给
audio加id="my-audio"，再加一个同级的<div id="audio-fallback"></div>作为提示容器 - 在
DOMContentLoaded后立即检查：if (audio.networkState === audio.NETWORK_NO_SOURCE)，直接显示兜底文案 - 监听
error时调audio.load()并重试下一个<source></source>（需提前把 source 列表存成数组，动态替换src和type） - 避免在
loadstart就显示加载中——iOS Safari 可能根本不会触发这个事件，反而造成假死感
为什么备用文案（Your browser does not support...）经常不显示
那行文字不是“兜底提示”，而是语义 fallback：只有所有 <source></source> 元素都解析完毕且全部被浏览器判定为不可解码时，才会渲染。但它不覆盖以下情况：
- src 路径 404（HTTP 404 返回，但 Content-Type 是 text/html）→ 浏览器认为“源存在但格式无效”，不触发 fallback 文本
- 服务器返回了音频文件，但 Content-Type 是
text/plain或空 → 浏览器连解码器都不调，readyState 卡在HAVE_NOTHING，fallback 也不显示 - iOS Safari 对
audio/ogg声称支持却跳过加载 → 它认为自己“能播”，只是实际没播，fallback 不触发
移动端真机调试时最常忽略的一点
本地双击打开 HTML 文件（file:// 协议）下，Chrome 和 Safari 直接禁用 audio 的全部加载逻辑，连 error 都不抛。这不是代码问题，是协议限制。必须起本地服务验证：
- Python 用户：
python3 -m http.server 8000 - Node 用户：
npx serve -p 8000 - VS Code 插件 Live Server 默认端口 5500，但注意它不设响应头 Content-Type，需额外配 MIME 映射
真正难的不是写提示文案，而是让提示出现在该出现的时候——它得比 canplay 更早感知失败，又不能误判临时卡顿。多数人卡在没区分“格式不支持”和“网络不可达”，结果提示写了，用户还是不知道该干嘛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
