HTML5 vibration API with code examples


While reading more and more about HTML5 and working with it nearly everyday there is something new you end up doing everyday.

Yesterday I was doing a bit of reading and came across the Vibration API so let me share you few things about the vibration API.


Why would you use a vibration API

Well I can think of a few usage scenarios and the one that is more obvious is to when you alert user about something in your mobile application it would be fun if you can add a little bit of shake so that an alert becomes a little bit more exciting. Or if you are a game developer then you can use it when a guy snaps a punch on other guys face.

Think of anything that result in some sort of a shock you can use vibrations to make that shock more realistic

Lets start  looking more in depth of this API


With new APIs introduced not all browsers support it out of the box so it makes sense to detect the API support first and then do something cool with it. Firefox for Android as of writing support this API

Here is how we can detect the vibration API supports


Now that we have seen how to detect the support for lets now check out how to use the vibration function

Here are couple of ways you can use the overloaded vibrate

so above is translated to following for real app situation

Cancelling the vibration

Cancelling the vibration is quite simple and here is an example to cancel the vibration

Quite simple ehh!

You can use Javascript method such as setTimeout()/clearTimeout() and setInterval()/clearInterval() to control the delay or repeats for vibrations.

As web is moving more towards HTML5 now is the time to get used to new API. More browsers will be supporting these sort of new API. Browsers such as Chrome, Safari and Firefox and even Opera are pretty aggressive with keeping themselves ahead of each other so I am hoping that all will be adding support to this API pretty soon. As of now only Firefox supports it.

Here is link to check out specs for vibration API so you can go in have a look

I hope that this post will help you understanding the basics of Vibration API




Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.