Player controls

public/BetaHaven.html

@@ -21,7 +21,7 @@
 		<!-- START PLAYER -->
 		<div id="player-container">
 			<div id="player">
-				<audio id="a"></audio>
+				<div id="audiobox"></div>
 				<div class="now-playing">Jet &mdash; Black Hearts</div>
 				<div class="progress">
 					<div class="loaded">
@@ -31,6 +31,7 @@
 				<div class="controls">
 					<div class="prev"></div>
 					<div class="play"></div>
+					<div class="pause"></div>
 					<div class="next"></div>
 				</div>
 			</div>
@@ -53,7 +54,7 @@
 		
 		<!-- START DATA -->
 		<div id="data-container">
-			<a href="/artist/Kasabian" class="data artist">Kasabian</a>			
+			<a class="data artist">Foo Fighters</a>			
 		</div>
 		<!-- END DATA -->
 		

public/javascripts/audio.js

@@ -3,20 +3,39 @@ var Audio = {
 	audio: null,
 	tid: null,
 	
-	init: function() {
-		this.audio = document.getElementById('a');
-	},
-	
 	play: function() {
+		try {
 			this.audio.play();
+		} catch(e) {}
 	},
 	
 	pause: function() {
+		try {
 			this.audio.pause();
+		} catch(e) {}
 	},
 	
-	setTrack: function(url) {
+	rewind: function() {
-		this.audio.setAttribute('src', url);
+		try {
+			this.audio.currentTime = 0;
+		} catch(e) {}
+	},
+	
+	addTrack: function(id, url) {
+		if ($('#a'+ id).length == 0) {
+			$('#audiobox').append('<audio id="a'+ id +'" src="'+ url +'"></audio>')
+		}
+	},
+	
+	setTrack: function(id) {
+		this.audio = document.getElementById('a'+ id);
+		$(this.audio).bind('play',function() {
+			$('#player .controls .play').hide();
+			$('#player .controls .pause').show();
+		}).bind('pause ended', function() {
+			$('#player .controls .pause').hide();
+			$('#player .controls .play').show(); 
+		});
 	},
 	
 	getLoadedPercent: function() {
@@ -47,5 +66,17 @@ var Audio = {
 			Audio.getLoadedPercent(),
 			Audio.getPlayedPercent()
 		);
+	},
+	
+	killListener: function() {
+		window.clearTimeout(this.tid);
 	}
 }  
+
+$('#player .controls .play').live('click', function(){
+	Audio.play();	
+});
+
+$('#player .controls .pause').live('click', function(){
+	Audio.pause();
+});

public/javascripts/player.js

@@ -18,29 +18,70 @@ var Player = {
 	},
 	
 	setTrack: function(obj) {
-		var id = $(obj).attr('id');
+		if (typeof obj == 'string') {
+			var id = obj;
+			obj = $('#i'+ obj);
+		} else {
+			var id = $(obj).attr('id').split('i')[1];
+		}
 		var query = $(obj).find('.title').html();
 		var length = $(obj).find('.duration').html();
 		
 		$('#player .now-playing').html(query);
 		$('.playlist-tracks li').removeClass('now');
-		$('#'+ id).addClass('now');
+		$('#i'+ id).addClass('now');
 		
 		loadTracksData(query, this.playSource);
 	},
 	
 	playSource: function(url) {
-		Audio.setTrack(url);
+		var id = $('.playlist-tracks .now').attr('id').split('i')[1];
+		Audio.pause();
+		Audio.rewind();
+		Audio.addTrack(id, url);
+		Audio.setTrack(id);
 		Audio.play();
 		Audio.startListener();
 	},
 	
+	nextTrack: function() {
+		if (true) {															// Shuffle off
+			if ($('.playlist-tracks .now').next().length == 0 && true) {	// Last track in the playlist and repeat is on
+				return $('.playlist-tracks li').first().attr('id').split('i')[1];
+			} else {
+				return $('.playlist-tracks .now').next().attr('id').split('i')[1];
+			}
+		}
+	},
+	
+	prevTrack: function() {
+		if (true) {															// Shuffle off
+			if ($('.playlist-tracks .now').prev().length == 0 && true) {	// First track in the playlist
+				return $('.playlist-tracks li').last().attr('id').split('i')[1];
+			} else {
+				return $('.playlist-tracks .now').prev().attr('id').split('i')[1];
+			}
+		}
+	},
+	
 	updateUI: function(buffered, played) {
 		$('#player .loaded').width(Math.round(buffered * this.bar_width));
 		$('#player .played').width(Math.round(played * this.bar_width));
+		if (played == 1) {
+			Audio.killListener();
+			this.setTrack(this.nextTrack());
+		}
 	}
 }
 
+$('#player .controls .prev').live('click', function(){
+	Player.setTrack(Player.prevTrack());
+});
+
+$('#player .controls .next').live('click', function(){
+	Player.setTrack(Player.nextTrack());
+});
+
 $('.add-album').live('click', function() {
 	var artist = $('.artist-info .name').html();
 	$(this).parent().parent().parent().find('.tracklist li').each(function(i, item){
@@ -67,7 +108,3 @@ $('.tracklist li').live('mouseover mouseout', function(e){
 $('.playlist-tracks li').live('dblclick', function(){
 	Player.setTrack(this);
 });
-
-$(function(){
-	Audio.init();
-});

public/stylesheets/player.css

@@ -41,6 +41,10 @@
 		#player .controls .play {
 			background-image: url('/images/icns/play.png');
 		}
+		#player .controls .pause {
+			background-image: url('/images/icns/pause.png');
+			display: none;
+		}
 		#player .controls .next {
 			background-image: url('/images/icns/next.png');
 		}