浏览器不播音频首要查network面板中音频请求的content-type是否为audio/mpeg等合法类型，若为text/plain、空值或配置错误（如apache/nginx未设mime），则浏览器拒绝解析；本地file://协议下chrome禁用加载，需启用http服务器；同时排查media_err_src_not_supported错误及自动播放策略拦截。
看 Network 面板里音频请求的 Content-Type 是否正确
浏览器不播音频，90% 不是因为代码写错，而是根本没把它当音频处理。关键线索藏在 Network 面板：找到音频请求，点开看 Response Headers 里的 Content-Type。要是它显示 text/plain、application/octet-stream 或者压根为空，那浏览器连解码器都不会调用——直接当普通文件扔掉。
常见错误配置：
- Apache 用户漏了
AddType audio/mpeg .mp3这类指令 - Nginx 的
types块没补audio/mpeg mp3; - 本地双击 HTML 文件走
file://协议，Chrome/Firefox 默认禁用音频加载，Content-Type根本不会发
验证方式：起个本地服务，比如 python3 -m http.server 8000，再刷新页面看 Content-Type 是否变成 audio/mpeg 或 audio/ogg。
检查控制台报错是 MEDIA_ERR_SRC_NOT_SUPPORTED（code: 4）
这个错误不是路径问题，也不是网络挂了，是浏览器打开文件后当场“判死刑”：所有 <source></source> 提供的格式它一个都解不了。它常被误读为“加载失败”，其实文件已完整下载，只是编码不兼容。
触发条件包括：
- 只写了一个
src="a.mp3"，没 fallback；Firefox/Safari 可能直接跳过 -
type="audio/mp3"写错，必须是audio/mpeg - Ogg 文件实际是 Opus 编码，但
type="audio/ogg"只认 Vorbis - MP3 是 VBR 或含 fltp（浮点）采样格式，Safari 拒绝解码
快速验证：用 ffprobe a.mp3 看输出里 Audio: mp3 (mp3), 44100 Hz, stereo, fltp 这一行 —— 出现 fltp 就大概率被 Safari 判死。
确认是否被自动播放策略拦截（The play() request was interrupted）
写了 autoplay muted 还没声音？不是 JS 写错了，是浏览器在等你“动手”。现代浏览器（含微信 iOS）要求首次有声或静音播放，都必须由用户手势触发，否则 play() 返回被 reject 的 Promise，控制台明文报 The play() request was interrupted。
典型踩坑点：
- 在
DOMContentLoaded或window.onload里直接调audio.play()—— 必失败 - 用
button.addEventListener('click', () => audio.play())但没加.catch(e => {})，错误被吞掉，以为没反应 - iOS Safari 要求元素在视口内、未被
display: none或opacity: 0遮挡，否则即使点过也静音
可靠写法：document.body.addEventListener('click', () => audio.play().catch(e => {}), { once: true });
用 canPlayType() 辅助判断但别依赖它
canPlayType() 返回值模糊，"probably" 不等于“一定能播”，"maybe" 更接近“我懒得验证”。它适合做粗筛，不能替代真实 fallback。
比如这段代码看似合理，实则危险：
if (audio.canPlayType('audio/ogg') === 'probably') {
audio.src = 'a.ogg';
} else {
audio.src = 'a.mp3';
}
问题在于：
- Firefox 可能返回
"probably"，但实际播到一半卡住（Vorbis 参数不匹配） - Safari 对
audio/ogg直接返回空字符串，但你没兜底逻辑，src就成空 - 动态切换
src会触发重新加载，打断已有状态，不如静态声明<source></source>让浏览器自己选
真正稳的做法：始终用至少两组 <source src="a.mp3" type="audio/mpeg"></source><source src="a.ogg" type="audio/ogg"></source>，让浏览器从上到下匹配第一个支持的。
Content-Type，再看 code: 4，最后确认交互触发逻辑，跳步容易漏掉真正病灶。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
