基于HTML5实现微信网页版摇一摇功能demo代码

利用html5实现类似微信的手机摇一摇功能,并播放音乐。

1、  deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。

2、  deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。

不多说直接上代码,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,
 maximum-scale=2.0"/>
<meta name="MobileOptimized" content="240"/>
<title>HTML摇一摇。。。</title>
 
<script type="text/javascript">
       var SHAKE_THRESHOLD = 3000;    
    var last_update = 0;    
    var x=y=z=last_x=last_y=last_z=0;   
	var  media; 
	
	function init(){
	last_update=new Date().getTime();
	media= document.getElementById("musicBox");
	if (window.DeviceMotionEvent) { 
	window.addEventListener('devicemotion',deviceMotionHandler, false);  
	} else{
		
	alert('not support mobile event');
	}
	}

    function deviceMotionHandler(eventData) {    
	
    var acceleration =eventData.accelerationIncludingGravity;  
	 
    var curTime = new Date().getTime(); 
    if ((curTime - last_update)> 100) {  
		var diffTime = curTime -last_update;    
		last_update = curTime;        
		x = acceleration.x; 
		y = acceleration.y;   
		z = acceleration.z;   
		var speed = Math.abs(x +y + z - last_x - last_y - last_z) / 
diffTime * 10000;   
		
		if (speed > SHAKE_THRESHOLD) {    
			alert("shaked");		
			if(!media.src){
				media.src="http://192.168.1.106/weixin_yaoyiyao.mp3"
			}
			media.play();
		}    
		last_x = x;    
		last_y = y;    
		last_z = z;    
		}    
     
    }  

</script>


</head> 
 
<body onload="init()"> 
html5手机摇一摇功能,摇一摇试试看
 <audio style="display:hide" id="musicBox" preload="metadata"  controls
		autoplay="false"
     >
   </audio> 
</body> 
 
</html>

但只能适用少数浏览器:


ios平台,safari,可以监控摇动,但无法通过js直接播放音频

android平台,android os 自带浏览器无法监控摇动,但是第三方浏览器,opera,chrome均能监控摇动,也可以通过js直接播放音频


测试可以支持微信浏览器。OK。。。

关键词: 微信网页版摇一摇

上一篇: Windows下读取并恢复liunx系统EXT2/3/4分区文件:R-Linux
下一篇: MySQL性能优化之open_files_limit,table_open_cache和max_connections配置关系

目前还没有人评论,您发表点看法?
发表评论

评论内容 (必填):