oldhaven/public/javascripts/player.js

var audio;
var utid;
$(function(){
	audio = document.getElementsByTagName('audio')[0];
	$('#player .play').click(function(){
		if (! audio.src) return;
		audio.play();
		utid = window.setTimeout(updatePlayer, 100);
		$('#player .pause').show();
		$('#player .play').hide();
	})
	$('#player .pause').click(function(){
		audio.pause();
		clearTimeout(utid);
		$('#player .pause').hide();
		$('#player .play').show();
	})
	
	$('.tracks .play').click(function(){
		addToPlaylist(
			$('h1.artist').html(),
			$(this).parent().find('.track-name').html(),
			Math.round($(this).parent().find('.duration').attr('data-length') / 1000),
			$(this).parent().attr('id')
		);
	})
	$('#playlist .show-button').click(function(){
		$('#playlist ul').toggle();
	})
})
function updatePlayer() {
	duration = audio.duration;
	cur_time = audio.currentTime;
	if (cur_time == duration) {
		playNext();
	}
	loaded = 0;
	if ((audio.buffered != undefined) && (audio.buffered.length != 0)) {
	 	loaded = Math.round((audio.buffered.end(0) / audio.duration) * 730);
		$('#player .time-played').html(formatTime(cur_time));
		$('#player .time-left').html(formatTime(duration - cur_time));
		progress = Math.round((cur_time / duration) * 730);
		$('#player .progress-loaded').css('width', loaded +'px')
		$('#player .progress-point').css('margin-left', progress +'px')
	}
	utid = window.setTimeout(updatePlayer, 100);
}
function formatTime(sec) {
	sec = Math.round(sec);
	m = Math.floor(sec / 60);
	s = sec - (m * 60);
	return m +':'+ (s < 10 ? '0' : '') +s;
}
function playTrack(artist, track, id) {
	$(audio).attr('src', '/listen/'+ id +'/');
	$('#player .track-title').html(artist +' &mdash; '+ track);
	$('#player .time-played').html('0:00');
	$('#player .time-left').html('0:00');
	$('#player .progress-loaded').css('width', 0 +'px')
	$('#player .progress-point').css('margin-left', 0 +'px')
	$('#playlist li').removeClass('now-playing');
	$('#playlist li[data-id="'+ id +'"]').addClass('now-playing');
	$('#player .play').trigger('click');
}
function playNext() {
	$('#playlist ul li.now-playing').next().trigger('click');
}
function addToPlaylist(artist, track, length, id) {
	$('#playlist ul').append($(
		'<li data-id="'+ id +'">'+
			'<span class="artist">'+ artist +'</span> &mdash; '+
			'<span class="track">'+ track +'</span>'+
			'<span class="length" data-seconds="'+ length +'">'+ formatTime(length) +'</span>'+
		'</li>'
	));
	$('#playlist ul li[data-id="'+ id +'"]').click(function(){
		playTrack(artist, track, id);
	})
	if ($('#playlist ul li').length == 1) {
		playTrack(artist, track, id);
	}
}