/jsbin.AqEZAfu.html

## jsbin.AqEZAfu.html
<!DOCTYPE html>
<html>
<head>
<script>

window.onload=function(){

	var myAudio = document.getElementById('my-audio');
	var controlBar = document.getElementById('control-bar');

	// we add our listeners

	myAudio.addEventListener('timeupdate', updatePlayed, false);
		myAudio.addEventListener('progress', updateBuffered, false);

	function updatePlayed() {
		var played = parseInt(((myAudio.currentTime / myAudio.duration) * 100), 10);
		// gives us a percentage
		addBars(played,'played-bar');
	}

	function updateBuffered() {
		var loaded = parseInt(((myAudio.buffered.end(0) / myAudio.duration) * 100), 10);
		// gives us a percentage
		addBars(loaded,'buffer-bar');
	}

	function addBars(amount,element) {
		var bars = "00";
		// since our bars are in increments of 10
		for (i=10; i < 100; i = i + 10) {
			if (i <= amount) {
				bars = bars + " " + i;
			}
		}

		var bar = document.getElementById(element);
	    bar.innerHTML = bars;
	}

	controlBar.onclick = setTime;

	function setTime(e) {
		var playPosition = e.target.getAttribute('href'); // from 0 to 90
		myAudio.currentTime = (myAudio.duration * playPosition)/100;
		myAudio.play();
		return false;
	}
}
</script>
</head>
<body>
	<audio id="my-audio" preload>
		<source src="http://jPlayer.org/audio/mp3/Miaow-07-Bubble.mp3" >
		<source src="http://jPlayer.org/audio/ogg/Miaow-07-Bubble.ogg" >
		<!-- place fallback here as <audio> supporting browsers will ignore it -->
		<a href="http://jPlayer.org/audio/ogg/Miaow-07-Bubble.ogg">http://jPlayer.org/audio/ogg/Miaow-07-Bubble.ogg</a>
	</audio>

	<div id="played-bar">00</div>
	<div id="buffer-bar">00</div>
	<div id="control-bar">
		<a href='0'>00</a> <a href='10'>10</a> <a href='20'>20</a> <a href='30'>30</a> <a href='40'>40</a> <a href='50'>50</a> <a href='60'>60</a> <a href='70'>70</a> <a href='80'>80</a> <a href='90'>90</a>
	</div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script>

	window.onload=function(){

	var myAudio = document.getElementById('my-audio');
	var controlBar = document.getElementById('control-bar');

	// we add our listeners

	myAudio.addEventListener('timeupdate', updatePlayed, false);
	myAudio.addEventListener('progress', updateBuffered, false);

	function updatePlayed() {
	var played = parseInt(((myAudio.currentTime / myAudio.duration) * 100), 10);
	// gives us a percentage
	addBars(played,'played-bar');
	}

	function updateBuffered() {
	var loaded = parseInt(((myAudio.buffered.end(0) / myAudio.duration) * 100), 10);
	// gives us a percentage
	addBars(loaded,'buffer-bar');
	}

	function addBars(amount,element) {
	var bars = "00";
	// since our bars are in increments of 10
	for (i=10; i < 100; i = i + 10) {
	if (i <= amount) {
	bars = bars + " " + i;
	}
	}

	var bar = document.getElementById(element);
	bar.innerHTML = bars;
	}

	controlBar.onclick = setTime;

	function setTime(e) {
	var playPosition = e.target.getAttribute('href'); // from 0 to 90
	myAudio.currentTime = (myAudio.duration * playPosition)/100;
	myAudio.play();
	return false;
	}
	}
	</script>
	</head>
	<body>
	<audio id="my-audio" preload>
	<source src="http://jPlayer.org/audio/mp3/Miaow-07-Bubble.mp3" >
	<source src="http://jPlayer.org/audio/ogg/Miaow-07-Bubble.ogg" >
	<!-- place fallback here as <audio> supporting browsers will ignore it -->
	<a href="http://jPlayer.org/audio/ogg/Miaow-07-Bubble.ogg">http://jPlayer.org/audio/ogg/Miaow-07-Bubble.ogg</a>
	</audio>

	<div id="played-bar">00</div>
	<div id="buffer-bar">00</div>
	<div id="control-bar">
	<a href='0'>00</a> <a href='10'>10</a> <a href='20'>20</a> <a href='30'>30</a> <a href='40'>40</a> <a href='50'>50</a> <a href='60'>60</a> <a href='70'>70</a> <a href='80'>80</a> <a href='90'>90</a>
	</div>

	</body>
	</html>