piatra/index.html

## index.html
<!doctype html public "✰">
<html>
<head>
	<title>music player</title>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
	<style>
		body {
			font-family:'Open Sans';
			font-weight: 600;
			-webkit-animation:bg 30s;
		}

		.container {
			margin:0;
			width:100%;
			height:800px;
			text-align:center;
		}

		h1 {
			font-size:60px;
			text-shadow:0 1px 1px #fff;
		}

		audio {
			width:50%;
			margin:0 auto;
		}

		ul {
			width:50%;
			margin:1% auto;
			padding:0;
		}

		ul li {
			list-style:none;
		}

			ul li:nth-child(odd) {
				background:rgba(255,255,255,.2);
			}

		@-webkit-keyframes bg {
			0% { background: Crimson; }
			16.6% { background: LightBlue; }
			33.2% { background: MediumPurple; }
			49.8% { background: FireBrick; }
			66.4% { background: BlueViolet; }
			83% { background: SpringGreen; }
			100% { background: DarkMagenta; }
		}
	</style>
</head>
<body>
	<div class="container" id="drop">
		<h1>HTML5 Music Player</h1>
		<audio src="" controls></audio>
		<ul id="queue">
		</ul>
	</div>
<script>

	var drop = document.querySelector('#drop'),
		player = document.querySelector('audio'),
		title = document.querySelector('h1'),
		queue = [],
		queueList = document.querySelector('#queue');

	drop.ondrop = function (e) {
		e.preventDefault();
		var reader = new FileReader();
		reader.onload = function (event) {
			if(player.src !== window.location.href) {
				queue.push(event.target.result);
			} else {
				player.src = event.target.result;
			}
		};

		if(player.src !== window.location.href) {
			var li = document.createElement('li');
			li.innerHTML = e.dataTransfer.files[0].name;
			li.addEventListener('click', playNext, false);
			queueList.appendChild(li);
		} else {
			title.innerHTML = e.dataTransfer.files[0].name;
		}
		reader.readAsDataURL(e.dataTransfer.files[0]);
	};

	var playNext = function () {
		console.log(this.innerHTML);
		for (var i = 0; i < queueList.children.length; i++) {
			if(queueList.children[i].innerHTML === this.innerHTML) {
				player.src = queue[i];
				title.innerHTML = this.innerHTML;
			}
		};
	}

</script>

</body>
</html>
	<!doctype html public "✰">
	<html>
	<head>
	<title>music player</title>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
	<style>
	body {
	font-family:'Open Sans';
	font-weight: 600;
	-webkit-animation:bg 30s;
	}

	.container {
	margin:0;
	width:100%;
	height:800px;
	text-align:center;
	}

	h1 {
	font-size:60px;
	text-shadow:0 1px 1px #fff;
	}

	audio {
	width:50%;
	margin:0 auto;
	}

	ul {
	width:50%;
	margin:1% auto;
	padding:0;
	}

	ul li {
	list-style:none;
	}

	ul li:nth-child(odd) {
	background:rgba(255,255,255,.2);
	}

	@-webkit-keyframes bg {
	0% { background: Crimson; }
	16.6% { background: LightBlue; }
	33.2% { background: MediumPurple; }
	49.8% { background: FireBrick; }
	66.4% { background: BlueViolet; }
	83% { background: SpringGreen; }
	100% { background: DarkMagenta; }
	}
	</style>
	</head>
	<body>
	<div class="container" id="drop">
	<h1>HTML5 Music Player</h1>
	<audio src="" controls></audio>
	<ul id="queue">
	</ul>
	</div>
	<script>

	var drop = document.querySelector('#drop'),
	player = document.querySelector('audio'),
	title = document.querySelector('h1'),
	queue = [],
	queueList = document.querySelector('#queue');

	drop.ondrop = function (e) {
	e.preventDefault();
	var reader = new FileReader();
	reader.onload = function (event) {
	if(player.src !== window.location.href) {
	queue.push(event.target.result);
	} else {
	player.src = event.target.result;
	}
	};

	if(player.src !== window.location.href) {
	var li = document.createElement('li');
	li.innerHTML = e.dataTransfer.files[0].name;
	li.addEventListener('click', playNext, false);
	queueList.appendChild(li);
	} else {
	title.innerHTML = e.dataTransfer.files[0].name;
	}
	reader.readAsDataURL(e.dataTransfer.files[0]);
	};

	var playNext = function () {
	console.log(this.innerHTML);
	for (var i = 0; i < queueList.children.length; i++) {
	if(queueList.children[i].innerHTML === this.innerHTML) {
	player.src = queue[i];
	title.innerHTML = this.innerHTML;
	}
	};
	}

	</script>

	</body>
	</html>