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.
[code language=”javascript”]
if (window.navigator.vibrate) {
// Vibration API is supported
}
[/code]
OR
[code language=”javascript”]
if (“vibrate” in navigator) {
// vibration API supported
}
[/code]
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)
[code language=”javascript”]
// vibrate for one second
navigator.vibrate(1000);
[/code]
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.
[code language=”javascript”]navigator.vibrate([500, 300, 100]);[/code]
For stopping vibration when it is in progress, you just need to pass a zero (0) or an empty array ([]) to window.vibrate method.
[code language=”javascript”]// Either of these stop vibration
navigator.vibrate(0);
navigator.vibrate([]);[/code]
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:
[code language=”html”]


Vibration API Supported:


[/code]
Have fun with Vibration API!

Leave a Comment

Your email address will not be published. Required fields are marked *