Ok so my prev post was about how to construct a playlist in jQuery Mobile with some simple NodeJS file serving. This one is to construct the audio player itself! Mine looks like this (cause I was kinda too lazy to do the styling properly):
My audio player
Ok so it’s very basic: we got a toggle Play/Pause button, Next button, Prev button, the progress bar for download progress and a fake album art (cause I didn’t know how to extract mp3 metadata yet). The features that I implemented are pretty basic:
1. Play/Pause
2. Next/Prev Song
3. Progress bar for song buffering
4. Time Left
5. Auto-play the next one if this one ended
6. Header shows song name
The HTML structure itself is rather simple as jQuery Mobile does most of the styling for u:
<div data-role="page" class="player">
<div data-role="header">
<h1>My collection</h1>
</div><!-- /header -->
<div data-role="content">
<div class='cover-art' style='text-align:center'>
<audio src='music/kpop/ttl2.mp3' preload autoplay></audio>
<img src='images/no-album-art.png' />
</div>
</div><!-- /content -->
<div data-role='footer' style='text-align:center'>
<p class='track-info'>
<span class="song-progress">
<input type="range" min="0" max="100" value="0" />
</span>
<span class="timeleft"></span>
</p>
<div class='playback' data-role="controlgroup" data-type='horizontal' style='text-align:center'>
<button class='playback-prev' data-icon='back'>Prev</button>
<button class='playback-play' >||</button>
<button class='playback-next' data-icon="forward" data-iconpos="right">Next</button>
</div>
</div>
<script type="text/javascript">
$('div.player').bind('pageshow', function(ev, ui) {
if (!$(this).attr('data-init')) {
Player.init('div.player.ui-page-active', $.getUrlVar($(this).attr('data-url'), 'song'));
$(this).attr('data-init', 'true');
}
});
</script>
</div><!-- /page -->
So again, I bind some initialization to the “pageshow” event of the page and make sure it doesn’t get initialized twice. Since the href in each <li> points to the same page but different parameter, jQuery loads this again every single time even if it’s the same one. This only prevents the forward history button to reload the song. However, this does not prevent having multiple songs playing at the same time cause jQuery mobile loads those as different div. You can customize the changePage behavior when user clicks on a <li> but I didn’t, just to keep it simple.
The parameter is stored in the main player div (with selector “div.player”, class “ui-page-active” indicates its the active one) so $.getUrlVar just extract the parameter song from it (which indicates the song index):
$.extend({
getUrlVars : function(string) {
var vars = [];
var hash;
var href = string ? string : window.location.href;
console.log(href);
if (href.indexOf('#') > -1) {
var hrefArr = href.split('#');
href = hrefArr[hrefArr.length - 1];
}
var hashes = href.slice(href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
},
getUrlVar : function(string, name) {
return $.getUrlVars(string)[name];
}
});
Pretty simple, just basically splitting the data-url field into a map of parameter names and values. The Player.init function takes in the parent div selector (so that I can locate the control relative to the parent div) and the song index. I basically keep track of all the control DOM elements:
var $next = $(div + ' button.playback-next');
var $prev = $(div + ' button.playback-prev');
var $play = $(div + ' button.playback-play');
var $trackInfo = $(div + ' p.track-info');
var $songProgress = $trackInfo.find('.song-progress');
var $loading = $songProgress.find('.loading');
var $timeLeft = $trackInfo.find('.timeleft');
var $slider = $songProgress.find('.ui-slider');
var $handle = $slider.find('.ui-slider-handle');
$songProgress.find('input[type="number"]').hide();
var $title = $(div + ' h1.ui-title');
var $audio = $(div + ' audio');
var audio = $audio.get(0);
I have this habit of prefixing jQuery objects with $ to distinguish from actual DOM element ($audio is the jQuery-wrapped object of audio). Play/pause is really easy:
$play.click(function(ev) {
var $buttonText = $(this).parent().find('.ui-btn-text');
if (audio.paused) {
$audio.attr('data-state', 'play');
audio.play();
$buttonText.text("||");
}
else {
$audio.attr('data-state', 'pause');
audio.pause();
$buttonText.text("Play");
}
});
Prev/Next is also straightforward:
$next.click(function(ev) {
var state = $audio.attr('data-state');
var current = parseInt($audio.attr('data-current'));
Player.getSongPath(current + 1, $audio, $title, function() {
$audio.attr('data-current', current + 1);
if (state == 'play') {
audio.play();
}
});
});
$prev.click(function(ev) {
var state = $audio.attr('data-state');
var current = parseInt($audio.attr('data-current'));
Player.getSongPath(current - 1, $audio, $title, function() {
$audio.attr('data-current', current - 1);
if (state == 'play') {
audio.play();
}
});
});
So we’ve done 1 and 2. Let’s jump to 5 cause its also easy:
$audio.bind('ended', function(ev) {
$next.click();
});
I did 6 as a separate functionality that ping the server for the song’ path, change the audio source and also title:
getSongPath: function(index, $audio, $title, fn) {
$.post('playlist?song=' + index, null, function(data) {
console.log(data);
$audio.attr('src', data.result);
var filenameArr = data.result.split('/');
var filename = filenameArr[filenameArr.length - 1];
$title.text(filename);
if ($.isFunction(fn)) {
fn();
}
}, 'json');
}
For some reason I put null in the POST request data instead of the actual data (song=2) cause I wasn’t getting that data on the server side (I tried req.body, req.query and everything… didn’t seem to show up, will look into it a bit more). OK now lets get back to 3:
if (!$loading.get(0)) { //this inject the white loading bar before the handler
$handle.before('<div class="ui-slider loading" style="width: 3%; float: left; top: 0; left: -3%; background-color: buttonface;"></div>');
$loading = $slider.find('div.loading'); //update var
}
$audio.bind('progress', function() {
var loaded = parseInt(((audio.buffered.end(0) / audio.duration) * 100) + 3, 10);
$loading.css({
width: loaded + '%' //change width accordingly
});
});
var manualSeek = false;
var loaded = false;
$handle.css({
top: '-50%' //somehow I think the styling of footer and handler conflicted and messed it up so I had to bump it up 50%
});
I actually didn’t know how to get the current time of the audio but after googling around and looking at audio attributes, things got a bit clearer. Here’s 4:
$audio.bind('timeupdate', function() {
var rem = parseInt(audio.duration - audio.currentTime, 10),
pos = Math.floor((audio.currentTime / audio.duration) * 100),
mins = Math.floor(rem / 60, 10),
secs = rem - mins * 60;
$timeLeft.text('-' + mins + ':' + (secs > 9 ? secs : '0' + secs));
if (!manualSeek) {
$handle.css({
left: pos + '%'
});
}
if (!loaded) {
loaded = true;
}
});
Ok so that’s how I made a sorta functional audio player. There’re still problems with it but hopefully this DIY guide gave u some idea on how to control the audio element manually.
40.699001
-75.208254
LLH...azndezign 