New html5 player

2011-04-10 22:04:35 +04:00
parent a738e533c1
commit b5e2563bf9
14 changed files with 200 additions and 482 deletions
@@ -1,8 +1,50 @@
+var audio;
+var utid;
 $(function(){
-	$('.play').click(function(){
-		$('#player audio').attr('src', '/listen/'+ $(this).parent().attr('id')) +'/';
-		$('#player #artist').html($('h1.artist').html());
-		$('#player #title').html($(this).parent().find('.track-name').html());
-		$('#player audio').play();
+	audio = document.getElementsByTagName('audio')[0];
+	$('#player .play').click(function(){
+		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(){
+		playTrack($('h1.artist').html(), $(this).parent().find('.track-name').html(), '/listen/'+ $(this).parent().attr('id') +'/');
+	})
+})
+function updatePlayer() {
+	duration = audio.duration;
+	cur_time = audio.currentTime;
+	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, stream) {
+	$(audio).attr('src', stream);
+	$('#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')
+	$('#player .play').trigger('click');
+}