H5页面仿微信摇一摇及音频(安卓和苹果)

H5页面仿微信摇一摇，动作以及音频的知识点和代码，在Android和IOS的兼容问题

测试环境：微信浏览器

一、摇一摇：

1.知识点

涉及事件DeviceMotionEvent，该事件返回设备有关于加速度和旋转的相关信息。加速度包括X、Y、Z轴

X轴横穿屏幕，Y轴纵穿过屏幕，Z轴垂直于屏幕。

如下图：

一般情况下，摇一摇动作仅会用到X轴和Y轴，但写判断算法时仍要考虑。

包含加速度的返回值有两个：accelerationIncludeingGravity(包含重力的加速度) 和 acceleration(加速度)，

通常使用前者。

扫描二维码关注公众号，回复： 4422428 查看本文章

如何判断，是否是用户摇晃手机：

①用户大多数按照同一方向摇晃；

②一旦摇晃，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

H5页面仿微信摇一摇及音频(安卓和苹果)

猜你喜欢