Script for Simple HTML5 Audio Player using Javascript

HTML5 enables developers to embed audio in HTML file and build simple HTML5 audio player using new HTML5 audio element with Javascript. Scripting audio is has never been so easy using Javascript and HTML5 new features.

Just like the case in playing video files in HTML, web programmers want to create custom HTML5 audio player controls like to play, stop (pause) or rewind audio or music file. In this case while you create visual items instead of HTML5 audio controls, by scripting audio elements using Javascript developers can enable web users to control audio element in HTML page by their own custom way.

To embed audio in HTML page and programming audio controls is possible by creating custom audio player and scripting audio using Javascript in HTML page. In this HTML5 tutorial I want to show how HTML developers can script HTML5 audio element using Javascript programming.

As a first step in building simple HTML5 audio player, I prefer to add new HTML5 tag audio with controls disabled. So web users will not be able to realize that there is an HTML5 audio element in the HTML page.
All you have to do is copy and paste on your HTML5 web page source code.


<audio id="audio"></audio>

Code

As the second step in this tutorial, make a list of songs that the visitor can choose from for listening music on your web page. I used the songs that exists by default in Sample Music directory of my Windows 7 installation. Kalimba, Maid with the Flaxen Hair and Sleep Away.


<a href="javascript:void();" onclick="SetHTML5AudioFile(this);" data-audio="Kalimba.mp3">Kalimba</a>

Code

For each song in the list, I defined an onClick event which triggers Javascript function SetHTML5AudioFile. Within this Javascript function, the HTML5 audio element source object is set using src property of the audio object.


function SetHTML5AudioFile(obj) {

 var path = "/audio/";

 var audio = document.getElementById("audio");

 var song = obj.getAttribute("data-audio");

 var audio_file_path = path + song;

 audio.src = audio_file_path;

}

Code

In order to simplify the below code please concantrate on:
var audio = document.getElementById("audio");
where HTML5 audio element in HTML page is fetched using getElementById, and
audio.src = audio_file_path;
where audio source file (music or sound file) URL path is set.

In the next step in this HTML5 audio tutorial you can now create three controls for building a simple HTML5 audio player. These controls are Play, Pause and Rewind buttons for corresponding functions in embedded HTML5 audio.


<button id="btnPlay" onclick="PlayAudioFile();"> > (Play)</button>

<button id="btnPause" onclick="PauseAudioFile();">|| (Pause)</button>

<button id="btnRewind" onclick="RewindAudioFile();"> |<< (Rewind)</button>

Code

Of course you can create fantastic images and layout for your custom HTML5 audio player. I simply added three buttons in HTML5 page.

What is important about these HTML buttons are they trigger custom Javascript functions defined in onClick event of each button.

For example, btnPlay triggers PlayAudioFile() Javascript function. Here is the source of the PlayAudioFile() function.
First audio element in HTML5 page is fetched by using document.getElementById.
Then audio object whose source is previously defined is started to play using audio element play() method.


function PlayAudioFile() {

 var audio = document.getElementById("audio");

 audio.play();

}

Code

As similar to Play control, Pause control also first gets the audio element created in HTML5 page. Then pause() method of the audio object is called as follows:


function PauseAudioFile() {

 var audio = document.getElementById("audio");

 audio.pause();

}

Code

Rewind control in our simple player is not different from above. First HTML5 programmers should get the audio object defined using <audio> tag within the HTML page. But then using audio object currentTime property, developers can set the current position of the audio file to the beginning by setting "currentTime = 0"
Here is the Javascript code which can be used for scripting HTML5 audio object for rewind.


function RewindAudioFile() {

 var audio = document.getElementById("audio");

 audio.pause(); // I prefer to pause audio player

 audio.currentTime = 0;

}

Code

Developers can also adjust volume by programming audio element in HTML5 page.

Please check a working sample for simple HTML5 audio player described in this HTML5 tutorial at Scripting HTML5 Audio Element using Javascript. And here is the HTML source for for this HTML5 tutorial demonstrating HTML5 audio element and scripting embedded audio in HTML file.


<script>
function SetHTML5AudioFile(obj) {

 var path = "/audio/";

 var audio = document.getElementById("audio");

 var song = obj.getAttribute("data-audio");

 var audio_file_path = path + song;

 audio.src = audio_file_path;



 txtSong.value = song;



 btnPlay.disabled = false;

 btnPause.disabled = true;

 btnRewind.disabled = true;

}

function PlayAudioFile() {

 var audio = document.getElementById("audio");

 audio.play();



 btnPlay.disabled = true;

 btnPause.disabled = false;

 btnRewind.disabled = false;

}

function PauseAudioFile() {

 var audio = document.getElementById("audio");

 audio.pause();



 btnPlay.disabled = false;

 btnPause.disabled = true;

 btnRewind.disabled = false;

}

function RewindAudioFile() {

 var audio = document.getElementById("audio");

 audio.pause();

 audio.currentTime = 0;



 btnPlay.disabled = false;

 btnPause.disabled = true;

 btnRewind.disabled = true;

}
</script>

<p>Choose your song to play using HTML5 audio element.</p>
<ul>
 <li><a href="javascript:void();" onclick="SetHTML5AudioFile(this);" data-audio="Kalimba.mp3">Kalimba</a></li>
 <li><a href="javascript:void();" onclick="SetHTML5AudioFile(this);" data-audio="Sleep Away.mp3">Sleep Away</a></li>
 <li><a href="javascript:void();" onclick="SetHTML5AudioFile(this);" data-audio="Maid with the Flaxen Hair.mp3">Maid with the Flaxen Hair</a></li>
</ul>
<audio id="audio"></audio>
<input id="txtSong" type="text" />
<button id="btnPlay" onclick="PlayAudioFile();" disabled="disabled"> > (Play)</button>
<button id="btnPause" onclick="PauseAudioFile();" disabled="disabled">|| (Pause)</button>
<button id="btnRewind" onclick="RewindAudioFile();" disabled="disabled"> |<< (Rewind)</button>

Code