html5 实现摇一摇功能
需求：利用html5实现类似微信的手机摇一摇功能，并实现微博转发
?
难点：
1.监控摇动状态
2.播放摇动后音频
?
难点一，通过html5的DeviceMotionEvent实现，核心代码如下
var SHAKE_THRESHOLD = 3000; var last_update = 0; var x=y=z=last_x=last_y=last_z=0; function init(){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("摇动了");} last_x = x; last_y = y; last_z = z; } ?难点二：代码
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) { media.setAttribute("src","http://192.168.1.106/weixin_yaoyiyao.mp3");media.load(); media.play();} last_x = x; last_y = y; last_z = z; } } <audio style="display:hide" id="musicBox" preload="metadata" controls src="http://192.168.1.106/weixin_yaoyiyao.mp3"autoplay="false" > </audio> ?
?
此两种方式为目前唯一方式
?
但只能适用少数浏览器
?
ios平台，safari，可以监控摇动，但无法通过js直接播放音频
android平台，android os 自带浏览器无法监控摇动，但是第三方浏览器，opera，chrome均能监控摇动，也可以通过js直接播放音频
?
?
总之目前，用手机实现摇一摇功能，不能完全满足要求
?
?