JSFiddle - React, Tailwind, and code Playground

HTML

<audio id="player" controls>
  <source id="mp3" src="http://www.nielsharbo.dk/test/audioplayer/innocence.mp3">
  <source id="ogg" src="http://www.nielsharbo.dk/test/audioplayer/innocence.ogg">
</audio>
<p id="currentTime">

</p>

JavaScript

var myAudio = document.getElementById("player");
myAudio.onprogress = function() {
  alert("Downloading audio");
}

myAudio.onloadeddata = function() {
    alert("Starting to load audio");
}

myAudio.onplay = function() {
  alert("The audio has started to play");
}

myAudio.onpause = function() {
  alert("The audio has been paused");
}

myAudio.onended = function() {
  alert("The audio has ended");
}

myAudio.onvolumechange = function() {
    alert("The volume has been changed!");
};

myAudio.ontimeupdate = function() {
    document.getElementById("currentTime").innerHTML = myAudio.currentTime;
}