audio标签只写src属性90%播不出，因浏览器不解析文件头，仅依赖Content-Type匹配解码器；若服务器返回application/octet-stream，Safari直接跳过且无报错，必须用<source>显式声明type如audio/mpeg才有效。
audio标签只写src属性为什么90%情况下播不出
因为浏览器根本不解析文件头，只靠HTTP响应头的Content-Type匹配解码器。你写src="bg.mp3"，但服务器返回Content-Type: application/octet-stream，Chrome可能碰巧播，Safari直接跳过、不触发canplay、控制台也不报错——它就当没这回事。
实操建议：
- 必须用
<source>替代外层src：哪怕只有一种格式，也写成<source src="bg.mp3" type="audio/mpeg">，否则 fallback 机制完全失效 - 所有
type值必须是 IANA 注册标准，比如audio/mpeg（不是audio/mp3），audio/ogg（不是audio/ogv） - 本地开发别用
file://协议：Chrome/Safari 会禁用play()调用，必须起本地服务（如python3 -m http.server）
多格式source顺序和type声明怎么写才真有效
浏览器按 DOM 顺序逐个尝试<source>，第一个canPlayType()返回"probably"的就加载，后面的全被忽略。顺序错了，兼容性再好的格式也没机会执行。
推荐组合（按优先级从高到低）：
立即学习“前端免费学习笔记（深入）”；
-
<source src="a.opus" type="audio/ogg; codecs=opus">—— Chrome/Firefox 体积小、解码快，企业内网常允许 -
<source src="a.m4a" type="audio/mp4; codecs=aac">—— iOS/Safari 原生首选，但必须确认内部编码是 AAC-LC（用ffprobe a.m4a查codec_name） -
<source src="a.mp3" type="audio/mpeg">—— 兜底项，覆盖 IE11、旧安卓 WebView -
<source src="a.wav" type="audio/wav">—— 仅短提示音用，Safari 对 PCM WAV 支持比 OGG 更稳
关键细节：
- 别省略
codecs参数：只写type="audio/mp4"，Safari 可能返回空字符串；type="audio/mp4; codecs=aac"才能通过Audio.canPlayType()验证 - Android Hybrid WebView（如华为/联想）只读第一个
<source>，放错顺序等于直接失败
服务端配置漏掉这三点，前端写得再对也白搭
前端type声明和服务端Content-Type响应头必须严格一致，否则浏览器连请求都不会发。GitHub Pages、Nginx 默认配置经常踩坑。
必须检查：
-
Content-Type响应头是否匹配：比如<source type="audio/ogg; codecs=opus">，服务端必须返回Content-Type: audio/ogg，返回application/octet-stream即失败 -
Accept-Ranges: bytes是否开启：Safari 拖动进度条卡住、duration为NaN，大概率是服务端不支持分片请求 - CORS 头是否设置：
Access-Control-Allow-Origin: *（或具体域名），跨域音频在 GitHub Pages 上会被静默拦截，连error事件都不触发
Nginx 示例配置片段：
add_type audio/ogg .opus;
add_type audio/mp4 .m4a;
add_type audio/mpeg .mp3;
add_type audio/wav .wav;
location ~ \.(opus|m4a|mp3|wav)$ {
add_header Access-Control-Allow-Origin *;
add_header Accept-Ranges bytes;
}
JS触发play()总失败？先确认是不是“非用户手势上下文”
现代浏览器（Chrome ≥66、Firefox ≥66、Safari ≥12.1）强制要求：所有play()必须由真实的用户交互（click、touchstart、keydown）同步触发。在load、canplay、setTimeout里调，iOS Safari 必然抛NotAllowedError。
安全写法：
- 按钮点击后立即调：
button.addEventListener('click', () => audio.play().catch(e => console.error(e))) - iOS 17+ 要求
touchstart监听器不能设passive: true，否则手势不被识别 - 不要依赖
autoplay+muted就想绕过：安卓部分机型可静音启动，但 iOS 仍需首次点击后才能恢复有声
容易被忽略的一点：即使自动播放成功，iOS Safari 仍限制volume最大为 1.0，且无法通过 JS 在首次交互前修改——音量控制必须放在用户点击之后做。
