eviceMotionEvent（設備運動事件）返回設備有關於加速度和旋轉的相關信息。加速度的數據將包含三個軸：x，y和z（示意如下圖所 示，x軸橫向貫穿手機屏幕或者筆記本鍵盤，y軸縱向貫穿手機屏幕或筆記本鍵盤，z軸垂直於手機屏幕或筆記本鍵盤）。因為有些設備可能沒有硬件來排除重力的 影響，該事件會返回兩個屬性，accelerationIncludingGravity（含重力的加速度）和acceleration（加速度），后者 排除了重力的影響。
涉及到我們如何計算用戶搖晃手機的原理了。考慮的要點如下：
1、 用戶大多時候都是以一個方向為主晃動手機來進行搖動；
2、 在晃動時三個方向的加速度數據必定都會變化；
3、 我們不能誤判手機正常的運動行為，想一想，如果你的手機放在褲兜里，走路時它也會有加速度數據變化。
綜上，我們應該針對三個方向的加速度進行計算，間隔測量它們，考察它們在固定時間段里的變化率，而且需要為它確定一個閾值來觸發動作。
利用html5實現類似微信的手機搖一搖功能，並播放音樂。
1、 deviceOrientation：封裝了方向傳感器數據的事件，可以獲取手機靜止狀態下的方向數據，例如手機所處角度、方位、朝向等。
2、 deviceMotion：封裝了運動傳感器數據的事件，可以獲取手機運動狀態下的運動加速度等數據。
我們需要定義幾個變量來記錄歷史x、y、z軸的數據以及上一次觸發的時間。核心方法實現代碼如下：
Javascript：
var SHAKE_THRESHOLD = 3000;
var last_update = 0;
var x = y = z = last_x = last_y = last_z = 0;
function init() {
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert('not support mobile event');
}
}
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) {
alert("搖動了");
media.setAttribute("src", "http://www.XXX.com/Pages/test/Kalimba.mp3");
media.load();
media.play();
}
last_x = x;
last_y = y;
last_z = z;
}
}
Html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>搖一搖功能</title> <script type="text/javascript"> //Javascript </script> </head> <body onload="init()"> <p>用力搖一搖你手機</p> <audio style="display:hiden" id="musicBox" preload="metadata" controls src="http://211.148.5.228:8002/Pages/test/Kalimba.mp3" autoplay="false"> </audio> </body> </html>
請在手機上用支持DeviceOrientation的瀏覽器打開
IOS 測試：Safari 彈框\不播放音樂, Chroma 彈框\不播放音樂,UC彈框\不播放音樂
Andriod 測試：UC彈框\播放音樂,Chroma 彈框\播放音樂,內置瀏覽器 彈框\播放音樂
需要我們注意的是：ios平台，safari，可以監控搖動，但無法通過js直接播放音頻；android平台，android os 自帶瀏覽器無法監控搖動，但是第三方瀏覽器，opera，chrome均能監控搖動，也可以通過js直接播放音頻
原文地址：http://blog.csdn.net/david1030/article/details/8229008