piatra · July 27, 2012 19:52
diff --git a/index.html b/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>