本地双击 HTML 文件时 audio src 路径 404 是因浏览器在 file:// 协议下禁止加载媒体资源，属安全策略；须用 HTTP 服务（如 Live Server 或 python3 -m http.server），路径用相对 URL，禁用中文与特殊字符，并确保服务器返回正确 MIME 类型（如 audio/mpeg）。
audio src 路径为什么本地双击就 404
因为浏览器在 file:// 协议下禁止加载媒体资源，这是硬性安全策略，不是 bug。Chrome、Firefox、Edge 全部拦截，连 Network 面板都可能不显示请求。
实操建议：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 开发阶段必须启用本地 HTTP 服务：VS Code 安装 Live Server 插件，或终端运行
python3 -m http.server 8000 - 路径统一用相对 URL，例如
src="audio/intro.mp3"，不要写src="./audio/intro.mp3"或src="file:///D:/project/audio/intro.mp3" - 文件名禁用中文、空格、括号、emoji——
src="背景音乐.mp3"在 Safari 和部分 Chrome 版本直接静默失败 - 检查 Network 面板：若状态码是
net::ERR_FILE_NOT_FOUND或请求未发出，基本可锁定为协议或路径问题
如何验证音频文件是否真能被浏览器加载
光看 HTML 写对没用，关键看浏览器拿到的是不是合法音频响应。很多“播不了”其实是服务器没配 MIME 类型，浏览器把 MP3 当文本扔了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开 Network 面板，点中音频请求，确认响应头
Content-Type是audio/mpeg（MP3）、audio/ogg（OGG）或audio/wav（WAV），不能是text/plain或空 - Apache 用户，在项目根目录的
.htaccess加：AddType audio/mpeg .mp3、AddType audio/ogg .ogg - Nginx 用户，在
types块里补：audio/mpeg mp3;、audio/ogg ogg; - 用
ffprobe your-file.mp3确认编码合规（MP3 必须是 MPEG-1/2 Layer 3，不是 AAC 封装的 .mp4 冒充）
表格里放 audio 标签时路径容易错在哪
表格单元格（<td>）本身不改变路径解析逻辑，但嵌套层级容易让人误判相对路径起点——它仍以 HTML 文件所在目录为基准，不是表格所在 div 或 JS 脚本位置。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免用
../往上跳：表格 HTML 若和音频不在同一级，优先把音频统一放在assets/audio/下，所有src都从根开始写，如src="/assets/audio/click.ogg" - 不要在内联 JS 里拼接路径，例如
<audio src="' + basePath + '/sound.mp3'>—— 这类字符串拼接极易漏转义或路径断裂 - 如果表格由 JS 动态渲染（比如 Vue/React），确保音频路径在构建时已解析为静态 URL，而不是运行时靠 document.baseURI 拼接
移动端 iOS Safari 对路径的额外限制
iOS Safari 不仅卡协议和 MIME，还对路径长度和编码敏感：过长的 query 参数（如 ?v=1.2.3#t=10）可能触发静默拒绝，含 URL 编码字符（如 %20）的路径在某些版本会加载失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 路径尽量短且干净：
src="a.mp3"优于src="audio/v1/main-track-2026-final.mp3" - 避免在 src 中带 hash、timestamp、query 等动态参数；如需缓存控制，改用 Cache-Control 响应头
- 测试务必真机连接 Safari Web Inspector，模拟器或 Chrome DevTools 的 iOS 模式无法复现真实限制
Content-Type: text/plain，就全明白了。 
