一、用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); });