audio标签最简可用结构必须包含src和controls属性，如；需用相对路径或绝对url，避免file://协议问题；应通过source元素提供mp3与ogg多格式回退，并正确设置type值；js播放须由用户手势触发并捕获promise错误。
直接加 <audio></audio> 标签就能播，但不写 src 和 controls 就等于白写——音频加载了也点不了，用户根本不知道它存在。
audio 标签最简可用结构必须含 src 和 controls
只写 <audio></audio> 或只写 <audio src="song.mp3"></audio> 都不行。浏览器不会渲染任何控件，也不报错，就是“隐身”。真正能立刻用起来的最小结构是：
<audio src="./audio/intro.mp3" controls></audio>
-
src必须是相对路径（如"./audio/intro.mp3"）或绝对 URL（如"https://example.com/song.ogg"），不能是"intro.mp3"或"C:\music\song.mp3" - 直接双击 HTML 文件打开时，Chrome/Firefox 会因
file://协议拒绝加载音频，建议用python -m http.server起个本地服务 - 路径大小写敏感：Windows 上文件名是
Intro.mp3，但 HTML 写成intro.mp3就 404
为什么只放 MP3 还是播不了？必须用 source 多格式回退
Firefox 默认不支持 MP3；Safari 对 OGG 更友好；只放一个 .mp3，等于主动放弃一部分用户。解决方法不是换浏览器，是改代码：
<audio controls><source src="song.mp3" type="audio/mpeg"><source src="song.ogg" type="audio/ogg"> 您的浏览器不支持 audio 元素。 </source></source></audio>
-
type属性不能省，也不能写错："audio/mp3"是无效值，必须是"audio/mpeg"（MP3）或"audio/ogg"（OGG） - 浏览器按
<source></source>顺序尝试，遇到第一个能解码且可访问的就停，后面的忽略 - 转 OGG 推荐用 ffmpeg：
ffmpeg -i input.mp3 -c:a libvorbis output.ogg，免费、开源、Firefox 原生支持
JS 控制播放总报错 DOMException？必须由用户手势触发
调用 audio.play() 报 DOMException: play() failed because the user didn't interact with the document first，这不是你代码错了，是浏览器策略强制要求：
- 首次
play()必须在click、touchstart等用户交互事件回调里，不能放在DOMContentLoaded或setTimeout中 -
play()返回 Promise，必须.catch(e => console.error(e))捕获错误，否则失败静默 - 如果
src动态改过，得先调audio.load()再play()，否则可能沿用旧缓冲 - iOS Safari 最严：即使有点击，若该
<audio></audio>元素从未成功播放过，仍可能拒绝；加muted="true"首次播通后，再设audio.muted = false更稳
表格里插音频容易踩哪些坑？
把 <audio></audio> 塞进 <td> 或 <code><th> 没问题，但常见问题集中在路径和服务端配置：
<ul>
<li>多个音频共用一个 <code><audio></audio> 标签？不行。每个单元格里的音频都得是独立元素，否则 JS 控制会串
Content-Type：MP3 必须是 audio/mpeg，OGG 必须是 audio/ogg；Python http.server 和 GitHub Pages 默认不设，需手动配或换服务autoplay。绑定 click 后调 play()，并做好 .catch 容错最容易被忽略的是：路径对了、标签写了、格式也兜底了，但服务器没返回正确的 Content-Type 响应头——这时候浏览器假装加载成功，实际解码失败，控制台还不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
