audio的source顺序必须按浏览器解码器执行路径严格排列：Opus→AAC→MP3，Safari旧版不支持Opus故不能置末，WAV仅限短提示音且需单独处理，动态换源须pause-load-play并捕获错误。
audio 的 顺序不是“随便排”，而是浏览器解码器的执行路径
浏览器对 canPlayType()，一旦返回 "probably" 或 "maybe" 就立刻加载、停止后续尝试。顺序错一位，Safari 可能直接跳过所有源，duration 为 NaN，控件也不显示——连错误都不抛。
常见错误现象：
– 写了
– 把 .wav 放最前，Firefox 能播但用户得等几 MB 下完才出声
– 漏掉 type 属性，浏览器发起无效请求，Network 面板里一堆 404
-
-
-
- 删掉
type 属性写错等于没写，浏览器只认精确 MIME + codecs
type="audio/ogg" 和 type="audio/ogg; codecs=opus" 是两回事。前者在 Chrome 中对 .opus 文件可能返回空字符串，后者才稳定返回 "probably"。Safari 根本不认 audio/ogg，但对 audio/mp4; codecs=aac 响应积极。
实操验证方法：
打开控制台，运行 Audio.canPlayType('audio/ogg; codecs="opus"')，返回非空字符串才算通过
- MP3 必须用
type="audio/mpeg"，不是audio/mp3（浏览器直接忽略） - Opus 封装在 .ogg 容器里，写
type="audio/ogg; codecs=opus"；若封装在 .weba 里，用type="audio/weba"（但支持度低，不推荐） - .m4a 必须确认编码是 AAC-LC：
ffprobe file.m4a查codec_name是否为aac，不是aac_he或alac - 服务器返回的
Content-Type响应头必须和type值完全一致，比如audio/ogg; codecs=opus对应Content-Type: audio/ogg，不能是application/octet-stream
本地开发时顺序“看起来对”，上线就崩？检查三件事
你写的顺序没错，但浏览器根本没机会执行它——因为资源压根没加载进来。90% 的“顺序失效”其实卡在底层协议或服务配置上。
- 别双击 HTML 打开：
file://协议下 Chrome/Firefox 直接禁音频加载，Network 面板都看不到请求；必须用python3 -m http.server 8000或 VS Code Live Server - 路径写相对 URL，统一用
src="assets/audio/click.opus"，别混用./、../或绝对file://路径 - 服务器没配 MIME 类型：Apache 加
AddType audio/ogg .opus，Nginx 加add_type audio/ogg .opus;；否则浏览器把 Opus 当文本扔掉，canPlayType()永远返回空 - 检查 Network 面板里音频请求的 Response Headers，确认
Content-Type正确，且有Accept-Ranges: bytes（preload="metadata"依赖 Range 请求）
多个 audio 元素共存时，顺序策略要单独处理
一个页面有背景音乐、按钮音效、语音播报三个 ？别指望“全局手势授权”共享。iOS 不认这个逻辑，每个元素都得独立触发一次播放上下文。
- 对每个
都需绑定一次用户交互事件，例如：button.addEventListener('click', () => audio.play().catch(() => {}), { once: true }) - 不要复用同一个
元素切换src播不同音效：iOS 会重置播放状态，play()可能被拒绝 - 如果必须动态换源，先
pause()，再设src，再load()，最后play()；但依然要.catch()捕获NotAllowedError - 背景音乐类长音频建议用
preload="metadata"，音效类短音频可设preload="auto"，但前提是服务端支持 Range 请求
真正的兼容顺序不是写在 HTML 里的那几行
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
