will-in-wi/bare_js.html Secret

## bare_js.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, user-scalable=no" />

	<title>Audio test</title>

	<style>
		ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		ul.buttons > li {
			display: block;
			padding: 15px;
			margin-bottom: 10px;
			border: 1px solid black;
			text-align: center;
		}

		ul#log {
			overflow: scroll;
			height: 400px;
		}

		ul#log > li:nth-child(even) {
			background-color: #f0f0f0;
		}

		ul#log > li {
			display: block;
			padding: 10px 5px;
		}

		ul#log > li > pre {
			margin: 0;
		}
	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			"use strict";

			var debug = function(message) {
				var log = $('ul#log');

				log.append('<li><pre>' + message + '</pre></li>');

				var bare_log = log.get(0);

				// Stick to bottom.
				bare_log.scrollTop = bare_log.scrollHeight;
			}

			var audio = new Audio();

			debug('Audio element created');

			audio.addEventListener('canplay', function(ev) {
				debug('canplay event fired.')
				debug('audio duration: ' + audio.duration);
			});

			audio.addEventListener('error', function(ev) {
				debug('error event fired.')
				debug(ev);
			});

			audio.addEventListener('canplaythrough', function(ev) {
				debug('canplaythrough event fired.')
				debug('audio duration: ' + audio.duration);
			});

			audio.addEventListener('progress', function(ev) {
				debug('progress event fired.')
				debug('audio duration: ' + audio.duration);
			});

			audio.addEventListener('whileplaying', function(ev) {
				debug('whileplaying event fired.')
				debug('audio duration: ' + audio.duration);
			});

			audio.addEventListener('whileloading', function(ev) {
				debug('whileloading event fired.')
				debug('audio duration: ' + audio.duration);
			});

			// Click events

			$('.audio_click').click(function(){
				debug('Click event');

				var src = $(this).attr('data-audio');
				debug('Setting src to ' + src);

				audio.src = src;

				debug('src set');

				audio.play();

				debug('audio duration: ' + audio.duration);
			});

			$('.stop').click(function(){
				debug('pause fired');
				audio.pause();
			});
		});
	</script>
</head>
<body>
	<ul class="buttons">
		<li class="audio_click" data-audio="http://ondemand-http.stream.publicradio.org/performance_today/2014/01/13/pt1_20140113_128.mp3">Audio 1</li>
		<li class="audio_click" data-audio="http://ondemand-http.stream.publicradio.org/performance_today/2014/01/13/pt2_20140113_128.mp3">Audio 2</li>
		<li class="stop">Stop</li>
	</ul>

	<h2>Log</h2>
	<ul id="log"></ul>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, user-scalable=no" />

	<title>Audio test</title>

	<style>
	ul {
	list-style: none;
	padding: 0;
	margin: 0;
	}

	ul.buttons > li {
	display: block;
	padding: 15px;
	margin-bottom: 10px;
	border: 1px solid black;
	text-align: center;
	}

	ul#log {
	overflow: scroll;
	height: 400px;
	}

	ul#log > li:nth-child(even) {
	background-color: #f0f0f0;
	}

	ul#log > li {
	display: block;
	padding: 10px 5px;
	}

	ul#log > li > pre {
	margin: 0;
	}
	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(function(){
	"use strict";

	var debug = function(message) {
	var log = $('ul#log');

	log.append('<li><pre>' + message + '</pre></li>');

	var bare_log = log.get(0);

	// Stick to bottom.
	bare_log.scrollTop = bare_log.scrollHeight;
	}

	var audio = new Audio();

	debug('Audio element created');

	audio.addEventListener('canplay', function(ev) {
	debug('canplay event fired.')
	debug('audio duration: ' + audio.duration);
	});

	audio.addEventListener('error', function(ev) {
	debug('error event fired.')
	debug(ev);
	});

	audio.addEventListener('canplaythrough', function(ev) {
	debug('canplaythrough event fired.')
	debug('audio duration: ' + audio.duration);
	});

	audio.addEventListener('progress', function(ev) {
	debug('progress event fired.')
	debug('audio duration: ' + audio.duration);
	});

	audio.addEventListener('whileplaying', function(ev) {
	debug('whileplaying event fired.')
	debug('audio duration: ' + audio.duration);
	});

	audio.addEventListener('whileloading', function(ev) {
	debug('whileloading event fired.')
	debug('audio duration: ' + audio.duration);
	});

	// Click events

	$('.audio_click').click(function(){
	debug('Click event');

	var src = $(this).attr('data-audio');
	debug('Setting src to ' + src);

	audio.src = src;

	debug('src set');

	audio.play();

	debug('audio duration: ' + audio.duration);
	});

	$('.stop').click(function(){
	debug('pause fired');
	audio.pause();
	});
	});
	</script>
	</head>
	<body>
	<ul class="buttons">
	<li class="audio_click" data-audio="http://ondemand-http.stream.publicradio.org/performance_today/2014/01/13/pt1_20140113_128.mp3">Audio 1</li>
	<li class="audio_click" data-audio="http://ondemand-http.stream.publicradio.org/performance_today/2014/01/13/pt2_20140113_128.mp3">Audio 2</li>
	<li class="stop">Stop</li>
	</ul>

	<h2>Log</h2>
	<ul id="log"></ul>
	</body>
	</html>