JSFiddle - React, Tailwind, and code Playground

HTML

<figure>
    <figcaption>FIP Rock</figcaption>
    <audio src="http://direct.fipradio.fr/live/fip-webradio1.mp3" controls data-name="FIP Rock"></audio>
</figure>

<figure>
    <figcaption>FIP Jazz</figcaption>
    <audio src="http://direct.fipradio.fr/live/fip-webradio2.mp3" controls data-name="FIP Jazz" class="audio-round"></audio>
</figure>

<div id="status">Let's play !</div>

CSS

.audio-round {
  height: 40px;
  border-radius: 25px;
}

JavaScript

const audios = document.querySelectorAll('audio');

audios.forEach(audio => {
	audio.addEventListener('play', e => {
  	document.getElementById('status').innerHTML = 'Play ' + e.target.dataset.name;
  });
  
  audio.addEventListener('pause', e => {
  	document.getElementById('status').innerHTML = 'Pause ' + e.target.dataset.name;
  });
});