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！

你若安好，便是晴天！

html5實現web app搖一搖換歌