Hello,
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
Detection
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
|
1 2 3 4 5 6 |
if(navigator.vibrate) { console.log("supported"); } else { console.log("not supported"); } |
Usage
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
|
1 2 3 4 5 |
// Vibrate for N milliseconds navigator.vibrate(milliseconds); // Vibrate for multiple times using an array option navigator.vibrate([vibrate_for_n_milliseconds, delay, vibrate_again_for_n_milliseconds]); |
so above is translated to following for real app situation
|
1 2 3 4 5 |
// Vibrate for 2 seconds navigator.vibrate(2000); // Vibrate for 2 seconds then pause for 1 second and then vibrate for 2 seconds navigator.vibrate([2000, 1000, 2000]); |
Cancelling the vibration
Cancelling the vibration is quite simple and here is an example to cancel the vibration
|
1 2 3 4 5 |
// Cancel Vibrate navigator.vibrate(0); // Cancel with array option navigator.vibrate([]); |
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
http://www.w3.org/TR/vibration/
I hope that this post will help you understanding the basics of Vibration API
Cheers
Leave a Reply