Bom dia.
Após acompanhar o curso decidi realizar o mesmo processo da instrutora, porém fiz uma pequena alteração que me pareceu poupar um certo trabalho além do código ficar mais reduzido.
Acontece que ao invés de utilizar 'onkeydown' e 'onkeyup', eu mantive a adição e remoção da classe ainda no evento 'onclick', adicionando um setTimeout para remover a classe ativa com um intervalo de tempo de 0,1s.
tecla.onclick = function() { TocarSom(idAudio); tecla.classList.add('ativa'); setTimeout(() => { tecla.classList.remove('ativa'); }, 100); }
function TocarSom(idElementAudio) {
const audio = document.querySelector(idElementAudio);
if (audio != null && audio.localName === 'audio') {
audio.play();
}
else {
alert ('Elemento não encontrado ou seletor inválido');
}
}
for (let i = 0; i < buttons.length; i++) {
const tecla = buttons[i];
const classBtn = tecla.classList[1];
const idAudio = `#som_${classBtn}`;
tecla.onclick = function() {
TocarSom(idAudio);
tecla.classList.add('ativa');
setTimeout(() => {
tecla.classList.remove('ativa');
}, 100);
}
}
O código me pareceu funcionar bem semelhante ao da instrutora, mas gostaria de saber se existem boas práticas ou algo nesse sentido que informe não ser muito bom utilizar esse tipo de alternativa ou qual impacto poderia ser gerado utilizando o código dessa forma.
Obrigado.