如何用JavaScript为不同鼓组按钮绑定对应点击音频？

最优实现方案（键值对映射） #

这种方式通过字符与音频的绑定，不受按钮顺序影响，更灵活可靠：

var tekan = document.querySelectorAll(".drum");
// 建立按键字符和对应音频的映射关系
const soundMap = {
  "w": "crash.mp3",
  "a": "kick.mp3",
  "s": "snare.mp3",
  "d": "tom1.mp3",
  "j": "tom2.mp3",
  "k": "tom3.mp3",
  "l": "tom4.mp3"
};

tekan.forEach(drum => {
  drum.addEventListener("click", play);
})

function play() {
  // 获取当前点击按钮的字符（w/a/s等）
  const key = this.textContent;
  // 从映射中匹配对应的音频文件
  const soundFile = soundMap[key];
  // 确保存在匹配的音频再播放
  if (soundFile) {
    const audio = new Audio(`sounds/${soundFile}`);
    audio.play();
  }
};

关键细节说明 #

• this的作用：在点击事件的处理函数play里，this直接指向被点击的那个按钮DOM元素，所以this.textContent能拿到按钮上显示的字符（比如w、a），用这个字符去映射表中找到对应的音频。
• 映射表的优势：相比数组按顺序绑定，键值对的方式不需要依赖按钮的排列顺序，哪怕后续调整按钮位置，只要字符不变，音频绑定就不会出错。
• 容错处理：添加if (soundFile)判断，避免出现未定义的按键导致代码报错。

备选方案（数组顺序绑定） #

如果想沿用你原本的sound数组，可通过按钮的索引来匹配音频：

var tekan = document.querySelectorAll(".drum");
const sound = ["crash.mp3", "kick.mp3", "snare.mp3", "tom1.mp3", "tom2.mp3", "tom3.mp3", "tom4.mp3"];

tekan.forEach((drum, index) => {
  // 绑定事件时传递当前按钮的索引
  drum.addEventListener("click", () => play(index));
})

function play(index) {
  const audio = new Audio(`sounds/${sound[index]}`);
  audio.play();
};

这个方案依赖按钮的顺序，必须保证数组元素顺序和按钮排列顺序完全一致才能正确匹配。

内容的提问来源于stack exchange，提问作者aimanakashah