HTML5 vibration API with code examples

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 [crayon-5997e9c9491c6506161754/] 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 [crayon-5997e9c9491e2785775214/] so above is translated to following for real app situation [crayon-5997e9c9491ef270084781/] Cancelling the vibration Cancelling the vibration is quite simple and here is an example to cancel the vibration [crayon-5997e9c9491fc594796821/] 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 … [Read more...]