In the previous post HTML5 Audio element methods i have explained about the HTML5 <audio> methods. In this blog i will further explained the different events associated with the audio element.

Commonly used audio events are:

1. loadata(): This event occurs when the current frame of the audio file is loaded but not enough to play the whole media.

2. play(): This event occurs when the audio is played or resumed.

3. pause(): This event occurs when the audio is paused.

4. ended(): This event occurs when the current audio has ended or stopped.

5. timeupdate(): This event occurs when the playing position of the audio is changed.

6. volumechange(): This event occurs when the volume is changed.

7. progress(): This event occurs when the browser is downloading the audio.

HTML code:

<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>

JS Code :

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;
}

The working  example is in this link:

https://jsfiddle.net/2zvLupsc/11/