1
resposta

[Sugestão] [SUGESTÃO DE CÓDIGO]

function tocaSom (elementoAudio) {
    const elemento = document.querySelector(elementoAudio);

    if(elemento === null){
        console.log('Elemento não encontrado.');
    }else if(elemento && elemento.localName === 'audio'){
        elemento.play();
    }else{
        console.log('Elemento não é um audio.')
    }
}

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);
    }

    tecla.onkeydown = function(e){
        if(e.code === "Space" || e.code === "Enter" || e.code === "NumpadEnter"){
               
            tecla.classList.add('ativa');
        }
    }

    tecla.onkeyup = function(){
        tecla.classList.remove('ativa');
    }
}
1 resposta

Olá Paulo, tudo bem?

Parabéns pela iniciativa de compartilhar seu código e por praticar!

Espero que ele seja útil para outras pessoas que estejam estudando JavaScript para Web.

Um abraço e bons estudos.