1
resposta

Adicionando as teclas NumPads para cada atribuição do AluraMidi

Com a ajuda da AI eu consegui integrar os Numpads juntamente com o código e está 100% funcional.

function tocaSom(idElementoAudio) {
    document.querySelector(idElementoAudio).play();
}

const listaDeTeclas = document.querySelectorAll('.tecla');
const listaNumPad = ['Numpad1', 'Numpad2', 'Numpad3', 'Numpad4', 'Numpad5', 'Numpad6', 'Numpad7', 'Numpad8', 'Numpad9'];

// Itera sobre cada tecla na listaDeTeclas
for (let contador = 0; contador < listaDeTeclas.length; contador++) {
    const tecla = listaDeTeclas[contador];
    const instrumento = tecla.classList[1];
    const idAudio = `#som_${instrumento}`; // Template string para obter o id do elemento de áudio correspondente

    // Função para tocar o som ao clicar na tecla
    tecla.onclick = function() {
        tocaSom(idAudio);
    }

    // Função para adicionar a classe "ativa" ao pressionar a tecla
    tecla.onkeydown = function(event) {
        console.log(event.code);
        if (event.code === "Space" || event.code === "Enter") {
            tecla.classList.add("ativa");
            tocaSom(idAudio); // Toca o som correspondente ao pressionar a tecla
        }
    }

    // Função para remover a classe "ativa" ao soltar a tecla
    tecla.onkeyup = function() {
        tecla.classList.remove('ativa');
    }

    // EventListener para detectar o pressionamento das teclas da listaNumPad
    window.addEventListener('keydown', function(event) {
        for (let i = 0; i < listaNumPad.length; i++) {
            if (event.code === listaNumPad[i]) {
                if (i === contador) { // Verifica se o índice atual é igual ao contador
                    tecla.classList.add('ativa');
                    tocaSom(idAudio); // Toca o som correspondente ao pressionar a tecla
                }
            }
        }
    });
    
    // EventListener para detectar a soltura das teclas da listaNumPad
    window.addEventListener('keyup', function(event) {
        for (let i = 0; i < listaNumPad.length; i++) {
            if (event.code === listaNumPad[i]) {
                if (i === contador) { // Verifica se o índice atual é igual ao contador
                    tecla.classList.remove('ativa');
                }
            }
        }
    });
}

Pra quem tem curiosidade de pesquisar e analisar o código, pedi para que documentasse o que cada função faz.

1 resposta

Oi Patrick, tudo bem?

Excelente integração com os Numpads usando IA! Economizou tempo, garantiu precisão e facilitou o entendimento com os comentários.

Ótimo trabalho e muito obrigada por compartilhar com a gente!

Um abraço e bons estudos.