Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Use the HTML5 vibration API

Saturday, April 19th, 2014 by Servage

flappy-Bird-Windows-Phone

 

Users are increasingly using smartphones and tablets to access the web. As of December 2013, one in every five web visits is from a mobile device. If your website or app is mobile-aware, that figure could be far higher.

Development for multiple devices has its challenges, but there are also possibilities which aren’t typically available on desktop PCs. Consider the vibration mechanism; it’s a simple tactile feedback device which can alert you of new messages or phone calls. It’s especially useful in a noisy environment where sound cannot be heard or in quiet places where a ringtone would be a distraction or nuisance.

Wouldn’t it be great if you could use vibration in your application?…

Walking directions could be indicated using one vibration for left, two for right.

The phone could vibrate in a certain way when an event occurs or you’re close to someone.

You could send secret messages in vibration-based Morse code!

A game could be enhanced by vibrating when you crash or are hit by a missile.

That’s exactly what the HTML5 Vibration API allows you to do!

To Vibrate or Not to Vibrate?

Just because we can vibrate the phone, it doesn’t mean that we should. Vibration is a huge battery drainer so it’s probably best to have it disabled if power is running low or a game is not active in the current tab. Depending on your application, it may be best to provide the user an option setting so they can enable, disable or configure vibration criteria.

Browser Support and Detection

The API is relatively new and support is currently limited to recent versions of Firefox and Chrome. Earlier editions require moz and webkit prefixes respectively. You should also use a device which has a vibration mechanism — the API may be available in your browser, but you won’t know if it is working without one!

Use the following check to detect for vibration support:

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

To check and use prefixed versions, you can use code such as:

// enable vibration support
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;

if (navigator.vibrate) {
    // vibration API supported
}

Vibration Basics

A basic vibration can be set by passing a number of milliseconds to navigator.vibrate:

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

Alternatively, you can pass an array with vibration and delay parameters specified in milliseconds. For example, to vibrate for 500ms, wait for 300ms, then vibrate again for 100ms:

// vibrate for one second
navigator.vibrate([500, 300, 100]);

The even-numbered array items define a vibration time (arrays are zero-based so the first and third items are 0 and 2). Odd-numbered array items define the delay time.

Vibration is non-blocking; your JavaScript code will continue to run while the device is vibrating. To stop it, you can pass zero to navigator.vibrate.

This concept could be useful in games. For example, when the user crashes their car, you set navigator.vibrate(10000). However, if the crash effect ends before 10 seconds has elapsed, you set navigator.vibrate(0) to finish it.

 

Use the HTML5 vibration API, 4.0 out of 5 based on 4 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.