用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代码如下：

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);
});