不可行；直接写 src="music.mp3" 在本地双击 html 会因浏览器安全策略拒绝加载，需用 base64 内联或本地 http 服务。
audio 标签的 src 指向本地文件路径是否可行
直接写 src="music.mp3" 在本地双击 HTML 文件打开时，绝大多数浏览器（Chrome、Edge、Firefox）会因安全策略拒绝加载——报错类似 Not allowed to load local resource。这不是代码写错了，是浏览器主动拦截了 file:// 协议下的跨文件读取。只有通过本地 HTTP 服务（比如 python -m http.server）启动页面，src 才能正常解析相对路径。
离线可用的真正可行方案：base64 内联音频
把音频文件转成 base64 字符串，直接嵌入 src，完全不依赖外部文件路径，双击 HTML 即可播放：
- 用命令行快速编码（macOS/Linux）：
base64 -i alarm.mp3 | tr -d '\n' > audio.b64
- Windows 可用 PowerShell：
[Convert]::ToBase64String([IO.File]::ReadAllBytes("alarm.mp3"))
- 粘贴结果到
<audio src="data:audio/mpeg;base64,<%E4%BD%A0%E7%9A%84base64%E5%AD%97%E7%AC%A6%E4%B8%B2>" controls></audio>
注意 MIME 类型要匹配：MP3 用 audio/mpeg，WAV 用 audio/wav，Ogg 用 audio/ogg。类型错会导致静音或报错 Failed to load because no supported source was found。
base64 方案的代价和边界
单个音频不宜超过 2–3MB：过大会显著拖慢 HTML 加载，尤其在低配设备上；base64 编码后体积膨胀约 33%，原 2MB MP3 编码后接近 2.7MB。如果音频较长或需多个音效，建议放弃纯离线思路，改用轻量本地服务器——python3 -m http.server 8000 启动后访问 http://localhost:8000，就能用干净的相对路径 src="sound/beep.mp3"，且无兼容性问题。
autoplay 在离线场景下大概率失效
即使用了 base64，autoplay 属性在 Chrome/Firefox 中仍会被静音或阻止，除非用户已与页面有交互（如点击）。离线演示若依赖自动播放，必须加显式触发逻辑：
<audio id="bgm" src="data:audio/mpeg;base64,..."></audio><button onclick="document.getElementById('bgm').play()">播放</button>
别指望靠 autoplay muted 绕过——muted 对非视频类 audio 元素无效，且部分浏览器连 muted autoplay 都禁用。
src，完全不依赖外部文件路径，双击 HTML 即可播放：
- 用命令行快速编码（macOS/Linux）：
base64 -i alarm.mp3 | tr -d '\n' > audio.b64 - Windows 可用 PowerShell：
[Convert]::ToBase64String([IO.File]::ReadAllBytes("alarm.mp3")) - 粘贴结果到
<audio src="data:audio/mpeg;base64,<%E4%BD%A0%E7%9A%84base64%E5%AD%97%E7%AC%A6%E4%B8%B2>" controls></audio>
audio/mpeg，WAV 用 audio/wav，Ogg 用 audio/ogg。类型错会导致静音或报错 Failed to load because no supported source was found。
base64 方案的代价和边界
单个音频不宜超过 2–3MB：过大会显著拖慢 HTML 加载，尤其在低配设备上；base64 编码后体积膨胀约 33%，原 2MB MP3 编码后接近 2.7MB。如果音频较长或需多个音效，建议放弃纯离线思路，改用轻量本地服务器——python3 -m http.server 8000 启动后访问 http://localhost:8000，就能用干净的相对路径 src="sound/beep.mp3"，且无兼容性问题。
autoplay 在离线场景下大概率失效
即使用了 base64，autoplay 属性在 Chrome/Firefox 中仍会被静音或阻止，除非用户已与页面有交互（如点击）。离线演示若依赖自动播放，必须加显式触发逻辑：
<audio id="bgm" src="data:audio/mpeg;base64,..."></audio><button onclick="document.getElementById('bgm').play()">播放</button>
别指望靠 autoplay muted 绕过——muted 对非视频类 audio 元素无效，且部分浏览器连 muted autoplay 都禁用。
autoplay 属性在 Chrome/Firefox 中仍会被静音或阻止，除非用户已与页面有交互（如点击）。离线演示若依赖自动播放，必须加显式触发逻辑：
<audio id="bgm" src="data:audio/mpeg;base64,..."></audio><button onclick="document.getElementById('bgm').play()">播放</button>
别指望靠 autoplay muted 绕过——muted 对非视频类 audio 元素无效，且部分浏览器连 muted autoplay 都禁用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
