Click song titles to play certain songs

[app-musicexpo.git] / player.js

'use strict';
var TYPES = {
	"FLAC": "audio/x-flac",
	"Vorbis": "audio/ogg",
	"AAC": "audio/aac",
	"MP3": "audio/mpeg"
};

var audio, details, start, data;

function load_song (id) {
	audio.style.display = "inline";
	var song = data[id];
	var old_sources = document.getElementsByTagName("source");
	while(old_sources.length)
		old_sources[0].parentNode.removeChild(old_sources[0]);

	for (var i = 0 ; i < song.formats.length ; i++){
		var source = document.createElement("source");
		var type = TYPES[song.formats[i].format];
		source.setAttribute("type", type);
		source.setAttribute("src", song.formats[i].file);
		audio.appendChild(source);
	}

	details.innerHTML = "Now playing: " + song.artist + " - " + song.title;
	audio.load();
}

function play_random () {
	start.innerHTML = "Next";
	var id = Math.floor(Math.random() * data.length);
	load_song(id);
	audio.play();
}

function make_onclick_handler (id){
	return function () {
		load_song(id);
		start.innerHTML = "Next";
		audio.play();
	}
}

window.onload = function () {
	var container = document.getElementById("player");
	container.innerHTML = '<div id="details"></div> <button id="start_player">Play a random song</button> (or click a song title)<br><audio id="audio" controls></audio>';
	audio = document.getElementById("audio");
	details = document.getElementById("details");
	start = document.getElementById("start_player");

	data = [];
	var trs = document.querySelectorAll("tbody tr");
	for (var i = 0 ; i < trs.length ; i++) {
		var tr = trs[i];
		var song = {
			"artist": tr.getElementsByClassName("artist")[0].textContent,
			"title": tr.getElementsByClassName("title")[0].textContent,
			"formats": []
		};
		var formats = tr.getElementsByClassName("formats")[0].getElementsByTagName("a");
		for (var j = 0 ; j < formats.length ; j++) {
			var format = formats[j];
			song.formats.push({
				"format": format.textContent,
				"file": format.getAttribute("href")
			});
		}
		data.push(song);
		tr.getElementsByClassName("title")[0].onclick = make_onclick_handler(i);
	}

	audio.style.display = "none";
	audio.addEventListener('ended', play_random);
	audio.addEventListener('error', play_random);
	start.addEventListener('click', play_random);
};