HTML中audio标签src路径必须以HTML文件位置为基准解析相对路径，或以网站根目录为基准使用绝对路径（/开头）；file://协议下绝对路径失效，推荐用本地服务器调试。
音频文件路径写法直接决定能否播放
HTML里标签的src属性填错路径，浏览器就找不到文件——既不报错也不提示，只显示空白控件。关键不是“怎么写”，而是“从谁的角度找文件”。
相对路径：以HTML文件所在位置为起点
这是最常用也最容易出错的方式。浏览器读取src时，是按当前HTML文件在服务器或本地文件系统中的位置出发去找音频文件。
- 如果
index.html和music.mp3在同一目录：src="music.mp3" - 如果音频在子目录
audio/下：src="audio/bgm.mp3" - 如果HTML在
pages/里，音频在上层assets/中：src="../assets/sound.wav"（..表示返回上一级） - 错误示例：
src="C:\myproject\audio\clip.ogg"——本地绝对路径在网页中完全无效
绝对路径：以网站根目录为起点，开头带/
适用于项目结构较深、HTML可能被部署到不同子目录的场景。路径从域名后的第一个/算起，和HTML文件位置无关。
- 假设站点域名为
https://example.com，音频放在/static/audio/intro.mp3，则写：src="/static/audio/intro.mp3" - 注意：
/开头即代表根目录，不是“当前盘符”或“当前项目根目录”——开发时用本地文件协议（file://）打开HTML，这种写法会失效 - 常见误用：
src="static/audio/track.mp3"（漏掉开头/）→ 变成相对路径；src="//cdn.example.com/audio.mp3"（协议相对URL）→ 依赖当前页面协议，HTTPS页加载HTTP资源会被拦截
开发阶段路径调试技巧
Chrome开发者工具的Network面板能立刻告诉你浏览器实际请求了哪个URL，以及是否404。比猜路径高效得多。
- 右键音频控件 → “检查” → 看
标签的src值是否符合预期 - 刷新页面后切到Network → 筛选
Media或输入文件名 → 查看请求状态码和Preview - 本地双击HTML打开时（
file://协议），相对路径可用，但/开头的绝对路径会指向本机系统根目录（如file:///audio.mp3），必然失败 - VS Code中安装“Live Server”插件启动本地服务（
http://127.0.0.1:5500），此时/开头的绝对路径才真正生效
路径问题本质是资源定位逻辑，不是语法问题。很多人反复改src却忽略“HTML在哪运行”这个前提——静态文件服务器、本地双击、前端构建工具（Vite/Webpack）、CDN托管，每种环境对路径的解析规则都不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
