HTML5之audio：键盘控制音乐播放
今天下午学了下audio玩，功能很简单，主要就是通过键盘来控制音乐播放。
HTML：
<html>
<head>
<title> HTML5 </title>
</head>
<body>
<audio >
<source src="枫.ogg" type="audio/ogg"></source>
<source src="枫.mp3" type="audio/mp3"></source>
</audio>
<script type="text/javascript" src="html5.js"></script>
</body>
</html>
JavaScript：
var audio = document.getElementById('audio');
audio.play();
document.body.onkeyup = function(e){ //亦可绑定到audio，当鼠标点击到audio之后再按键可触发
var event = e || window.event;
console.log('keyCode : ' + event.keyCode);
console.log('volume : ' + audio.volume);
if(!arguments.callee.pause){
arguments.callee.pause = false;
}
if(event.keyCode == 40){ //下
try {
audio.volume -= 0.1;
}catch(e){
console.log('audio.volume is already the smallest : ' + audio.volume);
}
}else if(event.keyCode == 38){ //上
try {
audio.volume += 0.1;
}catch(e){
console.log('audio.volume is already the largest : ' + audio.volume);
}
}else if(event.keyCode == 39){ //右
audio.currentTime += 10;
}else if(event.keyCode == 37){ //左
audio.currentTime -= 10;
}else if(event.keyCode == 32){
if(!arguments.callee.pause){
arguments.callee.pause = true;
audio.pause();
}else{
arguments.callee.pause = false;
audio.play();
}
}
console.log('currentTime : ' + audio.currentTime);
};
- 上一篇 »PHP会话控制之Session介绍原理
- 下一篇 »PHP会话控制之Cookie使用例子
