index.js

var len= document.querySelectorAll(".drum").length;
var i;
for(i=0;i<len;i++)
{
    document.querySelectorAll('.drum')[i].addEventListener('click', function(){
        var but=this.innerHTML;
        makeSound(but);
        buttonAnimation(but);
    });

}
document.addEventListener("keydown",function(event){
    makeSound(event.key);
    buttonAnimation(event.key);
});

function makeSound(sound)
{
    switch (sound) {
        case "w":
        var tom1 = new Audio('sounds/tom-1.mp3');
        tom1.play();
            break;
        case "a":
        var tom2 = new Audio('sounds/tom-2.mp3');
        tom2.play();
            break;
        case "s":
        var tom3 = new Audio('sounds/tom-3.mp3');
        tom3.play();
            break;
        case "d":
        var tom4 = new Audio('sounds/tom-4.mp3');
        tom4.play();
            break;
        case "j":
        var snare = new Audio('sounds/snare.mp3');
        snare.play();
            break;
        case "k":
        var crash = new Audio('sounds/crash.mp3');
        crash.play();
            break;
        case "l":
        var kb = new Audio('sounds/kick-bass.mp3');
        kb.play();
            break;
    
        default:
            break;
    }
    

}

function buttonAnimation(event)
{
    var activeButton=document.querySelector("."+event);
    activeButton.classList.add("pressed");
    setTimeout(function(){
        activeButton.classList.remove("pressed");
    
    }, 100);
}