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