[Dúvida] Como o código identifica a tecla ?

Boa tarde, Raphael!

A constante 'listaDeTeclas' foi criada recebendo uma lista de todos os elementos que possuem a classe '.tecla':

const listaDeTeclas = document.querySelectorAll('.tecla');

E dentro do bloco de repetição 'for' essa lista é percorrida atribuindo, a cada repetição, cada um desses elementos a constante 'instrumento':

const tecla = listaDeTeclas[contador];

E em seguida pegando a segunda classe () desse elemento, que é a classe utilizada para identificar ou distinguir cada som:

const instrumento = tecla.classList[1];

Com isso o nome da classe é concatenada no template string logo abaixo, que é exibido no console log a cada click de uma tecla:

const idAudio = `#som_${instrumento}`;

Ou seja, a identificação de qual tecla foi clicada se dá através da segunda classe do elemento (botão) clicado.

Heber, boa tarde!

Primeiramente, obrigado pela resposta. Apenas fiquei com dúvida em relação a forma como é identificado no click no botão, qual som seria o correto. Após o for iterar sobre todos os elementos, é salvo em memória uma referência entre botão e classe ?

Olá, Raphael!

Creio que não, tendo em vista que ao 'rodar', realizar a última repetição, o bloco 'for' terá armazenado na constante 'instrumento' apenas os dados do último objeto da lista de instrumentos, já que a cada repetição essa constante (instrumento) é reescrita.

Essa referência entre botão e classe é inferida sempre quando o botão é clicado e todo processo de identificação é realizado.

Oi, Raphael

O "for" percorre todas as "teclas" e insere no método "onclick" uma função

Então me cada "tecla" fica armazenada a função específica

Um exemplo para alterar o atributo(cor) e o método(onclick) da "tecla"

// user "forEach" que faz o memos que o "for"

function tocaSom(idAudio) {
    document.querySelector(idAudio).play();
}

// incluído apenas mostra o exemplo
const cores = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet', 'black', 'brown'];

const teclas = document.querySelectorAll('.tecla');

teclas.forEach( (tecla, i) => {
    const cor = cores[i];
    const idAudio = `#som_${tecla.classList[1]}`;

    tecla.style.color = cor; // altera atributo
    tecla.onclick = () => tocaSom(idAudio); // altera método

    console.log(i, tecla.innerText, cor, idAudio) ;  
});

Após alterado, faz parte da "tecla"

A cor podemos ver que cada "tecla" tem a sua, o mesmo acontece com o método "onclick"