Atribuir os áudios aos botões

Ainda mais pro início do curso, quando foi usada uma lista para agrupar os botões, eu imaginei que também seria usada uma lista dos áudios para vincular aos botões. Segui normalmente o curso, deu tudo certo conforme as orientações da Vanessa, mas eu fiquei com a minha ideia original na cabeça e resolvi tentar chegar ao mesmo resultado utilizando uma lista dos áudios. Depois de bater cabeça um pouco, consegui. Meu código ficou assim:

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

function tocaSom(idAudio) { const elemento = document.querySelector(idAudio);

if (elemento && elemento.localName === 'audio'){
    elemento.play();
}

else {
    console.log('Elemento não encontrado');
}

}

for (let i = 0; i < listaDeTeclas.length; i++) {

const teclaDaVez = listaDeTeclas[i];
const idSom = sonsTeclas[i].id;

teclaDaVez.onclick = function (){
    tocaSom(`#${idSom}`);
}

teclaDaVez.onkeydown = function (evento){
    if (evento.code === 'Space' || evento.code === 'Enter') {
        teclaDaVez.classList.add('ativa');
    }
}

teclaDaVez.onkeyup = function (){
    teclaDaVez.classList.remove('ativa');
}

}

Eu imagino que a minha solução seja mais custosa em termos de processamento (já que o código tem que agrupar uma segunda lista). Porém eu entendo que a solução da aula só foi possível porque os nomes das classes dos botões estavam contidos dentro dos nomes dos IDs dos áudios, ou seja, o HTML já foi estruturado pensando nessa solução.

Pra um caso hipotético em que o HTML não tivesse sido tão bem planejado, ou que o vínculo entre os dois conjuntos de elementos não estivessem previstos no projeto inicial e essa necessidade surgisse posteriormente, suponho que aplicar a lógica que eu segui seria mais simples do que reestruturar as classes e IDs de todos os elementos no HTML, correto? (Embora também seja importante notar que a minha solução só funcionou porque os elementos "botão" e "áudio" vinculados entre si estavam na mesma ordem dentro das suas respectivas estruturas do HTML - 'pom' em primeiro, 'clap' em segundo, etc.).