Html5 web apps shake songs, html5app

Html5 web apps shake songs, html5app

You can shake a song, recognize the song based on the sound, and return the song information. Using the deviceOrientation feature of html5 and the deviceMotion event, you can also implement the similar shake function on the web app, the native app implementation also has related interfaces. Here we only consider the web app situation ......

 

Section One

Let's take a look at the demo:

Test address: http://hcy2367.github.io/music,Please open the link in the mobile browser. We recommend that you operate on the Wi-Fi network. Otherwise, the traffic for a song may be a little slow, and then shake the song.

Let's take a look at the following html5 features:

• 1. deviceOrientation;
• 2. deviceMotion: Motion sensor data event. By monitoring this event, you can obtain motion acceleration data in the mobile phone's motion status;
• 3. deviceMotionEvent: determines whether the browser supports this event attribute. If yes, the browser listens to the deviceMotion event and returns an event object about the device's acceleration and rotation. The object contains two attributes: accelerationIncludingGravity (acceleration with gravity) and acceleration (acceleration), the latter ruled out the impact of gravity. The acceleration data contains three axes: x, y, and z.

Section Two

How can I determine if a user shakes the phone? The main points to consider are as follows: 1. Most users shake their mobile phones in one direction. 2. The acceleration data in the three directions will change; 3. We cannot misjudge normal mobile phone movements. For example, when we are walking, the mobile phone placed in the trouser pocket will also change the acceleration data. To sum up, we should calculate the acceleration in three directions, measure them at intervals, evaluate their change rate in a fixed period of time, and determine a threshold for it to trigger the action.

The Code is as follows:

Var shakeThreshold = 1000; // defines a shaking threshold value var lastUpdate = 0; // records the last shaking time var x, y, z, lastX, lastY, lastZ; // define the data of the x, y, and z axes and the data triggered last time. // listen to the sensor motion event if (window. deviceMotionEvent) {window. addEventListener ('devicdemo', deviceMotionHandler, false);} else {alert ('devicemotion events not supported by this device ');} // motion sensor processing function deviceMotionHandler (eventData) {var acceleration = eventData. accelerationIncludingGravity; // obtains the acceleration of gravity. var curTime = new Date (). getTime (); // judge the location in 100 milliseconds 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; // front and back x, y, if the absolute value and time ratio of the difference between z exceeds the preset threshold, it is determined that the device has performed the shaking operation if (speed> shakeThreshold) {doSomething ();} lastX = x; lastY = y; las-1 = z ;}}

 

Last

In fact, web apps have a wide range of single-page applications, with low development costs. phonegap can also achieve the shake function at the webview layer, and then package it into a platform app. You can also use navigator. the accelerometer accelerator plug-in implements the shake function. In fact, it uses js to implement local interfaces and cross-platform implementation. However, this method is not as powerful as the native api, html5 will play a important role in the future!

If you are happy, it will be sunny!