As per the spec, the :active CSS selector will only match

while an element is being activated by the user

What you're looking for is the :focus pseudo selector, which also matches after your click (without any additional JavaScript).

a.audio:focus { ... }

If you want to control the active element (document.activeElement) with JavaScript, you can use the focus(). The CSS selector :active will not match.

<li class="list-group-item">
  <!-- adapt click handler to current JavaScript framework -->
  <a (click)="toggleAudio(); this.focus();" href="javascript:void(0);" class="sprite audio" data-bs-toggle="tooltip" data-bs-placement="top" title="Audio"></a>
</li>

An alternative approach to display that a link has been clicked, is to toggle a CSS separate class, with element.classList.toggle().

<style>
  a.active { ... }
</style>

<li class="list-group-item">
  <!-- adapt click handler to current JavaScript framework -->
  <a (click)="toggleAudio(); this.classList.toggle('active');" href="javascript:void(0);" class="sprite audio" data-bs-toggle="tooltip" data-bs-placement="top" title="Audio"></a>
</li>

So If I understand you correctly, then you want this button (a button for controlling the audio) to have a active class when clicked on correct? If so here is my proposal. Hopefully this can provide what you are looking to achieve. Let me know if this works for you or not.

You can see that when clicking on the button, if you look at it through inspect element. It will append a 'active' class on click, & remove it when clicked again.

Codepen here: https://codepen.io/no-named-user/pen/abELyar

let a = document.querySelector('#active');

a.onclick = function() {
  a.classList.toggle("active");
}

.sprite {
  background: url(https://liveplanet.app.br/assets/images/sprite-icons.png) no-repeat;
  width: 40px;
  height: 40px;
  display: inline-block;
}

a.audio {
  background-position: 0px -720px;
}

a.audio:hover {
  background-position: -40px -720px;
}

a.audio:active {
  background-position: -80px -720px;
}

<li class="list-group-item">
  <a (click)="toggleAudio()" href="javascript:void(0);" class="sprite audio" data-bs-toggle="tooltip" data-bs-placement="top" title="Audio" id = "active"></a>
</li>