Gostaria de entender pq a minha tentativa não funcionou

Opa Leandro, tudo joia?

Desde já peço desculpa pela demora para respondê-lo.

Ao analisar o seu código percebi que o problema está localizado na sua estrutura de repetição while´. Pois o valor da sua variávelindex`, apenas vai ser incrementada e enviada quando alcançar o valor 9, que é a condição de saída dessa estrutura.

Logo, para solucionar isso, utilizei uma outra ferramenta, o forEach, basicamente essa ferramenta me ajuda a trabalhar com cada elemento de uma lista por vez, e nela eu posso adicionar alguns parâmetros, e neste caso um para representar o elemento da lista tecla e adicionei um outro parâmetro que representa a posição atual da lista index. Confira no exemplo abaixo:

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

function tocar(i) {
  sons[i].play();
}

teclas.forEach(function(tecla, index) {
  tecla.onclick = function () {
    tocar(index);
  };
});

Com essa modificação, não muito diferente do seu código, estou passando a posição do elemento da lista de botões a partir da qual foi clicado. Com isso o valor que será passado para a função tocar será o correto e o seu código irá funcionar corretamente.

Se for de seu interesse entender mais sobre o forEach, vou estar deixando, logo abaixo, um artigo da Alura que fala um pouco mais sobre.

• JavaScript: Quando devo usar forEach e map?

Caso tenha mais dúvidas ou problemas com relação a este tópico, estarei à disposição para ajudá-lo. Grande abraço!