HTML5 implement web App shake a song

Can shake the song, according to the voice to recognize the song, and then return to the song information, the use of HTML5 deviceorientation features and Devicemotion events can also be implemented on the Web app similar to shake the function, the native app implementation also has the relevant interface, Just consider the situation of the Web App ...

Section One

First Look at the demo:

Test address: http://hcy2367.github.io/music/, Please open the link in the mobile browser, suggest WiFi operation, or a song a few m of traffic pretty pit, and then shake a shake for song, the operation may be a bit slow.

Let's take a look at some of the features of HTML5:

• 1.deviceOrientation: The direction sensor data event, by listening to the event can obtain the mobile phone in the static state of the direction of data;
• 2.deviceMotion: Motion sensor data event, by listening to the event can get mobile phone motion acceleration data;
• 3.DeviceMotionEvent: Determine if the browser supports this event property, and if so, listen for the Devicemotion event, and return the device has an event object about acceleration and rotation that contains two attributes. Accelerationincludinggravity (acceleration with gravity) and Acceleration (acceleration), which excludes the effects of gravity. The data for acceleration consists of three axes: x, y, and Z.

Section A

How to tell the user to shake the phone? The main points to consider are as follows: 1. Most of the users are shaking the mobile phone in one direction, and 2, the acceleration data in three directions will change during shaking. 3. We cannot misjudge the normal movement of the cell phone, such as when we are walking, the mobile phone in the trouser pocket will also have an acceleration data change. In conclusion, we should calculate the acceleration in three directions, measure them at intervals, examine their rate of change over a fixed period of time, and need to determine a threshold to trigger the action.

The code is as follows:

varShakethreshold = 1000;//defines a threshold value for shaking    varlastupdate = 0;//record the time of the last shake    varX, Y, Z, Lastx, Lasty, Lastz;//define x, Y, Z record three axes of data and last triggered data//Monitor Sensor motion eventsif(window. Devicemotionevent) {Window.addeventlistener (' Devicemotion ', Devicemotionhandler,false);} Else{alert (' This device does not support devicemotion events ');}//Motion sensor processingfunctionDevicemotionhandler (eventData) {varAcceleration = eventdata.accelerationincludinggravity;//get the acceleration with gravity    varCurtime =NewDate (). GetTime (); //100 milliseconds for a positional judgment    if((curtime-lastupdate) > 100) {        varDifftime = Curtime-lastupdate; Lastupdate=Curtime; X=acceleration.x; Y=ACCELERATION.Y; Z=acceleration.z; varSpeed = Math.Abs (x + y + z-lastx-lasty-lastz)/difftime * 10000; //The absolute and time ratios of the difference between the X, Y, and Z values exceed the preset threshold, and the device is judged to be shaken.        if(Speed >shakethreshold)        {dosomething (); } lastx=x; Lasty=y; Lastz=Z; }}

Last

In fact, the Web app has a wide range of single-page applications, low-cost development, PHONEGAP can also be in the webview layer in this way to achieve shake the function, and then packaged into the platform of the app. In addition, the Navigator.accelerometer Accelerator plug-in can be used to realize the function of shaking, in fact, through the JS to achieve the local interface, to achieve cross-platform, but this way does not provide native API powerful, HTML5 will play a important Role in the future!

If you are well, it is sunny!

HTML5 implement web App shake a song