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

HTML5实现摇一摇的功能（实测后）--转的更多相关文章

  1. html5实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  2. 用HTML5实现手机摇一摇的功能(转)

    在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1.devi ...

  3. Adobe Edge Animate --使用HTML5实现手机摇一摇功能

    Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...

  4. HTML5的DeviceOrientation实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  5. html5实现摇一摇功能

    原理:使用DeviceMotion实现,关于DeviceMotion介绍可以查看 https://developer.mozilla.org/en-US/docs/Web/Reference/Even ...

  6. 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能

      介绍之前做两个声明: 以下代码可以直接运行,当然你别忘了引用jQuery才行. <script> // DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装, ...

  7. html5 DeviceOrientation来实现手机网站上的摇一摇功能

    原文地址:http://www.cootm.com/?p=706 从网上转载看到的,感觉不错,就转过来了,特此感谢 cnblogs 的 幸福2胖纸的码农生活,直接转载了,不要介意!呵呵 以下是转载内容 ...

  8. 使用Html5的DeviceOrientation特性实现摇一摇功能

    如今非常多的手机站点上也有类似于微信一样的摇一摇功能了,比方什么摇一摇领取红包,领取礼品等等 1,deviceOrientation:封装了方向传感器数据的事件,能够获取手机静态状态下的方向数据,如手 ...

  9. h5手机摇一摇功能实现：基于html5重力感应DeviceMotionEvent事件监听手机摇晃

    DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...

随机推荐

  1. [Windows Azure] About Affinity Groups for Virtual Network

    Affinity groups are the way to group the services in your Windows Azure subscription that need to wo ...

  2. Python爬虫设置Headers

    Python设置Headers import urllib import urllib2 url = 'http://www.server.com/login' user_agent = 'Mozil ...

  3. Python（五）之迭代器和列表解析

    Python迭代器和列表解析 迭代器 例如: In [1]: l1 = [1,2,3,4,5] dir(i1)可以看到内置方法'__iter__' 生成一个迭代器: l1.__iter__,或i2 = ...

  4. C#学习笔记（23）——C#将PPT批量转为JPG（aspose方法）

    说明(2017-7-31 18:30:25): 1. 最主要的是下载到aspose的破解文件,我在这里下载的http://www.lenosoft.net/down/10205.htm,如果不差钱可以 ...

  5. 3. 文本相似度计算-DSSM算法

    1. 文本相似度计算-文本向量化 2. 文本相似度计算-距离的度量 3. 文本相似度计算-DSSM算法 4. 文本相似度计算-CNN-DSSM算法 1. 前言 最近在学习文本相似度的计算,前面两篇文章 ...

  6. mysql防止误删除的方法

    为了防止在更新和删除的时候,没有写where条件而对全部数据进行操作,mysql提供了一个参数来防止此情况的发生 需要在启动mysql的时候,增加参数--i-am-a-dummy含义是我是新手,或者使 ...

  7. 3种PHP连接MYSQL数据库的常用方法

    对于PHP入门用户来说,我们只要掌握基本的数据库写入.读取.编辑.删除等基本的操作就算入门,也可以写出简单的程序出来,比如留言本.新闻文章系统等等.在整个过程中,MySQL数据库的连接也是比较重要的, ...

  8. The Swift.org Blog welcome欢迎页note

    The Swift.org Blog Welcomehtml, body {overflow-x: initial !important;}html { font-size: 14px; } body ...

  9. mongo源码学习（三）请求接收传输层

    在上一篇博客中(mongo源码学习(二)db.cpp之mongoDbMain方法分析),我们把db.cpp中的mongoDbMain的执行过程分析了一下,最后会调用initAndListen(serv ...

  10. ios开发，app调用资源文件到C++的方法

    为了读取资源文件到cpp.供opencv处理,采取的方式是把之前的cpp文件的后缀改成:.mm 然后会出现各种报错,原因是因为命名冲突,前面加上cv::就行. const char* imagePat ...