H5 摇一摇

最新推荐文章于 2023-02-28 10:15:56 发布

OkidoGreen

最新推荐文章于 2023-02-28 10:15:56 发布

阅读量1.9k

点赞数 1

分类专栏：前端-Html5

前端-Html5 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

HTML5实现摇一摇的功能（实测后）--转

eviceMotionEvent（设备运动事件）返回设备有关于加速度和旋转的相关信息。加速度的数据将包含三个轴：x，y和z（示意如下图所示，x轴横向贯穿手机屏幕或者笔记本键盘，y轴纵向贯穿手机屏幕或笔记本键盘，z轴垂直于手机屏幕或笔记本键盘）。因为有些设备可能没有硬件来排除重力的影响，该事件会返回两个属性，accelerationIncludingGravity（含重力的加速度）和acceleration（加速度），后者排除了重力的影响。

涉及到我们如何计算用户摇晃手机的原理了。考虑的要点如下：

1、用户大多时候都是以一个方向为主晃动手机来进行摇动；

2、在晃动时三个方向的加速度数据必定都会变化；

3、我们不能误判手机正常的运动行为，想一想，如果你的手机放在裤兜里，走路时它也会有加速度数据变化。

综上，我们应该针对三个方向的加速度进行计算，间隔测量它们，考察它们在固定时间段里的变化率，而且需要为它确定一个阈值来触发动作。

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

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

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

我们需要定义几个变量来记录历史x、y、z轴的数据以及上一次触发的时间。核心方法实现代码如下：

Javascript：

 
          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( 
          "摇动了" 
          ); 
         
          media.setAttribute( 
          "src" 
          ,  
          "http://www.XXX.com/Pages/test/Kalimba.mp3" 
          ); 
         
          media.load(); 
         
          media.play();  
         
          } 
         
          last_x = x; 
         
          last_y = y; 
         
          last_z = z; 
         
          } 
         
          }

Html：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>摇一摇功能</title>
    <script type="text/javascript">
        //Javascript
    </script>
</head>
<body onload="init()">
<p>用力摇一摇你手机</p>
<audio style="display:hiden" id="musicBox" preload="metadata" controls src="http://211.148.5.228:8002/Pages/test/Kalimba.mp3" autoplay="false">
</audio>
</body>
</html>

请在手机上用支持DeviceOrientation的浏览器打开

IOS 测试：Safari 弹框\不播放音乐, Chroma 弹框\不播放音乐,UC弹框\不播放音乐

Andriod 测试：UC弹框\播放音乐,Chroma 弹框\播放音乐,内置浏览器弹框\播放音乐

需要我们注意的是：ios平台，safari，可以监控摇动，但无法通过js直接播放音频；android平台，android os 自带浏览器无法监控摇动，但是第三方浏览器，opera，chrome均能监控摇动，也可以通过js直接播放音频

原文地址：http://blog.csdn.net/david1030/article/details/8229008

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
    </head>  
    <body>  
        <div id="status"></div>     
    </body>  
    <script>  
       var shake=4000,   
           last_update=0,   
           count=0,  
           x=y=z=last_x=last_y=last_z=0;  
       if(window.DeviceMotionEvent){  
            window.addEventListener("devicemotion",deviceMotionHandler,false);  
       }else{  
         alert("本设备不支持devicemotion事件");  
       }  
       console.log(new Date().valueOf());  
       function deviceMotionHandler(eventData){  
            var acceleration = eventData.accelerationIncludingGravity,  
                currTime=new Date().valueOf(),  
                diffTime=currTime-last_update;  
   
                if(diffTime>100){  
                   last_update=currTime;  
                   x=acceleration.x;  
                   y=acceleration.y;  
                   z=acceleration.z;  
                   var speed=Math.abs(x+y+z-last_x-last_y-last_z)/diffTime*10000  
                   var status=document.getElementById("status");  
                   if(speed>shake){  
                         count++;  
                         status.innerHTML = "你摇了中"+count+"次" ;  
                   }  
                   last_x = x;  
                   last_y = y;  
                   last_z = z;  
                }  
       }  
    </script>  
</html>

devicemotion 获取设备加速度信息。其事件对象返回有3个值，但是我用到的是accelerationIncludingGravity 考虑了重力的影响。地球引力值是9.81 返回的X,Y,Z 其中的Z轴就是9.81 不过有正负之分水平向上在安卓里面显示的是是+9.81 在苹果里面显示的是-9.81 （最然对于我们的计算没有影响，但是写出来让大家了解一下，免得测试的时候有疑问）。

注意:返回的X,Y,Z的属性值的单位是m/s^2