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