The Buzz About the Vibration API

As the mobile Web continues to grow, APIs are being designed which specifically target mobile devices. A prime example is the W3C’s Vibration API, which gives developers access to a device’s vibration hardware. This has obvious implications for games, as it can provide a more immersive experience. This article will teach you how to add tactile feedback to your applications, and leave your users buzziing.

Detecting Support

The Vibration API is still primarily unsupported. Firefox 16+ is currently the only browser with support for the API. Therefore, you must check for browser support before attempting to use vibrations. The following function detects browser support by checking for the API’s sole function, vibrate(). Note, that it is possible for a browser to support the Vibration API, even if the underlying device does not actually contain any vibration hardware. In this case, creating vibrations will have no effect.

function supportsVibration() {
  return !!window.navigator.vibrate;
}

Creating Vibrations

Vibrations are created using the window.navigator.vibrate() function. The vibrate() function accepts one argument, pattern, which specifies one or more vibration durations. If pattern is an integer, then a single vibration will be generated. The vibration will last for pattern milliseconds. For example, the following code will generate a one second vibration.

window.navigator.vibrate(1000);

The pattern argument can also be an array of integers. In this case, the array elements represent alternating vibration and pause durations. Using this syntax, the previous example can be rewritten as shown below.

window.navigator.vibrate([1000]);

Because the previous example only specified one vibration, it was not necessary to specify any pauses. However, the next example creates vibrations of one, two, and three seconds. In this example, a once second pause occurs between vibrations.

window.navigator.vibrate([1000, 1000, 2000, 1000, 3000]);

Cancelling Vibrations

If vibrate() is called while the device is executing a vibration pattern, then the executing pattern is aborted, and the new pattern is begun. This behavior allows you to update vibration patterns. It also allows you to cancel vibration patterns if the new pattern is zero, an empty array, or an array of zeros. For example, all of the following patterns will cancel any existing vibration pattern.

window.navigator.vibrate(0);
window.navigator.vibrate([]);
window.navigator.vibrate([0]);

Conclusion

The Vibration API is very simple, but it is representative of a larger shift in the way Web applications are designed. Not only does the API cater to mobile devices, but it also gives developers access to the client device’s hardware. This is yet another example of the increasingly blurred line between native and Web applications.

• View an online demo of the Vibration API.