Thursday, December 22

HTML5 - Custom Audio Player

In this article we will explore how to create custom music player using HTML5 Audio Tag.

HTML5 Custom Audio Player
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.
Like us if you find this post useful. Thanks!
Shibashish mohanty

4 comments:

  1. Thanks for your tutorial. I learned lots from here like a e-book. Keep up your work.
    html5 player| html5 video player

    ReplyDelete
  2. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    html5 video player

    ReplyDelete

Please don't spam, spam comments is not allowed here.

ShibashishMnty
shibashish mohanty