audioaxis/static/script.js

var player;
var litColor = '#eee';
var dimmedColor = '#555';
var interval;
for (var i = 0; i < ids.length; i++) {
	drawBar(ids[i]);
}

function drawBar(id) {
	var canvas = document.getElementById(id);
	canvas.height = canvas.height; //clear
	var context = canvas.getContext("2d");

	if (current_id == id && player) {
		context.fillStyle = dimmedColor;
		context.fillRect(0, 9, 700, 2);
		var loaded_start = player.getVideoStartBytes() / player.getVideoBytesTotal() * 700;
		var loaded_length = player.getVideoBytesLoaded() / player.getVideoBytesTotal() * 700;
		context.fillStyle = litColor;
		context.fillRect(loaded_start, 9, loaded_length, 2);

		var current_time = player.getVideoStartBytes() + player.getCurrentTime();
		var current_pos = current_time / player.getDuration() * 690 + 5;
		context.beginPath();
		context.arc(current_pos, 10, 5, 0, Math.PI * 2, false);
		context.closePath();
		context.fill();
	} else {
		context.fillStyle = dimmedColor;
		context.beginPath();
		context.arc(5, 10, 5, 0, Math.PI * 2, false);
		context.closePath();
		context.fill();
		context.fillRect(0, 9, 700, 2);
	}
}

function onYouTubePlayerReady(playerId) {
	player = document.getElementById('player');
	player.addEventListener('onStateChange', 'onStateChange');
}

function onStateChange(state) {
	switch (state) {
		case 1: //playing
			interval = setInterval(drawBar, 100, current_id);
			break;
		case 0: //ended
			showPlay(current_id);
		case -1: //unstarted
		case 2: //paused
		case 3: //buffering
		case 5: //cued
			clearInterval(interval);
	}
}

function play(yid) {
	if (current_id != yid) {
		player.loadVideoById(yid, 0, 'hd720');
		drawBar(current_id, dimmedColor);
		current_id = yid;
	}
	if (player.getPlayerState() in {'-1':1, '0':1, '5':1}) { // unstarted, ended, cued
		player.seekTo(0, true);
	}
	player.playVideo();
	for (var i = 0; i < ids.length; i++) {
		if (ids[i] == yid)
			showPause(ids[i]);
		else
			showPlay(ids[i]);
	}
}
function pause(yid) {
	if (current_id != yid)
		return
	player.pauseVideo();
	showPlay(yid)
}
function stop(yid) {
	if (current_id != yid)
		return
	player.stopVideo();
	showPlay(yid)
}

function showPlay(yid) {
	var play = document.getElementById('play_' + yid);
	var pause = document.getElementById('pause_' + yid);
	play.style.display = 'inline';
	pause.style.display = 'none';
}
function showPause(yid) {
	var pause = document.getElementById('pause_' + yid);
	var play = document.getElementById('play_' + yid);
	pause.style.display = 'inline';
	play.style.display = 'none';
}