main.js

const keys = document.querySelectorAll(".key"); // Pega todos os componentes de tecla

function iluminaTecla (tecla) {
    tecla.classList.add("playing");
}

function apagaTecla (tecla) {
    tecla.target.classList.remove("playing");
}

function tocarNota (event) {
    let keyCode;
    
    if (event.type === 'keydown') { // Se for um evento de teclado,ele vai armazenar o código da tecla que foi clicado
        keyCode = event.keyCode
    } else { // Se for um evento de clique
        keyCode = event.target.dataset.key;
    }
    const tecla = document.querySelector(`.key[data-key="${keyCode}"]`);

    let teclaPiano = document.querySelector(`audio[data-key="${keyCode}"]`); // Vai pegar o áudio correto de acordo com o código da tela.

    if (!teclaPiano) { // Se não achar nenhum áudio com o keyCode
        return console.log("Nenhum áudio configurado para essa tecla"); // Ele para a aplicação com essa mensagem.
    }

    teclaPiano.currentTime = 0; // Para não haver atrasos na hora de clicar, ele reinicia o áudio, caso seja tocado várias vezes rapidamente.
    iluminaTecla(tecla);
    teclaPiano.play(); // Toca o áudio

}

function main () {
    keys.forEach((key) => { // Da lista de teclas, para cada uma ele adiciona um evento de click e roda a função de tocar as teclas.
        key.addEventListener("click", tocarNota);
        key.addEventListener("transitionend", apagaTecla); // Detecta quando terminar uma transição, no caso a transition da classe key.
    })
    
    // Portanto, o addEventListener vai ficar ouvindo na página do navegador toda vez que o usuário clicar em uma tecla do teclado
    window.addEventListener("keydown", tocarNota); // keydown vai representar o momento quando for clicado em uma tecla
}

window.addEventListener("load", main);