audio标签需加controls属性才能显示控件，否则隐形；src路径须正确且服务端返回匹配content-type；移动端autoplay需muted+用户手势；多格式兜底为必须，mp3+ogg组合兼容性最佳。

audio 标签直接塞进 就能用，但不加 controls 就是隐形的

表格里放音频，最简单的方式就是把 <audio></audio> 标签写在 <td> 或 <code><th> 里面。但很多人贴进去后发现“没反应”——大概率是因为漏了 <code>controls 属性。没有它，浏览器不会渲染任何按钮或进度条，音频可能已加载但用户完全无法操作。

• controls 是布尔属性，写了就显示默认控件（播放/暂停、音量、进度）
• 只写 <audio src="xxx.mp3"></audio> 合法但无效（对用户而言）
• 如果想隐藏控件、用 JS 自定义 UI，可以去掉 controls，但必须自己绑定 click、监听 paused 状态等，否则交互会断掉

src 路径错、MIME 类型缺、服务器没配好，三者任一出问题就加载失败

常见现象是播放器显示“加载中”转圈或空白，控制台没报错，但 Network 面板里音频请求状态码是 404 或 200 但 Content-Type 不对。根源往往不在 HTML 写法，而在资源路径和服务端配置。

• src 必须是相对路径（如 "./audio/intro.mp3"）或绝对 URL；"C:\files\audio.mp3" 这类本地路径在网页中无效
• 用 <source></source> 时，type 属性强烈建议带上：type="audio/mpeg"（MP3）、type="audio/ogg"（OGG），否则 Safari 可能跳过该源
• Web 服务器必须返回正确的 Content-Type 响应头，比如 MP3 文件要返回 audio/mpeg；Python 的 http.server 或 GitHub Pages 默认不设，会导致加载失败
• 开发时打开浏览器 Network 面板，确认音频请求的 Status 是 200，且 Response Headers 中有正确的 Content-Type

移动端 autoplay 几乎必然失效，别指望加个属性就自动响

iOS Safari 和 Android Chrome 对带声音的自动播放限制极严，哪怕加了 autoplay muted，首次访问也常被静音或拦截。这不是 bug，是策略。

Doc To HTML

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

下载

• autoplay + muted 是唯一可能触发自动播放的组合，但前提是页面已被用户点击过一次（即存在“用户手势”）
• 想实现“点一下就播”，得用 JS 绑定 click 事件，在回调里调 audio.play()，并处理 Promise 拒绝（比如 play().catch(e => console.log(e))）
• iOS Safari 更进一步：即使有用户手势，若该 <audio></audio> 元素从未成功播放过，play() 仍可能被拒绝；加 muted=true 首次播成功后，再 audio.muted = false 才更稳
• 表格里多个音频？每个都得单独处理播放逻辑，不能共用一个事件监听器而不区分 target

多格式兜底不是可选项，是必须项

只放一个 .mp3 文件，在 Firefox 或旧版 Edge 上大概率直接显示“不支持”。不同浏览器对编码格式的支持差异真实存在，不是理论问题。

• 推荐组合：<source src="song.mp3" type="audio/mpeg"></source> + <source src="song.ogg" type="audio/ogg"></source>
• MP3 兼容性最广（Chrome、Safari、Edge），OGG 在 Firefox 和开源 Chromium 中更可靠
• WAV 体积大、无压缩，仅适合几秒提示音；不要用它当主力格式
• 浏览器按 <source></source> 顺序尝试，遇到第一个能解码且可访问的就停，所以把兼容性最广的放前面
• 备用文本（如 "您的浏览器不支持 audio 元素。"）只在完全不支持 <audio></audio> 的老浏览器中显示，现代浏览器不会看到它

表格单元格里嵌音频本身不难，真正卡住人的永远是路径、MIME、移动端策略这三者的交叉影响——调试时得挨个验证，不能只盯着 HTML 标签看。

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