audio元素fallback行为因浏览器而异：chrome/firefox按source顺序尝试，safari可能卡住；应包裹多个source并按mp3→ogg→wav排序，用js动态插入source并调用load()，配合canplaythrough前监听error及onstalled+计时器兜底。
audio 元素在不同浏览器中的 src 属性 fallback 行为不一致
Chrome 和 Firefox 会尝试按 source 标签顺序加载，遇到 404 或格式不支持就跳下一个；Safari（尤其是旧版）可能直接卡住或静音，不触发 error 事件。这不是 bug，是规范允许的“尽力而为”策略。
实操建议：
- 永远用
<audio></audio>包裹多个<source></source>，且按兼容性从高到低排序：先mp3（全平台支持），再ogg（Firefox/Chrome 偏好），最后wav（仅作兜底，体积大但 Safari 对其 error 反应更可靠） - 不要依赖
src属性直接赋值——它不会触发重新探测，只对首次加载生效；必须用 JS 动态插入<source></source>并调用load() - 在
canplaythrough之前监听error，但注意：Safari 可能对首个source的 404 不抛 error，需配合onstalled+ 计时器兜底
如何用 JavaScript 检测当前环境是否真正支持某音频格式
HTMLMediaElement.canPlayType() 返回 "probably"、"maybe" 或空字符串，但它只查 MIME 类型注册和容器支持，不验证解码器可用性（比如 macOS Safari 支持 mp3 容器但缺 AAC 解码器时仍返回 "probably"）。
实操建议：
- 别只信
canPlayType('audio/mp3')，要加真实探测：创建临时Audio实例，src设为短时长 base64 音频（如 100ms 空白 mp3），监听loadedmetadata和error - 缓存探测结果到
localStorage，避免每次页面重载都重复请求；键名用audio_support_${format}_${ua}防跨设备误判 - 对移动端 WebView（如微信内置浏览器），强制走
mp3路径并禁用ogg，因其内核常阉割 Ogg Vorbis 解码支持
autoplay 在 iOS 和新版 Android 上被静音拦截的绕过条件
iOS Safari 要求用户手势触发后才能解除静音，且 autoplay 属性本身无效；Android Chrome 85+ 同样要求用户交互后调用 play() 才能出声，否则 Promise reject 并报错 "NotAllowedError: play() can only be initiated by user gesture."
实操建议：
- 初始
<audio></audio>必须设muted属性，再用play().then(() => audio.muted = false)—— 这是唯一被 iOS 接受的“解除静音”路径 - 用户点击/触摸任意区域后，立即调用
play()并捕获 Promise reject；若失败，降级为显示“点击播放”按钮，而非静默失败 - 避免在
touchstart中直接play()，iOS 16.4+ 要求事件必须有默认行为（如滚动或焦点变化），推荐用click或带preventDefault()的touchend+setTimeout(..., 0)触发
音频加载失败时如何优雅 fallback 到文字提示或静音占位
单纯靠 error 事件不够：网络超时、CORS 拒绝、格式解析失败都会沉默，且不同浏览器触发时机差异大（Firefox 可能等 3s 才发 error，Chrome 可能立刻发）。
实操建议：
- 给每个
<source></source>设置独立id，在error回调里记录失败源，结合currentTime === 0 && networkState === HTMLMediaElement.NETWORK_NO_SOURCE判断是否彻底不可用 - 启动 8s 超时计时器（覆盖最长常见延迟），到期未进入
canplay或playing状态，就隐藏 audio 控件，显示<div class="audio-fallback">音频暂不可用</div> - 如果业务允许静音体验（如背景音效），可 fallback 到
new Audio().play()创建无 src 的实例，它不会报错，且能维持音频上下文激活状态，方便后续动态注入数据
最易被忽略的是：iOS 上 audio 元素一旦进入 error 状态，再次调用 load() 不会重置错误标志，必须先 src = '' 再重新注入 source 标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
