[Duda] error en codigo

Hola Claudia, ¿cómo estás?

El problema podría estar en el manejo de eventos de teclado. Estás agregando los eventos onkeydown y onkeyup a cada tecla, pero estos eventos se activan cuando se presiona una tecla mientras el elemento tiene el foco.

Normalmente, para manejar eventos de teclado en todo el documento, se utiliza el evento keydown o keyup en el propio documento. Intenta con el siguiente código:

function playSonido(idElementoAudio) {
  document.querySelector(idElementoAudio).play();
}

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

for (let contador = 0; contador < listaDeTeclas.length; contador++) {
  const tecla = listaDeTeclas[contador];
  const instrumento = tecla.classList[1];

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

  tecla.onclick = function () {
    playSonido(idAudio);
  };

  tecla.addEventListener('transitionend', function () {
    this.classList.remove('activa');
  });
}

document.addEventListener('keydown', function (evento) {
  const teclaPresionada = evento.code.replace('Key', '').toLowerCase();
  const tecla = document.querySelector(`.tecla.${teclaPresionada}`);

  if (tecla) {
    const instrumento = tecla.classList[1];
    const idAudio = `#sonido_${instrumento}`;
    playSonido(idAudio);
    tecla.classList.add('activa');
  }
});

En este código, estamos agregando un evento transitionend a cada tecla, que se activará cuando la animación CSS de la clase activa finalice, y entonces se quitará esa clase.

Además, estamos agregando un evento keydown al documento completo, que buscará la tecla correspondiente a la tecla presionada y la activará, agregando la clase activa y reproduciendo el sonido correspondiente.

Asegúrate de reemplazar teclaPresionada con el código de tecla correcto que estás usando en tu CSS para las clases de las teclas.

Si tienes alguna duda o no te funciona la sugestión, no dejes de preguntar. ¡Estamos aquí para ayudarte!.

¡Saludos!