本文详解如何修正循环遍历音频数组导致全部声音同时播放的问题，通过事件委托与数据属性精准绑定每个按钮与其对应的音频路径，实现单击即播、互不干扰的交互效果。
在原始代码中，drum() 函数被所有按钮共用，且内部使用了 for 循环遍历整个 drumSound 数组——这意味着每次点击任意按钮，都会依次创建并播放全部 7 个音频实例，不仅违背设计意图（按钮 0 播放音效 0），还极易触发浏览器音频自动播放策略限制（多数现代浏览器禁止未用户手势触发的多音频自动播放），导致静音或报错。
根本问题在于：缺乏“当前被点击按钮”与“对应音频索引”的映射关系。简单循环无法区分是哪个按钮触发了事件，因此必须将音频路径与触发源显式关联。
✅ 正确方案：事件委托 + data-* 属性绑定
推荐采用事件委托（Event Delegation）：只绑定一个全局点击监听器，通过 event.target 动态识别被点击的按钮，并利用 data-snd 自定义属性携带音频路径。这样既高效（避免重复绑定），又语义清晰、易于维护。
以下是完整可运行的优化代码：
Drum Pad
⚠️ 关键注意事项
- 路径分隔符：Web 环境中统一使用正斜杠 /（如 "sounds/crash.mp3"），反斜杠 \\ 在字符串中易引发转义问题，且不符合 URL 规范；
- 浏览器自动播放策略：audio.play() 必须在用户手势（如 click）回调中同步调用，本方案已满足；但若页面加载后立即尝试播放，仍会失败；
- 错误处理：务必用 .catch() 捕获 play() Promise 拒绝，避免静默失败；同时用 try/catch 包裹 new Audio() 防止无效路径崩溃；
- 性能考量：避免频繁创建 Audio 实例。如需高频触发（如鼓点连击），建议预加载并复用
? 进阶提示
若需支持键盘触发（如 Drum Machine 常见的 A-S-D-F 键），可扩展监听 keydown 事件，根据 event.key 映射到 drumSound[index]，实现“点击+敲击”双模控制。
至此，每个按钮真正只负责播放其专属音效，逻辑解耦、健壮可扩展——这才是前端音频交互的正确打开方式。
