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.