一、用HTML5实现手机摇一摇的功能并配上声音

HTML5的一个重要特性：DeviceOrientation，他将底层的方向传感器和运动传感器进行了高级封装，提供DOM事件支持。

DeviceOrientation这个特性包括两种事件：

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

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

设备运动事件：DeviceMotionEvent返回设备有关于加速度和旋转的相关信息，加速度包含x，y，z数据

该事件有连个属性：accelerationIncludingGravity(含重力的加速度)     acceleration(排除重力的加速度)

原理如下：针对三个方向的加速度进行计算，间隔测量他们，考察它们在固定时间内的变化率，为它定义一个阈值

                   来确定触发动作。
        1、监听运动传感事件

         if(window.DeviceMotionEvent){

  window.addEventListener('devicemotion',deviceMotionHandler,false);

                }

        2、获取含重力的加速度

             function deviceMotionHandler(eventData){

var acceleration = eventData.accelerationIncludingGravity;

            } 

JS代码如下：

1、定义一些用到的变量

  //调用









二、添加摇一摇的声音和摇到红包的声音
  利用jquery事件trigger():触发被选元素的指定事件类型。
1、HTML如下：


2、jquery如下：

问题：在android下，trigger()函数是有效的，即能自动播放音乐，但是在iphone下是无效的，即iphone机这样设置是不能自动播放声音的，因为iphone机内置浏览器safari默认下将自动播放功能禁止了，需要人为触发才行。



解决iphone进入网页，不能能自动播放音乐的bug
原理：利用微信WeixinJSBridgeReady事件，这个是微信浏览器自带提供的事件，微信ready()之后播放。
先在html中引入jquery.js插件，然后在js文件里面写如下代码：