Teclas ainda continuam em destaque se...

Boa noite.

Coloca seu código aí pra gente dar uma olhada :)

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

    if(elemento && elemento.localName === 'audio'){
            elemento.play();
    }
    else{
        console.log('Elemento não encontrado ou seletor inválido');
    }
}

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

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

    const tecla = listaDeTeclas[contador];
    const instrumento = tecla.classList[1];

    //Template String
    const idAudio = `#som_${instrumento}`;


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

    tecla.onkeydown = function(evento) {
        if(evento.code === "Space" || evento.code === 'Enter'){
        tecla.classList.add('ativa');
        }
    }
    tecla.onkeyup = function(){
        tecla.classList.remove('ativa');
    }
}

Boa noite. O mesmo acontece se você segurar o ESPAÇO e clicar em outro botão. O que acontece e que quando o 'tecla.onkeyup' e ativado o foco já esta em outro botão e ele tenta remover a classe 'ativa' de onde esta o foco no momento. Como nenhum botão precisa permanentemente ficar com a classe 'ativa', podemos buscar por qualquer elemento que tenha a classe 'ativa' e remover a classe.

tecla.onkeyup = function(){
    document.querySelector('.ativa')?.classList.remove('ativa');
}

Boa noite! Agradeço aos colegas Victor Cordeiro Fraguas Pires e William andrade de souza pela ajuda. Sou novo no forum e estou aprendendo a usar as ferramentas daqui. Dúvida sanada. Mais uma vez, obrigado!