Skip to content

Instantly share code, notes, and snippets.

@fillano
Created October 18, 2010 15:04
Show Gist options
  • Save fillano/632349 to your computer and use it in GitHub Desktop.
Save fillano/632349 to your computer and use it in GitHub Desktop.
利用audio標籤加上controls屬性來控制,然後檢視相關屬性在播放中的變化。
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment