mediaerror {code: 4}表示media_err_src_not_supported，即文件加载成功但浏览器无法解码，主因是mime类型未正确配置、格式不兼容或type属性错误，需检查network面板的content-type及多格式兜底。
音频不播，八成不是代码写错，而是
Network面板里音频请求返回404或200但Content-Type不对
这是最常被忽略的底层问题：浏览器根本没拿到音频，或者拿到了也不敢解码。别只盯着控制台有没有报错，直接开Network面板过滤media或audio，点开对应请求看两件事：
- 状态码是不是
200；如果不是，检查src路径是否相对于当前HTML文件——不是JS路径，也不是CSS路径 - 响应头
Content-Type是不是audio/mpeg（MP3）、audio/ogg（Ogg Vorbis）或audio/wav；如果是text/plain、application/octet-stream或空着，说明服务器没配MIME类型 - 本地双击打开HTML（
file://协议）时，Chrome、Edge会直接拒绝加载音频——必须起本地服务，比如python3 -m http.server
<source></source>的type属性写错或漏写
只写<audio src="a.mp3"></audio>等于放弃兼容性。Firefox可能跳过，iOS Safari可能卡在loading状态，且canplay事件都不触发。必须用<source></source>显式声明格式：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
type值必须严格匹配：MP3用audio/mpeg，不是audio/mp3；Ogg用audio/ogg，不是audio/ogv；WAV用audio/wav，不是audio/wave - Ogg文件得是Vorbis编码，不是Opus——用
ffprobe a.ogg确认输出含Audio: vorbis - 不要加
.wav作fallback：Chrome对IEEE Float编码WAV直接拒播，Firefox虽支持但体积大、首屏慢
autoplay不生效，但控制台没报错
这不是bug，是浏览器策略强制拦截。写了autoplay不代表能播，尤其带声音时：
- Chrome、Safari、Edge默认禁止无用户交互的有声自动播放；
play()调用会抛NotAllowedError - 想静音自动播？必须同时设
muted属性+volume=0，否则仍可能失败 - 别在
DOMContentLoaded或window.onload里调play()——大概率被拦；改用click、touchstart等用户手势回调中触发 - iOS Safari对
preload="auto"直接忽略，建议用preload="metadata"只加载时长和封面，减少首屏阻塞
MediaError code: 4 是什么信号
控制台出现MediaError {code: 4}，别急着改路径——这代表MEDIA_ERR_SRC_NOT_SUPPORTED，意思是“文件加载成功了，但浏览器解不了码”。它和404无关，是格式兜底失效的明确证据：
- 常见诱因：只提供MP3，但用户用Firefox（不原生支持MP3）；或Ogg文件实际是Opus编码，但
type写了audio/ogg - 验证方式：把同一音频文件拖进不同浏览器地址栏，看能否直接播放；不能播，就是编码或封装问题
- 修复路径：补上第二格式（MP3 + Ogg），确保
<source></source>顺序合理（浏览器按顺序试播，优先放最广泛支持的MP3）
真正麻烦的不是写不对，而是浏览器不吭声——没报错、没提示、控件灰着，就干等。排查时盯死Network里的响应头和状态码，type值一个字母都不能差，file://下务必起服务。这些点漏掉任意一个，audio标签就只是个空盒子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
