Vibration API - It gets wild

Isn't this an appealing title. We start really filthy and get to know a totally new side of our beloved browser. Did the W3C finally think of the lonely souls out there and add a few additional features to the browser for them? Well, partially. Today we will deal with one of those new features. However we will do this in a completely unerotic way.

"The Vibration API defines a means for web developers to programmatically provide tactile feedback in the form of vibration", it says in the official documentation of the W3C. What is meant by this, is that you can now let a device vibrate on request. With this new feature it is now finally possible to make web sites tangible.

But the short description in the W3C documentation continues. "The API is designed to tackle high-value use cases related to gaming, and is not meant to be used as a generic notification mechanism." So we also discover what the ladies and gentlemen of W3C intended this API to be used for... games. The function described in the documentation requires either a milliseconds value or an array of milliseconds values.

Ideally a function call should look like this:

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

// vibrate 100, 200 & 300 milliseconds
navigator.vibrate([100, 200, 300]);

With the second call you can initiate a sequence of vibrations. Jos Dirkesen uses this possibility in his article "HTML5: Remotely vibrate a phone with morse code using web sockets and the vibrate API." to teach a mobile phone morse codes. The browser support is somewhat low right now. At the time of writing this article, Firefox was the only browser which actually supported this feature. So the target audience of our little vibrating browser game would be pretty limited right now.

Therefore I decided to create a little wrapper function, which can be used until browser support catches up eventually. The function includes a fallback for browsers, which didn't hear from this whole vibration story yet. So right now we will just use an annoying alert for debugging purposes to output the given parameters.

/**
 * Wrapper function for the new Vibrate API with fallback.
 *
 * Opera & internet explorer implementation is just a guess yet.
 * If you have further informations on their plans, please contact me.
 *
 * @see http://www.w3.org/TR/vibration/
 * @see https://bugs.webkit.org/show_bug.cgi?id=72010
 * @see https://developer.mozilla.org/en-US/docs/DOM/window.navigator.vibrate
 */
navigator.vibrate = (function(){
  return  navigator.vibrate       ||
          navigator.mozVibrate    ||
          navigator.webkitVibrate ||
          navigator.oVibrate      ||
          navigator.msVibrate     ||
          function(params) {
            vibrateFallback(params);
          };
})();

/**
 * This is used as a fallback function for older browsers.
 * You should change this to your project's needs.
 */
function vibrateFallback(params) {
  alert('Vibration called: ' + params);
}

The prefixes for Opera and Internet Explorer are just an assumption yet. If you know something about their implementation, let me know.