事件委托统一管理音频的核心是监听父容器点击事件，通过data-audio-src获取音频路径，动态复用单例Audio实例播放，支持动态节点、节省内存，并满足移动端用户手势触发要求。
用事件委托统一管理多个音频，核心是不给每个 <audio></audio> 单独绑定事件，而是监听父容器或 document，通过事件冒泡 + 元素匹配来触发对应音频操作。这样既节省内存，又天然支持动态添加的音频节点，特别适合歌曲列表、按钮式播放等场景。
用 data 属性标记音频源
每个播放触发元素（比如按钮、图片、卡片）需携带音频路径信息，推荐用 data-audio-src：
<button class="play-btn" data-audio-src="song1.mp3">播放《春日》</button><div class="track-item" data-audio-src="song2.ogg">…</div>
避免把 <audio></audio> 标签写死在 HTML 中——它由 JS 动态创建并复用，防止多个实例同时加载浪费资源。
创建单例 Audio 实例并复用
全局只维护一个 Audio 对象，所有播放都走这个实例：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 初始化一次：
const audio = new Audio(); - 每次点击时更新
audio.src，再调用audio.play() - 自动暂停前一个：无需手动
pause()，赋新src后再play()会自然中断上一曲
绑定委托事件并精准捕获目标
监听父容器（如 .playlist）比监听整个 document 更高效、更可控：
document.querySelector('.playlist').addEventListener('click', handlePlay)- 在
handlePlay中用e.target.closest('[data-audio-src]')找到最近的可播放元素 - 提取
dataset.audioSrc，赋值给audio.src，然后play() - 加上
error监听，避免静音/404 导致界面无响应
处理移动端限制与用户交互要求
iOS 和部分安卓浏览器要求音频必须由用户手势触发才能播放：
- 确保事件监听绑定在
click或touchstart上，不能延迟到异步回调里调play() - 不要在
setTimeout、fetch.then等非直接用户行为中调用play() - 首次播放失败时，可在控制台提示“请点一下屏幕以启用声音”，并保留按钮可点击状态
