---

Search posts under HTML5:

---

Custom audio player in HTML5

How to create custom audio player using HTML5 audio element?

To create a custom audio player using HTML5 audio tag we can take help of JavaScript. In the below code snippet we have prepared a UI with three button elements, two range elements and a lable.

OUTPUT

    <audio src="Shiv_Ganga01.mp3" id="audio1">
        Audio is not supported.
    </audio>
    <div>
        <input type="button" id="btnPlay" value="Play" onclick="PlayNow()" />
        <input type="button" id="btnPause" value="Pause" onclick="PauseNow()" />
        <input type="button" id="btnMute" value="Mute" onclick="MuteNow()" />
        <br />

        Volume :
        <input type="range" min="0" max="1" step="0.1" id="volume"
            onchange="ChangeVolume()">
        <br />

        Time lapsed:
        <input type="range" step="any" id="seekbar"
            onchange="ChangeTheTime()">
        <label id="lblTime">-:--:--</label>
    </div>

    <script src="../Scripts/ModernizrBuild.js" type="text/javascript"></script>
    <script type="text/javascript">
        
        // check if audio is supported in the browser or not
        if (Modernizr.audio) {
            alert("Audio is supported");
        }
        else {
            alert("Audio is NOT supported");
        }

        // get the audio, volume and seekbar elements
        var audio = document.getElementById("audio1");
        var volumeRange = document.getElementById('volume');
        var seekbar = document.getElementById('seekbar');
        
        // attach timeupdate, durationchange event to the audio element to update the
        time in the lable and seekbar
        window.onload = function () {
            // go to http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-
            EventTarget-addEventListener to know more about addEventListener
            // (false is for bubbling and true is for event capturing)
            audio.addEventListener('timeupdate', UpdateTheTime, false);
            audio.addEventListener('durationchange', SetSeekBar, false);
            volumeRange.value = audio.volume;
        }

        // fires when volume element is changed
        function ChangeVolume() {
            var myVol = volumeRange.value;
            audio.volume = myVol;
            if (myVol == 0) {
                audio.muted = true;
            } else {
                audio.muted = false;
            }
        }

        // fires when page loads, it sets the min and max range of the video
        function SetSeekBar() {
            seekbar.min = 0;
            seekbar.max = audio.duration;
        }

        // fires when seekbar is changed
        function ChangeTheTime() {
            audio.currentTime = seekbar.value;
        }

        // fires when audio plays and the time is updated in the audio element, this
        writes the current duration elapsed in the label element
        function UpdateTheTime() {
            var sec = audio.currentTime;
            var h = Math.floor(sec / 3600);
            sec = sec % 3600;
            var min = Math.floor(sec / 60);
            sec = Math.floor(sec % 60);
            if (sec.toString().length < 2) sec = "0" + sec;
            if (min.toString().length < 2) min = "0" + min;
            document.getElementById('lblTime').innerHTML = h + ":" + min + ":" + sec;
            seekbar.min = audio.startTime;
            seekbar.max = audio.duration;
            seekbar.value = audio.currentTime;
        }

        // fires when Play button is clicked
        function PlayNow() {
            if (audio.paused) {
                audio.play();
            } else if (audio.ended) {
                audio.currentTime = 0;
                audio.play();
            }
        }
        // fires when Pause button is clicked
        function PauseNow() {
            if (audio.play) {
                audio.pause();
            }
        }
        // fires when Mute button is clicked
        function MuteNow() {
            if (audio.muted) {
                audio.muted = false;
                volumeRange.value = audio.volume;
            }
            else {
                audio.muted = true;
                volumeRange.value = 0;
            }
        }
    </script>

In the above code snippet, notice that we have used a .js file called ModernizrBuild.js that has been downloaded from http://www.modernizr.com/download/ website.

A little of Modernizr

As per the website (http://www.modernizr.com) Modernizr is an open-source JavaScript library that helps us build the next generation of HTML5 and CSS3-powered websites.

It basically helps us to check if a particular feature of HTML5 is supported in the browser or not. To know more about the Modernizr, please visit its website as mentioned above.

Coming to the above code snippet, in this case we are using Modernizr to check  if audio is supported into the browser from which our page is browsed. If not, on the page loads user gets “Audio is NOT supported” as an alert.

As soon as the page loads, it checks for the Modernizr.audio property, if this is true it means that audio is supported in the browser that is being used to browse this page.

Next we have found out the audio, volume and seekbar elements on the page and stored them in the variable.

On load of the window we have set the timeupdate and durationchange event of the audio element that helps us to update the time elapsed for audio play in the label element and setting the min and max range for the seekbar range element. We are also setting the volume element value to the default audio element volume that will be the system default volume.

ChangeVolume()

On change of the volume range element, we have set audio volume to the value selected by the user. If the value selected by the user is 0, we simply mute the audio otherwise unmute it.

SetSeekBar()

In this function, we are setting the minimum and maximum range of the seekbar range element.

ChangeTheTime()

In this function, we are setting the current time of the audio element to the seekbar selected value by the user.

UpdateTheTime()

In this function, we are simply getting the current position of the audio play and getting the hour, minute and seconds lapsed and writing in the label element. We are also setting the seekbar min, max and value to the audio startTime, duration and currentTime values respectively so that the seekbar value is in sync with the audio running position.

PlayNow()

This function simply checks if audio is paused, it plays (by calling the play() method on audio element) the audio else if it is ended already then change its position to 0 (ie beginning) and plays it.

PauseNow()

This function checks if the audio is already playing, if yes then call pause() function that pauses the audio.

MuteNow()

In this function, we check if the audio is muted already, then set muted property of the audio element to false so that it will be unmuted and set the volume range element to the audio volume. If the audio is not muted then it mutes and set the volume range element to 0.