audio标签需加controls属性才能显示控件，否则隐形；src路径须正确且服务端返回匹配Content-Type；移动端autoplay需muted+用户手势；多格式<source>兜底为必须，MP3+OGG组合兼容性最佳。
audio 标签直接塞进 就能用，但不加 controls 就是隐形的
表格里放音频，最简单的方式就是把 <audio> 标签写在 <td> 或 <th> 里面。但很多人贴进去后发现“没反应”——大概率是因为漏了 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> 时，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，是策略。
-
autoplay + muted 是唯一可能触发自动播放的组合，但前提是页面已被用户点击过一次（即存在“用户手势”）
- 想实现“点一下就播”，得用 JS 绑定
click 事件，在回调里调 audio.play()，并处理 Promise 拒绝（比如 play().catch(e => console.log(e))）
- iOS Safari 更进一步：即使有用户手势，若该
<audio> 元素从未成功播放过，play() 仍可能被拒绝；加 muted=true 首次播成功后，再 audio.muted = false 才更稳
- 表格里多个音频？每个都得单独处理播放逻辑，不能共用一个事件监听器而不区分 target
多格式兜底不是可选项，是必须项
只放一个 .mp3 文件，在 Firefox 或旧版 Edge 上大概率直接显示“不支持”。不同浏览器对编码格式的支持差异真实存在，不是理论问题。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合：
<source src="song.mp3" type="audio/mpeg"> + <source src="song.ogg" type="audio/ogg">
- MP3 兼容性最广（Chrome、Safari、Edge），OGG 在 Firefox 和开源 Chromium 中更可靠
- WAV 体积大、无压缩，仅适合几秒提示音；不要用它当主力格式
- 浏览器按
<source> 顺序尝试，遇到第一个能解码且可访问的就停，所以把兼容性最广的放前面
- 备用文本（如
"您的浏览器不支持 audio 元素。"）只在完全不支持 <audio> 的老浏览器中显示，现代浏览器不会看到它
表格单元格里嵌音频本身不难，真正卡住人的永远是路径、MIME、移动端策略这三者的交叉影响——调试时得挨个验证，不能只盯着 HTML 标签看。
表格里放音频，最简单的方式就是把 <audio> 标签写在 <td> 或 <th> 里面。但很多人贴进去后发现“没反应”——大概率是因为漏了 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>时，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，是策略。
-
autoplay+muted是唯一可能触发自动播放的组合，但前提是页面已被用户点击过一次（即存在“用户手势”） - 想实现“点一下就播”，得用 JS 绑定
click事件，在回调里调audio.play()，并处理 Promise 拒绝（比如play().catch(e => console.log(e))） - iOS Safari 更进一步：即使有用户手势，若该
<audio>元素从未成功播放过，play()仍可能被拒绝；加muted=true首次播成功后，再audio.muted = false才更稳 - 表格里多个音频？每个都得单独处理播放逻辑，不能共用一个事件监听器而不区分 target
多格式兜底不是可选项，是必须项
只放一个 .mp3 文件，在 Firefox 或旧版 Edge 上大概率直接显示“不支持”。不同浏览器对编码格式的支持差异真实存在，不是理论问题。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合：
<source src="song.mp3" type="audio/mpeg">+<source src="song.ogg" type="audio/ogg"> - MP3 兼容性最广（Chrome、Safari、Edge），OGG 在 Firefox 和开源 Chromium 中更可靠
- WAV 体积大、无压缩，仅适合几秒提示音；不要用它当主力格式
- 浏览器按
<source>顺序尝试，遇到第一个能解码且可访问的就停，所以把兼容性最广的放前面 - 备用文本（如
"您的浏览器不支持 audio 元素。"）只在完全不支持<audio>的老浏览器中显示，现代浏览器不会看到它
