利用html5实现类似微信的手机摇一摇功能,并播放音乐。
1、 deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。
2、 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。
不多说直接上代码,
Javascript:
[javascript]view plain copy varSHAKE_THRESHOLD=3000;varlast_update=0;varx=y=z=last_x=last_y=last_z=0;functioninit(){if(window.DeviceMotionEvent){window.addEventListener('devicemotion',deviceMotionHandler,false);}else{alert('notsupportmobileevent');}}functiondeviceMotionHandler(eventData){varacceleration=eventData.accelerationIncludingGravity;varcurTime=newDate().getTime();if((curTime-last_update)>100){vardiffTime=curTime-last_update;last_update=curTime;x=acceleration.x;y=acceleration.y;z=acceleration.z;varspeed=Math.abs(x+y+z-last_x-last_y-last_z)/diffTime*10000;if(speed>SHAKE_THRESHOLD){alert("摇动了");media.setAttribute("src","http://211.148.5.228:8002/Pages/test/Kalimba.mp3");media.load();media.play();}last_x=x;last_y=y;last_z=z;}}
Html:
[html]view plain copy <!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>摇一摇功能</title><scripttype="text/javascript">//Javascript</script></head><bodyοnlοad="init()"><p>用力摇一摇你手机</p><audiostyle="display:hiden"id="musicBox"preload="metadata"controlssrc="http://211.148.5.228:8002/Pages/test/Kalimba.mp3"autoplay="false"></audio></body></html>
IOS 测试:Safari 弹框\不播放音乐, Chroma 弹框\不播放音乐,UC弹框\不播放音乐
Andriod 测试:UC弹框\播放音乐,Chroma 弹框\播放音乐,内置浏览器弹框\播放音乐