canPlayType()是唯一靠谱的运行时格式检测方式，返回""（不支持）、"maybe"（需实测）、"probably"（大概率能播）；须用合法MIME类型（如audio/mpeg而非audio/mp3），结合事件监听与fallback闭环处理。
用 canPlayType() 实测格式支持，不是查 UA
浏览器不认文件后缀，也不看 UA 字符串——canPlayType() 才是唯一靠谱的运行时判断方式。它返回 ""、"maybe" 或 "probably"，只有 "probably" 表示大概率能播，"maybe" 意味着“试了才知道”，"" 就是明确不支持。
常见错误：直接调 new Audio().canPlayType('audio/mp3') —— MIME 类型写错，audio/mp3 是非法值，必须用 audio/mpeg；audio/m4a 也无效，得写 audio/mp4。
实操建议：
- 创建临时
Audio元素，避免污染真实 DOM：const a = new Audio() - 按实际 fallback 顺序检测：
a.canPlayType('audio/mpeg')→a.canPlayType('audio/mp4')→a.canPlayType('audio/ogg') - Firefox 对
audio/mpeg的返回值可能为""（即使它能播 MP3），这时应 fallback 到audio元素自身是否存在 +canPlayType方法是否可用，再结合src加载结果综合判断 - 别在页面加载完成就立刻检测——某些浏览器（如旧版 Android WebView）需等
DOMContentLoaded后才能正确返回
为什么 canPlayType() 返回 "maybe" 还是播不了
"maybe" 不代表能播，只说明浏览器“理论上可能支持该 MIME 类型+编码组合”，但实际解码还取决于底层解码器是否启用、音频文件是否含不兼容编码（比如 Safari 拒绝 fltp 浮点 PCM 的 MP3）、甚至操作系统级限制（如 Linux 发行版禁用 MP3 解码器）。
立即学习“前端免费学习笔记（深入）”；
典型现象：ffprobe 显示 Stream #0:0: Audio: mp3 (mp3), 44100 Hz, stereo, fltp，Safari 就静默失败；或 Firefox 在 RHEL 系统里对 MP3 返回 ""，换 Ubuntu 就返回 "probably"。
实操建议：
- 用
ffprobe查真实编码，不依赖后缀；重点确认采样率（44.1kHz 最稳）、位深（16bit）、编码格式（MP3 应为mp3，非mp3float） - 对返回
"maybe"的格式，务必准备降级路径——比如 MP3 返回"maybe"，就立即尝试加载 OGG - 不要把
"maybe"当成功信号去绑定play()，它只是“可尝试”，不是“能保证”
检测结果只是快照，必须配合事件监听和 fallback 逻辑
canPlayType() 只告诉你“此刻这个浏览器 *可能* 支持”，但它不保证资源真能加载、网络没中断、用户没禁用音频、iOS 没拦截 play() 调用。真正的兼容性闭环得靠事件链补全。
常见断层：检测说支持 MP3，但 Network 面板里请求返回 404 或 Content-Type 是 text/plain；或者检测通过，但 iOS Safari 因未触发用户手势，play() 直接 reject。
实操建议：
- 每个
source必须带type属性，且与canPlayType()检测值一致；省略type会导致 Safari 直接跳过该源 - 监听
error事件：audio.addEventListener('error', () => { /* 切到下一个 source 或显示提示 */ }) - 监听
stalled和abort，它们比error更早暴露加载问题 - 对 iOS，必须绑定一次用户交互（如
click或touchstart）后再调play()，否则 Promise 一定 reject
服务器 MIME 类型配错，检测再准也没用
哪怕 canPlayType() 返回 "probably"，如果服务端返回的响应头里 Content-Type 是 text/plain、application/octet-stream 或压根没设，Chrome/Safari 就会拒绝解码——这不是兼容性问题，是配置问题。
本地双击 HTML 测试？Chrome 在 file:// 协议下直接禁用所有音频加载，连 canPlayType() 都可能返回空字符串，此时检测毫无意义。
实操建议：
- Apache 用户加：
AddType audio/mpeg .mp3；Nginx 在types块里补：audio/mpeg mp3; - 用 Network 面板确认音频请求的响应头含
Content-Type: audio/mpeg - 本地开发务必起 HTTP 服务：
python3 -m http.server 8000或 VS Code Live Server 插件 - 跨域音频还要服务端配
Access-Control-Allow-Origin: *和Access-Control-Allow-Headers: Range
真正难的不是写出能播的代码，而是让“播不了”这件事被及时发现、准确归因、平滑降级——canPlayType() 是起点，不是终点；MIME 类型是地基，不是装饰。
