Untitled

<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
</head>
<body>
<audio src="bwv4_overture.mp3" controls id="player"></audio>
<div id="panel"></div>
</body>
</html>
<script>
(function(window, undefined) {
	var player = document.getElementById('player'),
	map = ['error','src','currentSrc','networkState','readyState','preload','buffered','played','seekable','seeking','currentTime','startTime','duration','paused','defaultPlaybackRate','playbackRate','ended','autoplay','loop','controls','volume','muted'];
	window.setInterval(function(){
		var str = '';
		for(var i=0, j=map.length; i<j; i++) {
			if(player[map[i]]!==null && player[map[i]].toString().indexOf('TimeRanges')>-1) {
				if(player[map[i]].length > 0) {
					str += map[i] + ' : ' + '<div style="border: dotted 1px #336699">\n';
					for(var m=0,n=player[map[i]].length; m<n; m++) {
						str += 'timerange['+m+']: {start:'+player[map[i]].start(m) +',end:'+ player[map[i]].end(m)+'}<br>\n';
					}
					str += '</div>';
				} else {
					str += 'nothing<br>\n';
				}
			} else {
				str += map[i] + ' : ' + player[map[i]] + '<br>\n';
			}
		}
		document.getElementById('panel').innerHTML = str;
	}, 1000);
})(window);
</script>