index.js

const btn = document.querySelectorAll(".drum");

for(let i=0; i < btn.length; i++) {
  
  let audios = ["sounds/crash.mp3", "sounds/snare.mp3", "sounds/kick-bass.mp3", "sounds/tom-1.mp3", "sounds/tom-2.mp3", "sounds/tom-3.mp3", "sounds/tom-4.mp3"];
  
 btn[i].addEventListener("click", () => {
   pressedStyle(btn[i].innerHTML)
  let audio = new Audio(audios[i]);
 audio.play();
});
}

document.addEventListener("keypress", (event) => {
  pressedStyle(event.key);
  switch (event.key) {
    case "w":
      let crash = new Audio("sounds/crash.mp3");
      crash.play();
    break;
    
    case "a":
      let snare = new Audio("sounds/snare.mp3");
      snare.play();
    break;
    
    case "s":
      let kick = new Audio("sounds/kick-bass.mp3");
      kick.play();
    break;
    
    case "d":
      let tom1 = new Audio("sounds/tom-1.mp3");
      tom1.play();
    break;
    
    case "j":
      let tom2 = new Audio("sounds/tom-2.mp3");
      tom2.play();
    break;
    
    case "k":
      let tom3 = new Audio("sounds/tom-3.mp3");
      tom3.play();
    break;
    
    case "l":
      let tom4 = new Audio("sounds/tom-4.mp3");
      tom4.play();
    break;
  }
})

function pressedStyle(currentKey) {
  let active = document.querySelector("." + currentKey);
  active.classList.add("pressed");
  
  setTimeout(() => {
    active.classList.remove("pressed");
  }, 100);
}