zoukankan      html  css  js  c++  java
  • HTML5之audio:键盘控制音乐播放

    今天下午学了下audio玩,功能很简单,主要就是通过键盘来控制音乐播放。

    HTML:

    <html>
    <head>
    <title> HTML5 </title>
    </head>
    <body>
    <audio id="audio" controls="controls">
    	<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);
    };
    

      

      

  • 相关阅读:
    10年后方向
    nginx的配置文件server_name的意义 location意义
    java程序员应该知道的20个有用的库
    集群和分布式区别
    noVNC连接CentOS,以Web方式交付VNC远程连接
    centos7.2云主机安装桌面
    centos7.2 rabbitmq3.6.2源码部署
    Linux下打包压缩war和解压war包 zip和jar
    CentOS7.2下安装mongoDB3.2.8
    centos7 mysql5.7.17源码安装
  • 原文地址:https://www.cnblogs.com/realwall/p/2560213.html
Copyright © 2011-2022 走看看