To keep things simple, we’re going to use a minimal subset of the HTML5 Media Element API. This is available in a number of recent browsers, such as Firefox 3.5. We’ll implement it as a compatibility layer so that another playback mechanism, such as Flash Player, could be substituted easily. For this recipe, we need the following from our audio API:

Assuming an HTML5 audio element exists in the document, here’s the compatibility layer code:

var $audio = $('audio'), audioEl = $audio[0];
var audio = {
        currentTime: 0,
        duration: secondsTotal,
        volume: 0.5,
        set: function(key, value) {
                this[key] = value;
                try { audioEl[key] = value; } catch(e) {}
                if (key == 'currentTime') {
                        $audio.trigger('timeupdate'),
                }
                if (key == 'volume') {
                        $audio.trigger('volumechange'),
                }
        },
        play: function() {
                audioEl.play && audioEl.play();
        },
        pause: function() {
                audioEl.pause && audioEl.pause();
        }
};
$audio.bind('timeupdate', function() {
        audio.currentTime = audioEl.currentTime;
});
audio.set('currentTime', 0);
audio.set('volume', 0.5);

Let’s use the CSS class mplayer for our music player. This will be the class for our main <div>, and will be used as a prefix in all our CSS rules and jQuery selectors. Here’s the CSS and HTML for our bare player:

.mplayer { position: relative; width: 40%; height: 2.5em; margin: 50px 0 100px 0; }

<div class="mplayer ui-widget"></div>

I’ve set the width to 40 percent so that we can see we have a flexible player from the ground up. Just resize your browser and watch the player resize. This will be even easier to see when the player isn’t empty.

In addition to the mplayer class, our main <div> gets a ui-widget class. This is to ensure elements within it get styled appropriately. See the next chapter for more on theming with jQuery UI CSS Framework classes.

An empty <div> and no JavaScript make for an invisible and quiet music player. Let’s add a play button and get our music on.

There’s not yet a button plugin in jQuery UI. We can make do in the meantime with an a element and some semantically named jQuery UI CSS Framework icon classes:

Here’s the CSS:

.mplayer .buttons-container { position: absolute; top: 10px; left: 10px; }
.mplayer .buttons-container .playpause { height: 1.2em; width: 1.2em; display: block;
        position: relative; top: −2px; left: −2px; }
.mplayer .buttons-container .playpause .ui-icon { margin: −1px 0 0 −1px; }
.mplayer .playpause .ui-icon-play, .paused .playpause .ui-icon-pause { display: none; }
.paused .playpause .ui-icon-play { display: block; }

Here’s the HTML:

<div class="mplayer ui-widget">
        <div class="buttons-container">
                <a class="playpause ui-state-default ui-corner-all" href="#">
                        <span class="ui-icon ui-icon-play"></span>
                        <span class="ui-icon ui-icon-pause"></span>
                </a>
        </div>
</div>

With a couple CSS rules, we’re able to have one button serve as both the pause and the play button. With the previous CSS, only one icon, play or pause, will be visible at once, depending on whether our div.mplayer has the paused class. But the same HTML allows for a different designer to decide that both icons will be visible at once, but perhaps with different colors and opacity, depending on whether the song is playing.

Here’s the JavaScript:

$('.mplayer .playpause').click(function() {
        var player = $(this).parents('.mplayer'),
        if (player.is('.paused')) {
                $('.mplayer').removeClass('paused'),
                audio.play();
        } else {
                $('.mplayer').addClass('paused'),
                audio.pause();
        }
        return false;
})
.hover(function() { $(this).addClass('ui-state-hover'), },
        function() { $(this).removeClass('ui-state-hover'), })
.focus(function() { $(this).addClass('ui-state-focus'), })
.blur(function() { $(this).removeClass('ui-state-focus'), });
$('.mplayer').addClass('paused'),

Our button needs JavaScript to do the following:

Don’t forget the return false; since our button is an <a> with an href of #.

With jQuery, jQuery UI, and the UI Lightness theme loaded, Figure 14-1 shows what our music player looks like with just the play/pause button.

Figure 14-1. Play and pause button

If you click the play button, it should change to a pause button. If you click again, it should change back. Also notice that you get a hover effect, as well as a visual cue, when tabbing in and out of the button with the keyboard. If you’re in a browser that supports the audio element and it has a src attribute that points to a supported music file, you should even hear something when you click play.

The next step is to add two labels, one that shows the current point we’re at in the song and another that shows the total time in the song. These are pretty straightforward.

Here’s the CSS:

.mplayer .currenttime { position: absolute; top: 0.6em; left: 2.2em;
        width: 3em; text-align: center; background: none; border: none; }
.mplayer .duration { position: absolute; top: 0.6em; right: 2.2em;
        width: 3em; text-align: center; background: none; border: none; }

Here’s the HTML:

<div class="mplayer ui-widget">
        <div class="buttons-container">
                <a class="playpause ui-state-default ui-corner-all" href="#">
                        <span class="ui-icon ui-icon-play"></span>
                        <span class="ui-icon ui-icon-pause"></span>
                </a>
        </div>
        <span class="currenttime ui-state-default"></span>
        <span class="duration ui-state-default"></span>
</div>

Here’s the JavaScript:

function minAndSec(sec) {
        sec = parseInt(sec);
        return Math.floor(sec / 60) + ":" + (sec % 60 < 10 ? '0' : '') + 
Math.floor(sec % 60);
}
$('.mplayer .currenttime').text(minAndSec(audio.currentTime));
$('.mplayer .duration').text(minAndSec(secondsTotal));

$audio
        .bind('timeupdate', function(event) {
                $('.mplayer .currenttime').text(minAndSec(audio.currentTime));
        });

We’ve put the current time on the left and total time on the right, leaving room in the middle for the track bar (see Figure 14-2). We want the current time to always reflect where we are in the song, so we bind to audio’s timeupdate notification event. The event itself doesn’t give us the currentTime. For that, we go to the audio.currentTime property. We need a small function to format it as minutes:seconds, since times in the audio layer are in seconds.

Figure 14-2. Current and total time labels

Now we’re getting somewhere. Next is our track bar. It consists of a simple <div>, but we’re going to give it a track and handle by calling .slider() on it. We’ll use Slider’s range: 'min' option so that the region between 0:00 and the current time will be shaded. Oh yeah, and we have to set max to the duration of the song, in seconds. So if it’s a 3.5-minute song, we’ll set max to 210. No calculations are needed, because audio.duration already gives us the total number of seconds in the song. The other defaults for Slider work for us here: max: 0, step: 1.

Here’s the CSS:

.mplayer .track { top: 11px; margin: 0 5.2em; margin-top: −2px; 
        border-style: none; }
.mplayer .track .ui-slider-handle { border-left-width: 0; height: 1.1em; 
        top: −0.24em; width: 2px; margin-left: −3px; }

Here’s the HTML:

<div class="mplayer ui-widget">
        <div class="buttons-container">
               <a class="playpause ui-state-default ui-corner-all" href="#">
                       <span class="ui-icon ui-icon-play"></span>
                       <span class="ui-icon ui-icon-pause"></span>
               </a>
        </div>
        <span class="currenttime ui-state-default"></span>
        <div class="track"></div>
        <span class="duration ui-state-default"></span>
</div>

Here’s the JavaScript:

$('.mplayer .track')
        .slider({
                range: 'min',
                max: audio.duration,
                slide: function(event, ui) {
                        $('.ui-slider-handle', this).css('margin-left',
                                (ui.value < 3) ? (1 - ui.value) + 'px' : ''),
                        if (ui.value >= 0 && ui.value <= audio.duration) {
                                audio.set('currentTime', ui.value);
                        }
                },
                change: function(event, ui) {
                        $('.ui-slider-handle', this).css('margin-left',
                                (ui.value < 3) ? (1 - ui.value) + 'px' : ''),
               }
        })
        .find('.ui-slider-handle').css('margin-left', '0').end()
        .find('.ui-slider-range').addClass('ui-corner-left').end();

$audio
        .bind('timeupdate', function(event) {
                $('.mplayer .track').each(function() {
                        if ($(this).slider('value') != audio.currentTime) {
                                $(this).slider('value', audio.currentTime);
                        }
               });
               $('.mplayer .currenttime').text(minAndSec(audio.currentTime));
        });

Slider handles are center aligned, meaning at the min value, the left half of the handle goes beyond the left of the slider, and when at the max point, the right half of the handle goes beyond the right of the slider. We already made the handle skinnier than normal and got rid of the left border so it sticks to the range a little better. But we still need a little bit of adjustment when near the min. That’s what these lines are for:

slide: function(event, ui) {
      $('.ui-slider-handle', this).css('margin-left',
               (ui.value < 3) ? (1 - ui.value) + 'px' : ''),
      if (ui.value >= 0 && ui.value <= audio.duration) {
               audio.set('currentTime', ui.value);
      }
},
change: function(event, ui) {
        $('.ui-slider-handle', this).css('margin-left',
                (ui.value < 3) ? (1 - ui.value) + 'px' : ''),
}

Also, in the slide callback, we’re checking whether the value is valid before telling the audio to go to that point. This is a case where the user is dragging the slider around, and we need to move around the playback point in the song. This allows for “scrubbing.” If we only handled this in the change callback, the audio wouldn’t change until the user let go of the mouse, after clicking or dragging the slider handle to a new point. Figure 14-3 shows the slider we’ve created.

Figure 14-3. Slider track for song position

Get ready for some fun. What if I told you we can call two different jQuery UI plugins on the same element? It works really well in this case. We already have a track bar, which we created as a <div>, calling .slider() on it. In addition to adding a ui-slider class to our .track element, the jQuery UI Slider plugin created and appended a couple elements to our track, a slider handle (.ui-slider-handle) and a slider range (.ui-slider-range), since we specified range: 'min'. Fortunately, that’s as much as it did to our <div>. It’s still a <div>, and it’s still our <div>. So, let’s dual-purpose it and call .progressbar() on it. This will make it so our buffer display runs behind the range display that shows our current time. Check this out.

Here’s the CSS:

.mplayer .ui-progressbar .ui-progressbar-value { border-style: none; }

Here’s the JavaScript:

var secondsCached = 0, cacheInterval;
$('.mplayer .track')
        .progressbar({
                value: secondsCached / secondsTotal * 100
        })
        .find('.ui-progressbar-value').css('opacity', 0.2).end();

cacheInterval = setInterval(function() {
        secondsCached += 2;
        if (secondsCached > secondsTotal) clearInterval(cacheInterval);
        $('.mplayer .track.ui-progressbar')
                .progressbar('value', secondsCached / secondsTotal * 100);
}, 30);

There’s no HTML, since we’re reusing the .track element from the previous section. Oh, and in case you hadn’t noticed, that buffering code is totally bogus. Well, it works; it just isn’t representing a song being buffered, only simulating it. But it works great! If you really had a music resource that was coming in and buffering and your audio API supported notifying you of that, you’d bind to the event and set the progress bar value as shown earlier, between 0 and 100. Unlike Slider, you can’t specify a custom max for progress. But that makes sense, right? Progress goes from 0 percent to 100 percent.

OK, so we have got some proof-of-concept code here. When the page loads, the buffer progress will race away as if the file is flying in, but not quite as if it’s local. It’s fun to watch. Figure 14-4 shows the progress bar we’ve created. The other thing that’s bogus about our buffer progress indicator? Since it isn’t a real buffer progress, you can jump beyond it. What will happen? That depends on your audio API and backend. So, if you don’t have a buffer progress or don’t want or need one, skip this. Or leave it in for looks.

Figure 14-4. Progress bar in track to show buffering

So, we need to add a volume control. Slider is a good fit. Drag from volume: 0 to volume: 1 and set step to 0.01:

$('.mplayer .volume').slider({
        max: 1,
        step: 0.01,
        value: audio.volume,
        slide: fnSlide,
        change: fnChange
});

Bam. Why not? Well, that would certainly work. But it would take up a bit of space. And orientation may be an issue. If we lay it out horizontally, which is the default for Slider, we’re competing with the track for horizontal space. Not to mention we’re “lopsiding” our player. OK, so should we add orientation: 'vertical' to the slider options? Well, that too would work, but it would mean our player is now 100 pixels tall and only in order to fit the volume control. The rest of the controls need just over 30 pixels. There has to be a better way.

There is. Keep the volume slider’s bar hidden when not in use. We’ll keep the slider handle visible and add a little speaker icon to it. Then we’ll hide the rest by setting the height of the control to 0. When the user hovers over the handle, we’ll set the height to 100 pixels. On mouseout, we’ll remove that, and it will go back to 0 height. Also, with its container positioned absolutely in a relative wrapper, it won’t affect the overall height of the player when it is fully visible.

There’s one problem. When the bar appears, let’s say the volume is at 0.10, or 10 percent. That would mean the handle is near the bottom. Should the handle jump down? Or the bar up? And what about while the user slides it? What if they drag from 10 percent up to 90 percent and then let go? It would jump back down when the bar hides again. Yuck.

So, here’s what we’re going to do. We’re going to keep the handle fixed the whole time. The user will drag up for increase and down for decrease. The bar, including the range: "min" shaded portion below the handle, will move down and up accordingly.

Here’s the CSS:

.mplayer .volume-container { position: absolute; top: 12px; right: 12px; }
.mplayer .volume { height: 0; margin-top: 5px; }

Here’s the HTML:

<div class="mplayer ui-widget">
        <div class="buttons-container">
                <a class="playpause ui-state-default ui-corner-all" href="#">
                        <span class="ui-icon ui-icon-play"></span>
                        <span class="ui-icon ui-icon-pause"></span>
                </a>
        </div>
        <span class="currenttime ui-state-default"></span>
        <div class="track"></div>
        <span class="duration ui-state-default"></span>
        <div class="volume-container">
                <div class="volume">
                        <a href="#" class="ui-state-default ui-corner-all 
ui-slider-handle">
                                <span class="ui-icon ui-icon-volume-on"></span>
                        </a>
                </div>
        </div>
</div>

Here’s the JavaScript:

$('.mplayer .volume')
        .slider({
                max: 1,
                orientation: 'vertical',
                range: 'min',
                step: 0.01,
                value: audio.volume,
                start: function(event, ui) {
                        $(this).addClass('ui-slider-sliding'),
                        $(this).parents('.ui-slider').css({
                                'margin-top': (((1 - audio.volume) * −100) + 5) + 'px',
                                'height': '100px'
                        }).find('.ui-slider-range').show();
                },
                slide: function(event, ui) {
                        if (ui.value >= 0 && ui.value <= 1) {
                                audio.set('volume', ui.value);
                        }
                        $(this).css({
                                'margin-top': (((1 - audio.volume) * −100) + 5) + 'px',
                                'height': '100px'
                        }).find('.ui-slider-range').show();
               },
               stop: function(event, ui) {
                        $(this).removeClass('ui-slider-sliding'),
                        var overHandle = $(event.originalEvent.target)
                                .closest('.ui-slider-handle').length > 0;
                        if (!overHandle) {
                                $(this).css({
                                        'margin-top': '',
                                        'height': ''
                                }).find('.ui-slider-range').hide();
                        }
               },
               change: function(event, ui) {
                       if (ui.value >= 0 && ui.value <= 1) {
                               if (ui.value != audio.volume) {
                                        audio.set('volume', ui.value);
                               }
                       }
               }
        })
        .mouseenter(function(event) {
                if ($('.ui-slider-handle.ui-state-active').length) {
                        return;
                }
                $(this).css({
                        'margin-top': (((1 - audio.volume) * −100) + 5) + 'px',
                        'height': '100px'
                }).find('.ui-slider-range').show();
        })
        .mouseleave(function() {
                $(this).not('.ui-slider-sliding').css({
                        'margin-top': '',
                        'height': ''
                }).find('.ui-slider-range').hide();
        })
        .find('.ui-slider-range').addClass('ui-corner-bottom').hide().end();

While it’s being dragged, we’re adjusting the negative margin-top of the bar in inverse proportion to the current value, keeping the handle static. This happens here:

$(this).parents('.ui-slider').css({
        'margin-top': (((1 - audio.volume) * −100) + 5) + 'px',
        'height': '100px'
})

Figure 14-5 shows the volume slider in our player.

Figure 14-5. Volume slider

This interaction requires recognizing that you’re not dragging the bar, which is what’s moving, in the opposite direction of your mouse. But meanwhile, your mouse, the size of the shaded range, and your volume do move in logical concert: down for down, up for up. Also, if you prefer, you can hover so that the bar appears, move your mouse to the position on the bar where you want to set the volume, and click.

OK, let’s add a couple elements with jQuery UI CSS Framework classes to style the player in a way that matches the controls within it:

Here’s the CSS:

.mplayer .bg { position: absolute; width: 100%; height: 100%; top: 0;
        bottom: 0; left: 0; right: 0; border: none; }
.mplayer .rod { position: absolute; top: −2px; left: −0.4%; right: −0.4%;
        width: 100.8%; height: 3px; overflow: hidden; border: none; }
.mplayer .hl { position: absolute; top: 2px; left: 1%; right: 1%; width: 98%;
        height: 1px; overflow: hidden; border: none; }
.mplayer .hl2 { position: absolute; top: 2px; left: 2%; right: 2%; width: 96%;
        height: 3px; overflow: hidden; border: none; }

Here’s the JavaScript:

$('.mplayer').each(function() {
        $('.bg:first', this).css('opacity', 0.7);
        $('.bg:last', this).css('opacity', 0.3);
})
$('.mplayer .rod').css('opacity', 0.4);
$('.mplayer .hl').css('opacity', 0.25);
$('.mplayer .hl2').css('opacity', 0.15);

Here’s the HTML:

<div class="mplayer ui-widget">
        <div class="bg ui-widget-header ui-corner-bottom"></div>
        <div class="bg ui-widget-content ui-corner-bottom"></div>
        <div class="rod ui-widget-header"></div>
        <div class="hl ui-widget-content"></div>
        <div class="hl2 ui-widget-content"></div>
        <div class="buttons-container">
                <a class="playpause ui-state-default ui-corner-all" href="#">
                        <span class="ui-icon ui-icon-play"></span>
                        <span class="ui-icon ui-icon-pause"></span>
                </a>
        </div>
        <span class="currenttime ui-state-default"></span>
        <div class="track"></div>
        <span class="duration ui-state-default"></span>
        <div class="volume-container">
                <div class="volume">
                        <a href="#" class="ui-state-default ui-corner-all
ui-slider-handle">
                                <span class="ui-icon ui-icon-volume-on"></span>
                        </a>
                </div>
        </div>
</div>

Here we’re using opacity and layering to squeeze a couple more shades out of any jQuery UI theme. Figure 14-6 shows the finished product:

Figure 14-6. Widget background and top styling

Finally, Figure 14-7 shows a sampling of the jQuery UI music player in a few prebuilt jQuery UI themes.

Figure 14-7. jQuery UI media player in a few different ThemeRoller themes