“Even a mistake may turn out to be the one thing necessary to a worthwhile achievement.” --Henry Ford

How To: Create a Custom HTML5 Audio Player

$count: 355

The HTML5 audio tag is great. You can add it directly to any web page to play an audio file without any extra programming such as javascript or any third-party application like Adobe Flash Player. However, each browsers controls are different. The audio controls in Microsoft Internet Explorer look very different from that of Firefox or Google Chrome. And, these native controls do not have any built-in playlist capabilities. For example, there are no controls to navigate to the next song or track nor go back to a previous song or track. To have these features and keep the same look in any HTML5 browser we will have to create our own. There are a lot of ways you can accomplish this, Here is one solution using jQuery and the jQuery User Interface (jQuery UI).

How to create it

Step one:
Start by adding a <div> tag to your HTML. Be sure to include a unique id. I used "ap_container_1".
Also make sure to include both the jQuery library and the jQuery UI library (see Related articles below).

<div id="ap_container_1"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</body>
</html>

Now start a new javascript file and declare some variables that will be used within the jQuery script.

```
vavar iTrack = 0,
```
```
    isPlaying = false,
```
```
    cpa = 0,
```
```
    duration = 0,
```
```
    sp = 0,
```
```
    tracks = [],
```
```
    trackCount = 0,
```
```
    aS,
```
```
    $title,
```
```
    $album,
```
```
    $artist,
```
```
    $play,
```
```
    $paus,
```
```
    $dura,
```
```
    $prog,
```
```
    $time,
```
```
    $mute,
```
```
    $unmu,
```

Why do some variables have a $ sign in front and some do not? The variables with the $ sign signify that that variable holds a jQuery object and the other variables hold mixed values but no jQuery object.

Next, create a function to determine if the browser supports the HTML5 <audio> tag and which formats.

```
    audioSupport = function() {
```

        var elem = document.createElement('audio'),

```
            bool = false;
```
```
        try {
```

            if(bool = !!elem.canPlayType) {

                bool = new Boolean(bool);

                bool.ogg = elem.canPlayType('audio/ogg; codecs="vorbis"');

                bool.mp3 = elem.canPlayType('audio/mpeg;');

                bool.wav = elem.canPlayType('audio/wav; codecs="1"');

                bool.m4a = (elem.canPlayType('audio/x-m4a;') || eleam.canPlayType('audio/aac;'));

```
            }
```
```
        } catch(e) { }
```
```
        return bool;
```
```
    };
```

What is happening in this function?

line 20: An audio element is created and assigned to the variable named elem (short for element).
line 21: Declare a variable named bool (short for Boolean) and assign it a value of false.
line 23: Check if the audio element can play any type of audio file and assign the result to bool.
line 24: Create a new Boolean object and assign it to bool setting the value from bool.
lines 25-28: Check each file format to determine if it is supported and extend the Boolean object.
line 31: Return the Boolean object assigned to the variable bool.

Now we call the audioSupport function we just created and assign the result to the variable named "aS" and check the value at the same time.

```
if(aS = audioSupport()) {
```

If the browser supports the HTML5 <audio> tag and can play at least one of the four audio file formats then we start to build the custom audio player interface. The majority of the remaining code is all variable declarations and assignment. We will create functions in this manner as well (like the audioSupport function above).

```
var manualSeek = false,
```
```
    audio = $('<audio/>').on({
```
```
        'play': function() {
```
```
            $paus.show();
```
```
            $play.hide();
```
```
        },
```
```
        'pause': function() {
```
```
            isPlaying = false;
```
```
            showPlay();
```
```
        },
```
```
        'playing': function() {
```
```
            isPlaying = true;
```
```
        },
```
```
        'ended': function() {
```
```
            showPlay();
```

            trackCount ? playNext('ended') : resetMedia();

```
        },
```
```
        'loadedmetadata': function() {
```

            if(isFinite(audio.duration)) {

                duration = audio.duration;

```
            }
```

            updateTimes(audio.duration, audio.currentTime);

            if($prog.slider('option', 'disabled')) {

                $prog.slider('option', 'disabled', false);

```
            }
```
```
        },
```
```
        'timeupdate': function() {
```

            updateTimes(audio.duration, audio.currentTime);

```
            if(!manualSeek) {
```

                $prog.slider('value', cpa);

```
            }
```
```
        }
```
```
    }).get(0),
```

    ext = aS.mp3 ? '.mp3' : aS.ogg ? '.ogg' : '',

What this code is doing:

line 35: Create an audio element and start event handlers. The jQuery function "on" is the preferred method of assigning object event handlers. These event handlers are triggered when the object receives or generates the specified event. In this case it is the audio object Media events:
- 'play' - Script to be run when the media is ready to start playing
- 'pause' - Script to be run when the media is paused either by the user or programmatically
- 'playing' - Script to be run when the media actually has started playing
- 'ended' - Script to be run when the media has reach the end
- 'loadedmetadata' - Script to be run when meta data (like dimensions and duration) are loaded
- 'timeupdate' - Script to be run when the playing position has changed
line 66: Get the DOM node instead of the jQuery object.
line 67: Assign a value to the variable named "ext" (short for extension). The variable named "aS" contains the extended Boolean object created in and returned by the audioSupport function as assigned on line 34 above. There are four possible values for each of the file formats in the extended Boolean object; blank or undefined, either of which will evaluate false, or "maybe" or "possibly" which will evaluate true.

Next we will start to define the visible components of the interface. I will warn you right now that this section of code can get confusing and a little tricky because we will be nesting items together and you have to pay close attention to make sure things are where you expect them to be.

    mp = $('#ap_container_1').append($('<div/>', {

        'class': 'ap-info-panel ui-widget ui-widget-content ui-corner-all'

```
    }).append($title = $('<h3/>', {
```
```
        'class': 'ap-title'
```
```
    })).append($album = $('<h4/>', {
```
```
        'class': 'ap-album'
```
```
    })).append($artist = $('<h5/>', {
```
```
        'class': 'ap-artist'
```
```
    }))).append($('<div/>', {
```

        'class': 'ap-player ui-widget ui-widget-content ui-corner-all'

```
    }).append($('<ul/>', {
```
```
        css: {
```
```
            'list-style': 'none',
```
```
            margin: 0,
```
```
            padding: 0
```
```
        },
```
```
        'class': 'ap-controls-content',
```
```
        click: function(e) {
```

            var t = e.target, $t = $(t), btn;

            if(t.nodeName.toLowerCase() === 'a') {

```
                e.preventDefault();
```

                btn = $t.parent().data('btn');

```
                $t.blur();
```

                if(btn === 'prev') {playPrev();}

                if(btn === 'play') {audio.play();}

                if(btn === 'paus') {audio.pause();}

                if(btn === 'next') {playNext('click');}

```
                if(btn === 'mute') {
```
```
                    audio.muted = true;
```
```
                    $unmu.show();
```
```
                    $mute.hide();
```
```
                }
```
```
                if(btn === 'unmu') {
```

                    audio.muted = false;

```
                    $mute.show();
```
```
                    $unmu.hide();
```
```
                }
```
```
            }
```
```
        },
```
```
        dblclick: function(e) {
```

            var t = e.target, $t = $(t), btn;

            if(t.nodeName.toLowerCase() === 'a') {

```
                e.preventDefault();
```

                btn = $t.parent().data('btn');

```
                $t.blur();
```

                if(btn === 'prev') {_playPrev();}

```
            }
```
```
        }
```
```
    }).append($('<li/>', {
```

        'class': 'ap-controls ap-prev ui-state-default ui-corner-all'

    }).data('btn', 'prev').append($('<a/>', {

        'class': 'ap-button ui-icon ui-icon-seek-first',

```
        title: 'prev',
```
```
        href: '#',
```
```
        text: 'Prev'
```
```
    }))).append($play = $('<li/>', {
```

        'class': 'ap-controls ap-play ui-state-default ui-corner-all'

    }).data('btn', 'play').append($('<a/>', {

        'class': 'ap-button ui-icon ui-icon-play',

```
        title: 'play',
```
```
        href: '#',
```
```
        text: 'Play'
```
```
    }))).append($paus = $('<li/>', {
```
```
        css: {
```
```
            display: 'none'
```
```
        },
```

        'class': 'ap-controls ap-pause ui-state-default ui-corner-all'

    }).data('btn', 'paus').append($('<a/>', {

        'class': 'ap-button ui-icon ui-icon-pause',

```
        title: 'pause',
```
```
        href: '#',
```
```
        text: 'Pause'
```
```
    }))).append($('<li/>', {
```

        'class': 'ap-controls ap-next ui-state-default ui-corner-all'

    }).data('btn', 'next').append($('<a/>', {

        'class': 'ap-button ui-icon ui-icon-seek-end',

```
        title: 'next',
```
```
        href: '#',
```
```
        text: 'Next'
```
```
    }))).append($mute = $('<li/>', {
```

        'class': 'ap-controls ap-mute ui-state-default ui-corner-all'

    }).data('btn', 'mute').append($('<a/>', {

        'class': 'ap-button ui-icon ui-icon-volume-on',

```
        title: 'mute',
```
```
        href: '#',
```
```
        text: 'mute'
```
```
    }))).append($unmu = $('<li/>', {
```
```
        css: {
```
```
            display: 'none'
```
```
        },
```

        'class': 'ap-controls ap-unmute ui-state-default ui-corner-all'

    }).data('btn', 'unmu').append($('<a/>', {

        'class': 'ap-button ui-icon ui-icon-volume-off',

```
        title: 'unmute',
```
```
        href: '#',
```
```
        text: 'unmute'
```
```
    })))).append($('<div/>', {
```
```
        'class': 'ap-progress'
```
```
    }).append($('<div/>', {
```
```
        css: {
```
```
            position: 'relative',
```
```
            'padding-bottom': '2px'
```
```
        }
```
```
    }).append($time = $('<div/>', {
```
```
        'class': 'ap-time ap-current',
```
```
        html: '0:00'
```
```
    })).append($dura = $('<div/>', {
```
```
        'class': 'ap-time ap-duration',
```
```
        html: '0:00'
```
```
    }))).append($('<div/>', {
```
```
        css: {padding: '0 9px 0 7px'},
```
```
        'class': 'ap-progress-content'
```
```
    }).append($prog = $('<div/>', {
```
```
        'class': 'ap-progress-slider'
```
```
    }).slider({
```
```
        disabled: true,
```
```
        max: 100,
```
```
        value: 0,
```
```
        step: 0.01,
```
```
        orientation: 'horizontal',
```
```
        range: 'min',
```
```
        animate: true,
```
```
        slide: function(e, ui) {
```
```
            manualSeek = true;
```
```
            if(sp > 0) {
```

                var percent = ui.value * (100 / sp);

                if((typeof audio.seekable === 'object') && (audio.seekable.length > 0)) {

                    audio.currentTime = percent * audio.seekable.end(audio.seekable.length-1) / 100;

                } else if(audio.duration > 0 && !isNaN(audio.duration)) {

                    audio.currentTime = percent * audio.duration / 100;

```
                }
```
```
            } else {
```
```
                resetMedia();
```
```
            }
```
```
        },
```
```
        stop: function(e, ui) {
```
```
            manualSeek = false;
```
```
        }
```
```
    }))))),
```

There are a lot of things happening in this code snippet. This is a great example of the power and flexibility of jQuery. We are able to create elements, set all the different settings and control features in one statement because jQuery allows chaining (the ability to chain more than one function at a time). Let me explain some of the code.

All of this code, lines 68 - 206, is appended to the HTML element id "ap_container_1" from step one.
lines 68-76: Create the information panel (not visible in the example above) which would show title, album, and artist information. This information would come from the source object described later.
- lines 68-70: Create the info panel div element and add the appropriate classes.
- line 70: Create an h3 element, and append it to the info panel div, to show title information. By assigning this jQuery object to a variable we can re-use it elsewhere in the code.
- line 71: Add the appropriate class to the element
- lines 72-76: Repeat of lines 70-72. Create elements for album and artist information, append them to the info panel div, and add the appropriate classes.
  Here is what lines 68 - 76 produce so you can see a more clear picture of how this works.
```
<div class="ap-info-panel ui-widget ui-widget-content ui-corner-all">
  <h3 class="ap-title"></h3>
  <h4 class="ap-album"></h4>
  <h5 class="ap-artist"></h5>
</div>
```
  Sample output - line breaks and spacing added for clarity
lines 76-206: Create the custom audio player controls and provide functionality.
lines 76-78: Create a div element as a container for the audio player controls and add appropriate classes.
lines 78-116: Create a unordered list element, sets in-line style, adds appropriate classes, and define event handlers for click and double click mouse events.
lines 116-164: Create list item elements, appended to the unordered list, and anchor elements, appended to each list item element, for each of the "button" controls, such as Play, Pause, Mute, etc.
lines 164-206: Create elements for the progress section of the custom audio player. Including a jQuery UI slider widget control.

We need some helper functions and an object to perform some repetitive tasks and format output.

```
    showPlay = function() {
```
```
        $play.show();
```
```
        $paus.hide();
```
```
    },
```
```
    timeFormat = {
```
```
        showHour: true,
```
```
        showMin: true,
```
```
        showSec: true,
```
```
        padHour: false,
```
```
        padMin: false,
```
```
        padSec: true,
```
```
        sepHour: ":",
```
```
        sepMin: ":"
```
```
    },
```
```
    convertTime = function(s) {
```
```
        s = isNaN(s) ? 0 : s;
```
```
    var myTime = new Date(s * 1000),
```
```
        hour = myTime.getUTCHours(),
```
```
        min = myTime.getUTCMinutes(),
```
```
        sec = myTime.getUTCSeconds(),
```

        strHour = (timeFormat.padHour && hour < 10) ? "0" + hour : hour,

        strMin = (hour > 0 || (timeFormat.padMin && min < 10)) ? "0" + min : min,

        strSec = (timeFormat.padSec && sec < 10) ? "0" + sec : sec;

        return ((timeFormat.showHour && hour > 0) ? strHour + timeFormat.sepHour : "") + ((timeFormat.showMin) ? strMin + timeFormat.sepMin : "") + ((timeFormat.showSec) ? strSec : "");

```
    },
```
```
    updateTimes = function(d, c) {
```

        var r = parseInt(d, 10) - parseInt(c, 10);

        cpa = (duration > 0) ? 100 * c / duration : 0;

        if((typeof audio.seekable === 'object') && (audio.seekable.length > 0)) {

            sp = (duration > 0) ? 100 * audio.seekable.end(audio.seekable.length-1) / duration : 100;

```
        }
```
```
        r = (r < 0) ? -r : r;
```
```
        $dura.text(convertTime(r));
```
```
        $time.text(convertTime(c));
```
```
    },
```

Did you notice we are using some of the variables that hold jQuery objects?

lines 207-210: Creates a function, named showPlay, to show the play control and hide the pause control. The functions .show() and .hide() are jQuery library functions.
lines 211-220: Creates an object named timeFormat. This object will help format the times displayed.
lines 221-231: Creates a function, named convertTime, to convert seconds into a formatted time string.
lines 232-241: Creates a function, named updateTimes, to update the duration "d" and the current time "c".

The next section of code defines action functions for media selection and playback.

```
    mediaStart = function() {
```
```
        audio.currentTime = 0;
```
```
    },
```
```
    resetMedia = function() {
```
```
        audio.pause();
```
```
        setTimeout(function() {
```
```
            $prog.slider('value', 0);
```
```
        }, 0);
```
```
        mediaStart();
```
```
    },
```
```
    playPrev = function() {
```

        isPlaying ? mediaStart() : _playPrev();

```
    },
```
```
    playNext = function( s ) {
```

        (s === 'ended') ? _playNextEnded() : _playNext();

```
    },
```
```
    _playPrev = function() {
```
```
        if( trackCount ) {
```
```
            --iTrack;
```

            if( trackCount && iTrack ) {

```
                if( isPlaying ) {
```

                    _playTrack( iTrack );

```
                } else {
```

                    _loadTrack( iTrack );

```
                }
```
```
            } else {
```
```
                _loadFirstTrack();
```
```
            }
```
```
        } else {
```
```
            resetMedia();
```
```
        }
```
```
    },
```
```
    _playNextEnded = function() {
```
```
        if( trackCount ) {
```
```
            ++iTrack;
```

            if ( iTrack < trackCount ) {

```
                _playTrack( iTrack );
```
```
            } else {
```
```
                _loadFirstTrack();
```
```
            }
```
```
        } else {
```
```
            resetMedia();
```
```
        }
```
```
    },
```
```
    _playNext = function() {
```
```
        if( trackCount ) {
```
```
            ++iTrack;
```
```
            if( iTrack < trackCount ) {
```
```
                if( isPlaying ) {
```

                    _playTrack( iTrack );

```
                } else {
```

                    _loadTrack( iTrack );

```
                }
```
```
            } else {
```
```
                if( isPlaying ) {
```
```
                    _loadFirstTrack();
```
```
                } else {
```

                    iTrack = trackCount - 1;

                    _loadTrack( iTrack );

```
                }
```
```
            }
```
```
        } else {
```
```
            resetMedia();
```
```
        }
```
```
    },
```

Media Functions

lines 242-244: Create the mediaStart function to set or reset the current time of the loaded media.
lines 245-251: Create the resetMedia function to reset the currently loaded media.
lines 252-306: Create media selection functions based on control activation (event handlers).

Now we will complete the remainder of the code:

```
    _loadFirstTrack = function() {
```
```
        isPlaying = false;
```
```
        iTrack = 1;
```
```
        showPlay();
```
```
        _loadTrack( iTrack );
```
```
    },
```
```
    _loadTrack = function(i) {
```
```
        var title, album, artist;
```

        title = tracks[i].title ? tracks[i].title : '&nbsp;';

        album = tracks[i].album ? tracks[i].album : '&nbsp;';

        artist = tracks[i].artist ? tracks[i].artist : '&nbsp;';

```
        $title.html(title);
```
```
        $album.html(album);
```
```
        $artist.html(artist);
```

        audio.src = tracks[i].file + ext;

```
    },
```
```
    _playTrack = function(i) {
```
```
        _loadTrack(i);
```
```
        audio.play();
```
```
    },
```
```
    getTracks = function(src) {
```
```
        if($.isArray(src)) {
```
```
            tracks = src;
```
```
        } else {
```
```
            tracks = [src];
```
```
        }
```
```
        _setTracks();
```
```
    },
```
```
    _setTracks = function() {
```
```
        if( tracks && tracks.length ) {
```

            if( tracks[0].file && tracks[0].file.length ) {

```
                tracks.unshift( {  } );
```
```
            }
```

            trackCount = tracks.length > 2 ? tracks.length : 0;

```
            _loadFirstTrack();
```
```
        }
```
```
    };
```

    $('#ap_container_1 .ap-controls').hover(

        function() { $(this).addClass('ui-state-hover'); },

        function() { $(this).removeClass('ui-state-hover'); }

```
    );
```
```
} else {
```

    $('#ap_container_1').html('Your browser does not support the HTML5 audio tag.');

```
}
```

We need a way to load the media, play the media, and get the media source.

lines 307-312: Create the _loadFirstTrack function to load the first track from the source.
lines 313-322: Create the _loadTrack function to load the indexed track from the source.
lines 323-326: Create the _playTrack function to load and play the indexed track.
lines 327-334: Create the getTracks function to get the media source.
- If the source being passed into this function (src) is an array then assign it to the variable named tracks else we assume the src is an object so we place the object inside an array declaration and assign that to the variable named tracks.
- Now that tracks is assigned, we get the number of items in the array and assign that to trackCount.

That completes the variable declaration portion of the code.

lines 344-347: Set a hover action on the controls. The function .hover is a jQuery library function.
line 318: Call the getTracks function. In this example we are passing in a JSON style object.
lines 348-350: Completes the if statement from line 34. If the HTML5 audio tag is not supported, we set and display the message. Then end the jQuery script.

Show a little style

The code is complete but it is not displaying correctly, right? We need to use a little CSS.
Create a CSS file and add the following:

```
.ap-player,
```
```
.ap-info-panel {
```
```
	position: relative;
```
```
	width: 300px;
```
```
	margin: 0 auto;
```
```
	padding: 20px;
```
```
}
```
```
.ap-info-panel {
```
```
	display: none;
```
```
	width: 320px;
```
```
	padding: 5px 10px 7px;
```
```
}
```
```
.ap-title,
```
```
.ap-album,
```
```
.ap-artist {
```
```
	margin: 0;
```
```
	padding: 0;
```
```
}
```
```
.ap-album {
```
```
	font-style: italic;
```
```
}
```
```
.ap-progress {
```
```
	position: absolute;
```
```
	top: 17px;
```
```
	left: 114px;
```
```
	right: 54px;
```
```
}
```
```
.ap-controls {
```
```
	position: relative;
```
```
	display: inline-block;
```
```
	margin: 2px;
```
```
	padding: 4px 0;
```
```
}
```
```
.ap-button {
```
```
	margin: 0 4px;
```
```
}
```
```
.ap-time {
```
```
	width: 50%;
```
```
	font-size: 0.8em;
```
```
	cursor: default;
```
```
}
```
```
.ap-current {
```
```
	position: relative;
```
```
	top: 0;
```
```
}
```
```
.ap-duration {
```
```
	position: absolute;
```
```
	top: 0;
```
```
	right: 2px;
```
```
	text-align: right;
```
```
}
```
```
.ap-mute,
```
```
.ap-unmute {
```
```
	position: absolute;
```
```
	top: 18px;
```
```
	right: 20px;
```
```
}
```

How To Use It

Now that we have the script and things look correct, you need to know a little bit more about how to actually use it. The getTracks function (line 318 above) is the only line you should have to modify to add whatever media you want for your web page. In the example above we passed in a JSON style object. We can also pass in an array. See:

getTracks( { "title":"The Title","album":"The Album","artist":"The Artist","file":"path/to/the/file" } );

getTracks( { { "file":"path/to/file1" }, { "file":"path/to/file2" } ] );

You can use any combination of the following four options:

"title"
"album"
"artist"
"file"

The only required option is "file". It can be any location accessible by your web browser and there must be a .mp3 and a .ogg file of the same basename in the same location. For example; In the code, on line 318, you will notice that the "file" is listed as "/how_to/song". What that means is that on the web host server, relative to the location of the web page, there is a directory named "how_to" and in that directory there are two files. One named "song.mp3" and one named " song.ogg". If you do not have both file formats you are limiting your audience (see the related article "Convert Audio Files for HTML5 Playlist" for more information).

Download

Get the complete commented source code (zip file) here.

The purpose of this article was to show you how to Create a Custom HTML5 Audio Player interface. The related article "Create a Dynamic Playlist for HTML5 Audio (Advanced)" will expand on this article and show you how to use this custom audio player interface with a dynamic playlist.

jon hall

- Resources and Solutions