根本原因是浏览器在file://协议下主动屏蔽音视频加载，必须改用HTTP服务（如python3 -m http.server 8000）；同时需确保路径大小写准确、MIME类型正确（如audio/mpeg）、避免跨域重定向。
audio src 用 file:// 协议直接打开 HTML 就报网络错误
这不是代码写错了，是浏览器主动拒绝——Chrome、Firefox、Edge 在 file:// 协议下默认屏蔽所有音频/视频资源加载，Network 面板里会显示 net::ERR_FAILED 或空响应，连请求都发不出去。
根本原因：现代浏览器把 file:// 视为“无源上下文（opaque origin）”，不满足媒体自动播放和跨源资源加载的基本安全前提。
- 别双击 HTML 文件打开，哪怕路径全对、文件就在同目录，也必报错
- 本地开发必须起 HTTP 服务，最简方式是终端执行：
python3 -m http.server 8000，然后访问http://localhost:8000/your-page.html - VS Code 用户可装 Live Server 插件，右键“Open with Live Server”，它自动起
http://127.0.0.1:5500/服务 - Mac 用户若没装 Python3，可用：
npx http-server -p 8000（需先npm install -g http-server）
src 路径写相对地址却仍 404，检查三处大小写与层级
HTTP 协议区分大小写，而 Windows 文件系统不区分——你在 Win 上测试成功，一上 Linux 服务器就 404，大概率是路径里字母大小写不一致。
-
src="./audio/intro.MP3"和src="./audio/intro.mp3"是两个不同文件 - 子目录名也要核对：
./Audio/≠./audio/，尤其部署到 Nginx/Apache 后 - 路径开头不要漏掉
./或/：写成src="audio/intro.mp3"是相对当前 URL 而非 HTML 文件位置，极易错位 - 用开发者工具 Network 面板点开那个失败的音频请求，看 “Initiator” 列是否指向你的
<source></source>标签，确认是哪个src值被解析成了错误路径
服务器返回 200 但 still no sound？查 Content-Type 响应头
文件能下载、状态码是 200，但音频控件灰显或点不动，八成是服务器没返回正确的 MIME 类型。浏览器拿到 text/plain 或空 Content-Type，就当普通文本扔了，根本不进解码器。
- MP3 文件必须对应
audio/mpeg，不是audio/mp3（后者无效） - OGG 文件必须是
audio/ogg，且编码推荐 Vorbis（用ffprobe your.a.ogg确认输出含Audio: vorbis） - Apache 用户，在站点根目录加
.htaccess：AddType audio/mpeg .mp3、AddType audio/ogg .ogg - Nginx 用户，在
http{ }或server{ }块里补：types { audio/mpeg mp3; audio/ogg ogg; } - 本地用
python3 -m http.server默认不设 MIME，但它对 .mp3/.ogg 有内置映射，一般没问题；若异常，换http-server更稳
CORS 跨域报错但音频在同域名？警惕重定向导致协议/端口不一致
看着 src 是 https://example.com/sound.mp3，但控制台报 Cross-Origin Request Blocked，可能是因为服务器做了 302 重定向，跳到了另一个域名、HTTP 协议或不同端口，实际加载地址已跨域。
- 在 Network 面板里点开音频请求，看 “Headers” → “Response Headers”，找
Location字段，确认有没有跳转 - 常见陷阱：Nginx 配置了
return 301 https://$host$request_uri;，但前端用了 HTTP 加载，触发跳转后变成 HTTPS → HTTP 不允许降级，被拦截 - CDN 或对象存储（如 OSS、S3）常默认开启重定向，检查其控制台是否启用了“强制 HTTPS”或“移除 www”等规则
- 修复方式：要么关掉重定向，要么确保重定向目标与页面同源（协议+域名+端口全等），或者在音频服务器配置
Access-Control-Allow-Origin: *
跨协议加载的坑不在标签本身，而在你运行它的上下文——file:// 是死路，http:// 是起点，而真正的兼容性藏在大小写、MIME、重定向这些不起眼的细节里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
