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

一、用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代码如下：<
4000
/span>

1、定义一些用到的变量

  var SHAKE_THRESHOLD = 1800;  //定义触发动作的阈值
var last_update = 0;         //上一次触发的时间
var x = y = z = last_x = last_y = last_z = 0;//x,y,z当前加速度,last_z,last_x,last_y上次加速度

    var num = 0;

    var numMax = 3;

  //调用

    listenPhoneShake();

    //监听摇一摇的动作
function listenPhoneShake() {
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler,false);
console.log("addEventListener devicemotion");
} else {
alert('抱歉，你的手机配置实在有些过不去，考虑换个新的再来试试吧');
}
}

// --检测设备是否有摇一摇动作
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) {
handelShakingMotion();
}
last_x = x;
last_y = y;
last_z = z;
}
}

// 设备有摇一摇动作，则对页面已摇次数进行加1，若已经摇到最大次数numMax，则请求抢红包接口
function handelShakingMotion() {
num++;
// 添加摇一摇的声音
$('#shakingAudio').trigger('play');
document.getElementById("numberCount").innerHTML = num;
if (num == numMax) {
num = 0;
// 关闭摇一摇的接口
window.removeEventListener("devicemotion", deviceMotionHandler);
// 添加摇到红包的声音
$('#shakingResult').trigger('play');
// 摇一摇结束之后，请求抢红包接口
drawRedbag(openid);
}

    }

二、添加摇一摇的声音和摇到红包的声音

  利用jquery事件trigger():触发被选元素的指定事件类型。

1、HTML如下：

    <!-- 摇一摇的声音 -->
<audio src="mp3/shakingAudio.mp3" preload="preload" id="shakingAudio"></audio>
<!-- 摇到红包的声音 -->
<audio src="mp3/shakingResult.mp3" preload="preload" id="shakingResult"></audio>

2、jquery如下：

    // 添加摇一摇的声音 

    $('#shakingAudio').trigger('play');

   // 添加摇到红包的声音
$('#shakingResult').trigger('play'); 

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

解决iphone进入网页，不能能自动播放音乐的bug

原理：利用微信WeixinJSBridgeReady事件，这个是微信浏览器自带提供的事件，微信ready()之后播放。

先在html中引入jquery.js插件，然后在js文件里面写如下代码：

$(function(){
//一般android机都能自动播放
$('#shakingAudio').play();
//处理iphone不能自动播放
document.addEventListener('WeixinJSBridgeReady',function(){
$('#shakingAudio').play();
},false);
});