html5實現web app搖一搖換歌

微信可以搖歌曲，根據聲音識別出歌曲，然後返回歌曲信息，利用html5的deviceOrientation特性和deviceMotion事件也可以在web app上實現類似於微信搖一搖的功能，原生的app實現也有相關接口，這裏只考慮web app的情況......

 

Section One

先來看下demo效果圖：

測試地址：http://hcy2367.github.io/music/，請在手機瀏覽器中打開該鏈接，建議WiFi下操作，否則一首歌幾M的流量挺坑的，然後搖一搖換歌，操作可能會有點慢。

先來看下html5的這幾個特性：

• 1.deviceOrientation：方向傳感器數據的事件，通過監聽該事件可以獲取手機靜態狀態下的方向數據；
• 2.deviceMotion: 運動傳感器數據事件，通過監聽該事件可以獲取手機運動狀態下的運動加速度數據；
• 3.DeviceMotionEvent: 判斷瀏覽器是否支持該事件屬性，如果支持則監聽deviceMotion事件，返回設備有關於加速度和旋轉的事件對象，該對象包含兩個屬性，accelerationIncludingGravity（含重力的加速度）和acceleration（加速度），後者排除了重力的影響。其中加速度的數據包含三個軸：x，y和z。

Section Two

如何判斷用戶搖晃了手機？考慮的要點如下： 1、用戶大多時候都是以一個方向爲主晃動手機來進行搖動； 2、在晃動時三個方向的加速度數據必定都會變化； 3、我們不能誤判手機正常的運動行爲，例如我們在走路時，放在褲兜裏的手機也會有加速度數據變化。 綜上，我們應該針對三個方向的加速度進行計算，間隔測量它們，考察它們在固定時間段裏的變化率，而且需要爲它確定一個閾值來觸發動作。

代碼如下：

var shakeThreshold = 1000; // 定義一個搖動的閾值
    var lastUpdate = 0; // 記錄上一次搖動的時間
    var x, y, z, lastX, lastY, lastZ; // 定義x、y、z記錄三個軸的數據以及上一次觸發的數據

// 監聽傳感器運動事件
if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
    alert('本設備不支持devicemotion事件');
}

// 運動傳感器處理
function deviceMotionHandler(eventData) {
    var acceleration = eventData.accelerationIncludingGravity; // 獲取含重力的加速度
    var curTime = new Date().getTime();

    // 100毫秒進行一次位置判斷
    if ((curTime - lastUpdate) > 100) {

        var diffTime = curTime - lastUpdate;
        lastUpdate = curTime;

        x = acceleration.x;
        y = acceleration.y;
        z = acceleration.z;

        var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
        // 前後x, y, z間的差值的絕對值和時間比率超過了預設的閾值，則判斷設備進行了搖晃操作
        if (speed > shakeThreshold) {
            doSomething();
        }

        lastX = x;
        lastY = y;
        lastZ = z;
    }
}

 

Last

其實web app的單頁應用已經很廣泛了，開發成本低，phonegap也可以在webview層通過這種方式實現搖一搖功能，然後打包成平臺的app。另外也可以利用navigator.accelerometer加速器插件實現搖一搖的功能，實際上是通過js去實現本地的接口，實現跨平臺，但這種方式沒原生提供的api強大，html5 will play a important role in the future！

你若安好，便是晴天！