|
In this article we will explore how to create custom music player using HTML5 Audio Tag.
Let's see how we can do this.
Step 1 : Add jQuery script in the header section of the aspx page.
<script src="../jquery/js/jquery-1.4.2.min.js" type="text/javascript"></script>
Step 2: Place below images inside body or form tag. As we don't have defaul HTML5 audio controls, the below images will be used to control the audio.
<img id="imgPrev" src="Images/media_skip_backward.png" alt="Prev" />
<img id="imgRewind" src="Images/media_seek_backward.png" alt="Rewind" />
<img id="imgPlay" src="Images/gtk_media_play_rtl.png" alt="Play" />
<img id="imgPause" src="Images/media_playback_pause.png" alt="Pause" />
<img id="imgForward" src="Images/media_seek_forward.png" alt="Forward" />
<img id="imgNext" src="Images/media_skip_forward.png" alt="Next" />
Step 3: Place below script in the aspx page which will Play, Pause, Previous, Rewind, Forward and Next of HTML5 audio control.
<script language="javascript">
//To Store Songs
var arr = new Array();
arr[0] = 'xyz.mp3';
arr[1] = 'pqr.MP3';
arr[2] = 'abc.mp3';
var i = 0;
var _loadAudioElement = function() {
$("<audio></audio>", {
src: arr[0],
id: "myAudio"
}).appendTo('#form1');
};
$(document).ready(function() {
_loadAudioElement();
});
$('#imgPrev').bind('click', function() {
//Play previos track only if myAudio object is defined and the track is not first track
if ($("#myAudio") && i > 0) {
document.getElementById('myAudio').pause();
$("#myAudio").currentTime = 0;
i = i - 1;
$("#myAudio").attr("src", arr[i]);
document.getElementById('myAudio').play();
}
});
$('#imgRewind').bind('click', function() {
document.getElementById('myAudio').currentTime -= 1.0;
});
$('#imgPlay').bind('click', function() {
document.getElementById('myAudio').play();
});
$('#imgPause').bind('click', function() {
document.getElementById('myAudio').pause();
});
$('#imgForward').bind('click', function() {
document.getElementById('myAudio').currentTime += 1.0;
});
$('#imgNext').bind('click', function() {
//Play previos track only if myAudio object is defined and the track is not last track
if ($("#myAudio") && i < arr.length) {
document.getElementById('myAudio').pause();
$("#myAudio").currentTime = 0;
i = i + 1;
$("#myAudio").attr("src", arr[i]); ;
document.getElementById('myAudio').play();
}
});
</ script>
This ends the article of custom music player using HTML5.
|