In the previous post HTML5 Audio element and its attributes i have explained about the HTML5 <audio> elements and its attributed. In this blog i will further explained the different methods associated with the audio element.

Methods :

1. load(): This method is used to re-load the audio element after changing the current source or updating the other settings of the audio element.

2. play(): This method is used to play the current audio file.

3. pause(): This method is used to pause the currently playing song.

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>
<div>
  <button type="button" id="load">Load</button>
  <button type="button" id="play">Play</button>
  <button type="button" id="pause">Pause</button>
</div>

JS code:

$(document).ready(function(){
var myAudio = document.getElementById("player");
	$("#load").click(function(){
  	$("#mp3").attr('src','http://www.nielsharbo.dk/test/audioplayer/stepahead.mp3');
    $("#ogg").attr('src','http://www.nielsharbo.dk/test/audioplayer/stepahead.ogg');
    myAudio.load();
  });
  $("#play").click(function(){
  	myAudio.play();
  });
   $("#pause").click(function(){
  	myAudio.pause();
  });
});

The working  example is in this link:

https://jsfiddle.net/nmvx67bq/18/