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

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

代碼以下：

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！

你若安好，即是晴天！