Using HTML5 Vibration API

Most of the people are using tablets and mobile phones for browsing sites. As per recent survey conducted by a popular internet website, one in every five requests for sites is from mobile device. So, the market is inclined towards mobile applications. But, as there are a bunch of mobile platforms that are available and many are yet to come, it is tough to write app exclusively for each device. So, developers started opting for HTML5 for developing cross-platform apps. Though it has its challenges, there are capabilities which aren’t available on desktops. For example, Vibration feature is a tactile mechanism which alerts user when they got a message or a call, especially when there is a loud noise or quite places where playing sound is a disturbance.

Wouldn’t it be cool if you could use vibration in your HTML5 application? For example, user feeling a gentle kick when the car hits another car in a Racing game, or user feeling a small jerk when a notification is displayed on the corner of app. There are many such use cases where you want to drag the attention of user.
Vibration API allows you to do this using java script.
Basically, the idea with the Vibration API is to be able to give the user a notification, in a game or other use case, by telling the device to vibrate. It accesses the native vibrator and tells it how long it should vibrate.
Checking for support:
It is always good to test for the support of any feature before using it. You can check whether vibration is supported by the browser or not by following.

if (window.navigator.vibrate) {
// Vibration API is supported
}

OR

if ("vibrate" in navigator) {
// vibration API supported
}

You may have to use the browser prefixes like navigator.webkitVibrate / navigator.mozVibrate / navigator.msVibrate till is it standardized.
Basics:
navigate.vibrate method accepts an integer (number of milli seconds to vibrate)

// vibrate for one second
navigator.vibrate(1000);

navigate.vibrate also accepts an array with vibration and delay parameters. For example, following will first vibrate for 1 second and wait for 2 seconds and then vibrate for 3 seconds. That means – Odd numbered array items specify vibration parameters and even numbered items specify delay parameters.

navigator.vibrate([500, 300, 100]);

For stopping vibration when it is in progress, you just need to pass a zero (0) or an empty array ([]) to window.vibrate method.

// Either of these stop vibration
navigator.vibrate(0);
navigator.vibrate([]);

I have tested this and it is working in Firefox. Seems Chrome is not supporting it yet. I tried it with latest Chrome Browser on Android (KitKat).
Here is an article from Mozilla Developer Network which gives details on Vibration API in Firefox Browser.
Sample Code:


// 
Vibration API Supported: <span id="supported"></span>


Have fun with Vibration API!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s