H5页面仿微信摇一摇,动作以及音频的知识点和代码,在Android和IOS的兼容问题
测试环境:微信浏览器
一、摇一摇:
1.知识点
涉及事件DeviceMotionEvent,该事件返回设备有关于加速度和旋转的相关信息。加速度包括X、Y、Z轴
X轴横穿屏幕,Y轴纵穿过屏幕,Z轴垂直于屏幕。
如下图:
一般情况下,摇一摇动作仅会用到X轴和Y轴,但写判断算法时仍要考虑。
包含加速度的返回值有两个:accelerationIncludeingGravity(包含重力的加速度) 和 acceleration(加速度),
通常使用前者。
如何判断,是否是用户摇晃手机:
①用户大多数按照同一方向摇晃;
②一旦摇晃,3个方向轴的加速度必然有值;
③排除特殊情况如:手机在裤兜里,人在运动;手机在桌面上被拿起或者放下;
以上3点,需要对判断算法进行 摇晃幅度(方向轴差值)、时间间隔或固定时间内的加速度变化率 做测试和优化,确定阈值。
2.代码
①if(window.DeviceMotionEvent) {
window.addEventListener('devicemotion', 摇一摇函数名, false);
} else {
alert('抱歉,当前浏览器不支持摇一摇,请用微信浏览器访问');
}②var SHAKE_THRESHOLD = 400; //可以理解为 灵敏度
var last_update = 0; //最后一次触发时间
var x = y = z = last_x = last_y = last_z = 0; //三个方向的加速度
var flag = 0; //未摇晃的状态值。避免出现 未点击弹窗就再次触发摇一摇 的问题③function 摇一摇函数名(eventData) {
if (flag == 0) {
var acceleration = eventData.accelerationIncludingGravity; //获取重力加速度
var curTime = new Date().getTime();
if ((curTime - last_update) > 500) { //间隔阈值
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;
//var speed = Math.sqrt((x-last_x)*(x-last_x)+(y-last_y)*(y-last_y)+(z-last_z)*(z-last_z))/diffTime*10000;
if (speed > SHAKE_THRESHOLD) {
flag = 1; //此状态下可以视为 触发了摇一摇
弹窗提示,播放摇一摇音频;
如果点击了弹窗,此时将 flag = 0;}
last_x = x;
last_y = y;
last_z = z;}
}}
二、H5播放音频
知识点 及 代码:
安卓可以使用以下代码,完成播放:
<audio src="xxxxxx/music/shake.wav" preload="preload" id="shakingAudio"></audio>
$('#shakingAudio').trigger('play');
但是苹果无效,使用者可能处在付费网络环境中,因此在IOS上的safari(包含所有装置及ipad)禁止了预加载和自动播放,preload失效。原因详情请参考:Safari HTML5 Audio and Video Guide 以及 克服 iOS HTML5 音频的局限 。
解决方案:
<audio src="xxxxxx/music/shake.wav" preload="preload" id="shakingAudio"></audio>
var shakeMusic = document.getElementById("shakingAudio");
document.addEventListener("WeixinJSBridgeReady", function () {shakeMusic.load();}, false);shakeMusic.play();
最后,推荐一个移动端很好用的弹层UI layer mobil