H5頁面仿微信搖一搖及音訊(安卓和蘋果)
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