[Projeto] Faça como eu fiz: Modificando estilos com JavaScript - Eventos e lógica - JavaScript para Web

//Resolução do exercício, conforme proposto em aula
//main.js
function tocaSom (idElementoAudio) {
    document.querySelector(idElementoAudio).play();
}

const listaDeTeclas = document.querySelectorAll('.tecla');

//para
for (let contador = 0; contador < listaDeTeclas.length; contador++) {

    const tecla = listaDeTeclas[contador];
    const instrumento = tecla.classList[1];
    const idAudio = `#som_${instrumento}`; //template string

    tecla.onclick = function () {
        tocaSom(idAudio);
    }

//onkeydown é quando a tecla está pressionada no teclado
//add é para adicionar a classe
    tecla.onkeydown = function(){
        tecla.classList.add('ativa');
    }  

//onkeyup é quando a tecla é solta no teclado
//remove é usado para remover, no caso, classes
    tecla.onkeyup = function() {
        tecla.classList.remove('ativa');
    }
}