audio标签需同时满足路径正确、格式兼容、浏览器策略允许三者才能正常播放；必须添加controls属性才显示控件；src需用相对或绝对url，避免file://、中文及空格；应通过source标签提供mp3与ogg双格式回退；autoplay须配合muted且用户交互后方可解除静音。

audio 标签加音频，不是写对了就能播——路径、格式、浏览器策略三者任一出错，都会静音、报错或直接不显示控件。

audio 标签必须带 controls 才有播放按钮

只写 <audio src="sound.mp3"></audio>，页面上什么都不会出现。用户既看不到进度条，也点不了播放，容易误以为“没加载成功”或“代码失效”。
必须显式加上 controls 属性，浏览器才渲染默认控件：

<audio src="assets/audio/intro.mp3" controls></audio>

• 不加 controls ≠ 后台静默播放，而是彻底无交互入口
• 如果想隐藏界面、纯用 JS 控制（比如做音效触发），可以不加，但得自己处理加载、错误、状态同步
• controls 是布尔属性，写成 controls="" 或 controls="controls" 都行，但推荐简写 controls

src 路径不能是 file:// 协议或含中文/空格

开发时双击 HTML 文件打开，或用 VS Code Live Server 以外的方式本地预览，src="music.mp3" 很可能 404。因为浏览器拒绝从 file:// 加载媒体资源（安全限制）。

• 路径必须是相对 URL（如 src="audio/bg.mp3"）或绝对 URL（如 src="/static/sound.ogg"）
• 文件名避免中文、空格、括号等特殊字符；src="背景音乐.mp3" 在 Safari 和部分 Chrome 版本会失败
• 检查 Network 面板：若请求状态是 net::ERR_FILE_NOT_FOUND 或 blocked:mixed-content，基本就是路径或协议问题

只放 MP3 会导致 Firefox / Safari 某些版本无法播放

MP3 在 Chrome、Edge、Safari 上基本没问题，但 Firefox 默认禁用 MP3 解码器（尤其企业版或隐私强化配置），只认 audio/ogg 或 audio/wav。只写一个 src 属性等于放弃这部分用户。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

正确做法是用 <source></source> 提供回退：

<audio controls><source src="song.mp3" type="audio/mpeg"><source src="song.ogg" type="audio/ogg">
  您的浏览器不支持 audio 元素。
</source></source></audio>

• type 属性必须写，否则某些服务器未返回正确 Content-Type 时，浏览器会跳过该 <source></source>
• 顺序很重要：浏览器从上到下尝试，第一个 type 匹配且可访问的就用，后面的忽略
• 别用 .wav 当主力：体积大、无压缩，仅适合几秒提示音；Safari 支持但 iOS Safari 对大 wav 加载极慢

autoplay 不加 muted 基本无效

加了 autoplay 却没声音？不是代码漏了，是浏览器主动拦截。Chrome、Safari、Edge 等全部要求：带声音的自动播放，必须满足“已静音 + 用户有过交互”两个条件。

• 最简可行方案：<audio src="notify.mp3" autoplay muted controls></audio> —— 静音状态下能播，后续可用 JS 解除静音
• 若去掉 muted，控制台大概率报 DOMException: play() failed because the user didn't interact with the document first
• iOS Safari 最严格：首次播放必须由 click 或 touchstart 触发，之后才能调用 play()；靠 setTimeout 或 DOMContentLoaded 启动必失败

真正卡住人的往往不是语法，而是路径协议、MIME 类型声明、浏览器策略这三处——它们不出现在控制台报错里，但会让整个音频“看起来像没写”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！