Decidi tentar fazer sem o "while" e, depois de bater um poco de cabeça e dar umas passadas no stack overflow cheguei nesse código aí:
const keys = document.querySelectorAll('.tecla');
const sounds = document.querySelectorAll('audio');
document.onclick = function (event) {
const index = matchClassToId(event.srcElement.classList[1]);
try {
sounds[index].play();
} catch (e) {
console.log('click nos botões, cara pálida.')
}
}
function matchClassToId (buttonClass) {
for (let i = 0; i < sounds.length; i++) {
const soundId = sounds[i].getAttribute('id');
if ( buttonClass === soundId ) {
return i;
}
}
}
Pergunta pros mais experientes: Suponhamos que tivessemos um número MUITO grande de botôes. Na minha cabeça, quando a página fosse carregar e o script fosse executado, iria rodar o while do código da instrutora até que todos os elementos recebessem a função com o parâmetro correto da lista de sons e, no caso de haver um número absurdo de teclas e sons, isso faria a pagina demorar a carregar mas, depois de ter carregado, tudo executaria sem delay, pois as funções já foram passadas. Nessa minha versão, novamente na hipótese de ter muitos botões, todas as vezes que houvesse um click num botão o for loop teria que verificar qual id é igual a classe obtida no "event.srcElement.classList[1]", ficando mais ineficiente quanto maior for a lista e quanto mais próximo do fim dela o botão clicado está. É isso mesmo ou eu estou boiando? rsrsrs E no caso de ser, seria melhor carregar a página mais rápido como no meu código e ir executando botão por botão ou no modo da instrutora, carregando tudo logo de cara? Eu não consegui chegar numa conclusão porquê, no meu código, no caso de ter muitos botões, poderia começar a demorar a responder, mas pra isso precisaria de um número absurdo mesmo de botões e, no código da instrutora depois de carregados, tudo estaria pronto para executar, teoricamente sem delay, mas será que com tantos botões disponíveis a chance de todos eles serem tocados não diminui tanto a ponto de não fazer sentido carregar tudo?