audio标签动态插入后无法直接播放，必须挂载完成、加载就绪且在用户交互上下文中调用play()；推荐new audio()或createelement+appendchild方式创建，设src后监听canplay再启用播放，并手动实现多格式fallback。
audio 标签不能靠 innerHTML 动态插入后直接播放，必须等元素挂载、加载完成、且在用户交互上下文中调用 play()，否则大概率失败。
动态创建 audio 元素必须用 new Audio() 或 document.createElement('audio')
直接拼字符串塞进 innerHTML（比如 el.innerHTML = '<audio src="a.mp3" controls></audio>'）会导致元素“存在但不可控”：控件可能不响应、play() 报错、甚至静音无提示。
- 推荐用
const audio = new Audio('path/to/file.mp3')—— 自动绑定生命周期，支持链式调用，play()返回 Promise 可捕获错误 - 若需 DOM 挂载（比如塞进表格某单元格），用
document.createElement('audio')，再设src、controls等属性，最后appendChild() - 无论哪种方式，
src必须是有效路径（相对或绝对 URL），不能是本地文件系统路径（如C:\xxx\） - 设完
src后，建议监听canplay或loadedmetadata事件再启用按钮，避免点播就报“not ready”
play() 被拒绝的三大真实原因和应对
控制台报 DOMException: play() failed because the user didn't interact with the document first 不是代码写错了，是浏览器策略强制拦截。
- 首次播放必须发生在用户手势之后：click、touchstart、keydown（非 keyup）等事件回调内，不能在
DOMContentLoaded、setTimeout或fetch成功后直接调 - 即使加了
muted，iOS Safari 仍可能拒绝——稳妥做法是先audio.muted = true调一次play()，成功后再audio.muted = false -
play()返回 Promise，必须.catch(e => console.warn('play failed:', e))，否则错误静默消失，调试无从下手
多格式回退不能只靠 HTML，JS 动态加载也得手动 fallback
静态页面用 <source></source> 让浏览器自动选格式；但 JS 动态创建时，new Audio() 不支持传多个源，得自己实现探测逻辑。
- 不要只试 MP3：Firefox 默认不支持，Safari 对 OGG 更友好，只写一个
new Audio('song.mp3')就等于放弃部分用户 - 简单 fallback 写法：按顺序尝试
['song.mp3', 'song.ogg', 'song.wav']，每个都新建Audio实例，监听onerror和oncanplay，第一个触发canplay的就用它 - 务必为每个源指定正确
type：MP3 是audio/mpeg，不是audio/mp3；OGG 是audio/ogg；错一个字符，浏览器就跳过 - 服务端要返回匹配的
Content-Type响应头，Pythonhttp.server或 GitHub Pages 默认不配，容易导致“请求 200 但解码失败”
表格里插多个音频？每个都要独立状态管理
把 audio 塞进 <td> 很简单，但“点哪个播哪个”不是靠 class 或 name 属性就能自动区分的——没绑定好 target，很容易点 A 却播了 B。
<ul>
<li>别用全局变量存当前音频；给每个 <code>audio 绑定唯一 ID 或 data-id，并在按钮 click 事件中用 event.target.closest('td').querySelector('audio') 精准定位
audio 实例，if (a !== current && !a.paused) a.pause()
最常被忽略的一点：动态插入的音频，其 src 加载失败时不会抛 JS 错误，只会触发 onerror 事件且不冒泡——不显式监听，就永远不知道文件 404 了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
