function tocaSom(idElementoAudio) {
document.querySelector(idElementoAudio).play();
}
const listaDeTeclas = document.querySelectorAll('.tecla');
// para
for (let contador =0; contador < listaDeTeclas.length; contador++) {
const tecla = listaDeTeclas[contador];
const instrumento = tecla.classList[1];
const idAudio = `#som_${instrumento}` ; //template string
tecla.onclick = function () {
tocaSom(idAudio);
}
}
Olá Deivid, fiz meu código com os seguintes comentários:
//idElementoAudio = Nome significativo para a referência,no caso parâmetro
function tocaSom (idElementoAudio) { //Nesse caso, precisamos de um parâmetro para rodar a função de forma genérica
document.querySelector(idElementoAudio).play();
}
const listaDeTeclas = document.querySelectorAll('.tecla');
//let é usado para definir algo (aqui no caso, uma variável)
//let contador = 0; - usado na declaração while
//condição enquanto - espera receber o retorno como Verdadeiro ou falso - dpende de algo externo
//no caso o contador
//while (contador < listaDeTeclas.length) {
//é a condição para e o contador é declarado dentro dos ()
for (let contador = 0; contador < listaDeTeclas.length; contador++) { //contador++, incrementa o contador de 1 em 1
const tecla = listaDeTeclas[contador];
const instrumento = tecla.classList[1];
//Template string
const idAudio = `#som_${instrumento}`; //string dinâmica por isso entre {} e ``
//Usaremos a função anônima - function(), pq ela é o valor de algum atributo ou
//está sendo armazenada dentro de alguma referência constante ou variável.
tecla.onclick = function () {
tocaSom(idAudio);
}
// contador = contador + 1; Usado no while
}Espero que possa ajudá-lo a entender um pouco mais.