cho45/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

		<style>
			html, body {
				width: 100%;
				height: 100%;
			}

			.hover {
				background: #000;
			}

			#playlist {
				list-style: none;
				margin: 0;
				padding: 10px 0;
			}

			#playlist li {
				border-width: 1px;
				border-style: solid;
				border-color: #ccc;
				margin: -1px 0 0 0;
				padding: 1em;
				background: #efefef;
			}
		</style>
	</head>
	<body>
		<div id="player"></div>
		<ol id="playlist">
			<script type="application/x-template" id="item">
				<li>
					<%= name %>
				</li>
			</script>

		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script src="micro-template.js"></script>
		<script src="script.js"></script>
	</body>
</html>

## micro-template.js
/**
 * https://github.com/cho45/micro-template.js
 * (c) cho45 http://cho45.github.com/mit-license
 */
function template (id, data) {
	var me = arguments.callee;
	if (!me.cache[id]) me.cache[id] = (function () {
		var name = id, string = /^[\w\-]+$/.test(id) ? me.get(id): (name = 'template(string)', id); // no warnings
		var line = 1, body = (
			"try { " +
				(me.variable ?  "var " + me.variable + " = this.stash;" : "with (this.stash) { ") +
					"this.ret += '"  +
					string.
						replace(/<%/g, '\x11').replace(/%>/g, '\x13'). // if you want other tag, just edit this line
						replace(/'(?![^\x11\x13]+?\x13)/g, '\\x27').
						replace(/^\s*|\s*$/g, '').
						replace(/\n/g, function () { return "';\nthis.line = " + (++line) + "; this.ret += '\\n" }).
						replace(/\x11=raw(.+?)\x13/g, "' + ($1) + '").
						replace(/\x11=(.+?)\x13/g, "' + this.escapeHTML($1) + '").
						replace(/\x11(.+?)\x13/g, "'; $1; this.ret += '") +
				"'; " + (me.variable ? "" : "}") + "return this.ret;" +
			"} catch (e) { throw 'TemplateError: ' + e + ' (on " + name + "' + ' line ' + this.line + ')'; } " +
			"//@ sourceURL=" + name + "\n" // source map
		).replace(/this\.ret \+= '';/g, '');
		var func = new Function(body);
		var map  = { '&' : '&amp;', '<' : '&lt;', '>' : '&gt;', '\x22' : '&x22;', '\x27' : '&x27;' };
		var escapeHTML = function (string) { return (''+string).replace(/[&<>\'\"]/g, function (_) { return map[_] }) };
		return function (stash) { return func.call(me.context = { escapeHTML: escapeHTML, line: 1, ret : '', stash: stash }) };
	})();
	return data ? me.cache[id](data) : me.cache[id];
}
template.cache = {};
template.get = function (id) { return document.getElementById(id).innerHTML };

/**
 * Extended template function:
 *   requires: basic template() function
 *   provides:
 *     include(id)
 *     wrapper(id, function () {})
 */
function extended (id, data) {
	var fun = function (data) {
		data.include = function (name) {
			template.context.ret += template(name, template.context.stash);
		};

		data.wrapper = function (name, fun) {
			var current = template.context.ret;
			template.context.ret = '';
			fun.apply(template.context);
			var content = template.context.ret;
			var orig_content = template.context.stash.content;
			template.context.stash.content = content;
			template.context.ret = current + template(name, template.context.stash);
			template.context.stash.content = orig_content;
		};

		return template(id, data);
	};

	return data ? fun(data) : fun;
}

template.get = function (id) {
	var fun = extended.get;
	return fun ? fun(id) : document.getElementById(id).innerHTML;
};
this.template = template;
this.extended = extended;

## script.js


var queue = [];
var audio;

var list = $('#playlist');

function appendQueue (file) {
	if (!audio) {
		audio = document.createElement('audio');
		audio.controls = true;
		audio.autobuffer = true;

		audio.addEventListener('ended', function () {
			console.log('next queue');
			list.find('li:first').remove();

			audio.src = queue.pop();
			audio.play();
		});

		document.getElementById('player').appendChild(audio);
	}

	var uri = window.webkitURL.createObjectURL(file);
	queue.push(uri);

	list.append(template('item', {
		name : file.name
	}));

	if (audio.paused) {
		audio.src = queue.pop();
		audio.play();
	}
}

document.body.ondragover = function () { this.className = 'hover'; return false; };
document.body.ondragend = function () { this.className = ''; return false; };
document.body.ondrop = function (e) {
	e.preventDefault();
	this.className = '';
	console.log(e.dataTransfer.files);
	for (var i = 0, it; (it = e.dataTransfer.files[i]); i++) {
		try {
		appendQueue(it);
		} catch (e) { alert(e) }

	}
};
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

	<style>
	html, body {
	width: 100%;
	height: 100%;
	}

	.hover {
	background: #000;
	}

	#playlist {
	list-style: none;
	margin: 0;
	padding: 10px 0;
	}

	#playlist li {
	border-width: 1px;
	border-style: solid;
	border-color: #ccc;
	margin: -1px 0 0 0;
	padding: 1em;
	background: #efefef;
	}
	</style>
	</head>
	<body>
	<div id="player"></div>
	<ol id="playlist">
	<script type="application/x-template" id="item">
	<li>
	<%= name %>
	</li>
	</script>

	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="micro-template.js"></script>
	<script src="script.js"></script>
	</body>
	</html>
	/**
	* https://github.com/cho45/micro-template.js
	* (c) cho45 http://cho45.github.com/mit-license
	*/
	function template (id, data) {
	var me = arguments.callee;
	if (!me.cache[id]) me.cache[id] = (function () {
	var name = id, string = /^[\w\-]+$/.test(id) ? me.get(id): (name = 'template(string)', id); // no warnings
	var line = 1, body = (
	"try { " +
	(me.variable ? "var " + me.variable + " = this.stash;" : "with (this.stash) { ") +
	"this.ret += '" +
	string.
	replace(/<%/g, '\x11').replace(/%>/g, '\x13'). // if you want other tag, just edit this line
	replace(/'(?![^\x11\x13]+?\x13)/g, '\\x27').
	replace(/^\s\|\s$/g, '').
	replace(/\n/g, function () { return "';\nthis.line = " + (++line) + "; this.ret += '\\n" }).
	replace(/\x11=raw(.+?)\x13/g, "' + ($1) + '").
	replace(/\x11=(.+?)\x13/g, "' + this.escapeHTML($1) + '").
	replace(/\x11(.+?)\x13/g, "'; $1; this.ret += '") +
	"'; " + (me.variable ? "" : "}") + "return this.ret;" +
	"} catch (e) { throw 'TemplateError: ' + e + ' (on " + name + "' + ' line ' + this.line + ')'; } " +
	"//@ sourceURL=" + name + "\n" // source map
	).replace(/this\.ret \+= '';/g, '');
	var func = new Function(body);
	var map = { '&' : '&', '<' : '<', '>' : '>', '\x22' : '&x22;', '\x27' : '&x27;' };
	var escapeHTML = function (string) { return (''+string).replace(/[&<>\'\"]/g, function (_) { return map[_] }) };
	return function (stash) { return func.call(me.context = { escapeHTML: escapeHTML, line: 1, ret : '', stash: stash }) };
	})();
	return data ? me.cache[id](data) : me.cache[id];
	}
	template.cache = {};
	template.get = function (id) { return document.getElementById(id).innerHTML };

	/**
	* Extended template function:
	* requires: basic template() function
	* provides:
	* include(id)
	* wrapper(id, function () {})
	*/
	function extended (id, data) {
	var fun = function (data) {
	data.include = function (name) {
	template.context.ret += template(name, template.context.stash);
	};

	data.wrapper = function (name, fun) {
	var current = template.context.ret;
	template.context.ret = '';
	fun.apply(template.context);
	var content = template.context.ret;
	var orig_content = template.context.stash.content;
	template.context.stash.content = content;
	template.context.ret = current + template(name, template.context.stash);
	template.context.stash.content = orig_content;
	};

	return template(id, data);
	};

	return data ? fun(data) : fun;
	}

	template.get = function (id) {
	var fun = extended.get;
	return fun ? fun(id) : document.getElementById(id).innerHTML;
	};
	this.template = template;
	this.extended = extended;


	var queue = [];
	var audio;

	var list = $('#playlist');

	function appendQueue (file) {
	if (!audio) {
	audio = document.createElement('audio');
	audio.controls = true;
	audio.autobuffer = true;

	audio.addEventListener('ended', function () {
	console.log('next queue');
	list.find('li:first').remove();

	audio.src = queue.pop();
	audio.play();
	});

	document.getElementById('player').appendChild(audio);
	}

	var uri = window.webkitURL.createObjectURL(file);
	queue.push(uri);

	list.append(template('item', {
	name : file.name
	}));

	if (audio.paused) {
	audio.src = queue.pop();
	audio.play();
	}
	}

	document.body.ondragover = function () { this.className = 'hover'; return false; };
	document.body.ondragend = function () { this.className = ''; return false; };
	document.body.ondrop = function (e) {
	e.preventDefault();
	this.className = '';
	console.log(e.dataTransfer.files);
	for (var i = 0, it; (it = e.dataTransfer.files[i]); i++) {
	try {
	appendQueue(it);
	} catch (e) { alert(e) }

	}
	};