HTML5 - Custom Audio Player

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. Like us if you find this post useful. Thanks!

Shibashish mohanty