Não seria muito mais simples colocar uma classe nas musicas como class="musica", e fazer uma lista de musica e jogar no while usando a mesma variavel? ficaria mais ou menos assim:
const listaDeTeclas = document.querySelectorAll(".tecla");
const listaDeMusica = document.querySelectorAll(".musica").play();
var contador = 0;
while(contador < listaDeTeclas.length) {
listaDeTeclas[contador].onclick = listaDeMusica[contador]
contador ++
}
hoje, com a Alura e o Google Gemini
Olá meu amigo, tudo blz.... Realmente seu código parecer ter ficado muito mais simples, mas para efeito de aprendizado ele também ficou muito raso, confesso que precisei ver 2x essa aula para entender o motivo dela ter tornado uma solução tão fácil como você está mostrando numa que sem duvidas tem muita informação.
Então foi aí que me toquei que de fato precisamos ir mais fundo em nossa lógica e entender pelo menos 50% deste código. Pra quem já sabe "OK" ....
Mas agradeço de montão ver como seria essa mesma lógica vista de uma forma mais fácil como a sua.
function tocarSom (idElementoAudio){
document.querySelector(idElementoAudio).play();
};
const LISTADETECLAS = document.querySelectorAll('.tecla');
let contador = 0;
//enquato.
while(contador < LISTADETECLAS.length){
const TECLA = LISTADETECLAS[contador];
const INSTRUMENTO = TECLA.classList[1];
//template String.
const IDAUDIO = `#som_${INSTRUMENTO}`;
//console.log(IDAUDIO);
TECLA.onclick = function(){
tocarSom(IDAUDIO);
}
contador++;
//console.log(contador);
}
Adorei essa resolução do problema! Também sou adepto do código simples, mas a da aula ficou boa para adquirir o conhecimento.