Dilaco, one of the simplest is described by @Initiostar in https://initiostar.co.uk/demo/Jukebox/.

Drop each of your samples onto your design page. Reject Auto-start. Then delete the control.
The MP3s will now be in your index_htm_files folder.

Replace htm with html throughout if you have this option ticked.

Create a 400x60px Placeholder and add @Initiostar's code, but modified as you know where the MP3s now are:
Code:
<audio id="audiplay" src="index_htm_files/load.mp3" controls autoplay controlsList="nodownload" style="width: 400px;"></audio>
In your case, hide the player behind something else.

In the Website Code Body, put:
Code:
<script>
var audio;
var source ='index_htm_files/';
function aplayer(song) {
  var locate = document.getElementById('audiplay').setAttribute('src', source + song);
  audio=locate;
}
</script>
'song' is the MP3 filename, e.g., load.mp3; this is not the same as the Song Title.

Create a list or table of samples, the simplest is by Song Title appended with a green Play icon.
For each add the link, javascript: aplayer('index_htm_files/<sample>.mp3'). Click the text or Play icon to start the sample. Click another and that play and the previous one stops (as the source has been swapped out).
Beside each, create a set of horizontal traffic lights for Amber and Red:
All Ambers have the same link, javascript: audiplay(pause);
All Stops have the same link, javascript: aplayer('load.mp3'); This swaps out the current sample for a 1-second quiet song as there is no clean way to easily stop an MP3.
You could try javascript: aplayer(''); but this may error.
You may also have to add void just before each JS call - javascript: void ... ;

Come back with questions but include a sample design file so we can correct if required.

Acorn