How to Use the HTML5 Vibration API

How to Use the HTML5 Vibration API

How to Use the HTML5 Vibration API

How to Use the HTML5 Vibration API – AndroidChirag.com

As told by me before, Today a large number of smartphone and tablets are used to access the website on the internet. Today we face a lot of competition on internet due to increasing amount of competitor websites. It’s important to make our website creative and unique from others.

If our websites are being viewed on smartphones, Why didn’t use smartphone’s functionalities in our interest. We can use HTML5 Vibrate API to vibrate user’s smartphone. It quickly takes the users attention.

Should We Vibrate Or Not?

Just because we can vibrate the phone, It doesn’t mean that we should. Vibration cause a huge battery drain so it’s probably best to not use if battery is running low. You may use Battery Status API to automatically disable vibrate if battery is low or you can allow users to disable the vibrate function.

Browser Support and Detection

The API is relatively new and support is currently limited to recent versions of Firefox and Chrome. Earlier editions require moz and webkit prefixes respectively. You should also use a device which has a vibration mechanism — the API may be available in your browser, but you won’t know its working without one!

Use the following check to detect for vibration support:

<script>
if (“vibrate” in navigator) {
//HTML5 Vibration API is supported
}
</script>

To check and use prefixed versions, you can use code such as:

<script>

// enable vibration support
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;

if (“vibrate” in navigator) {
//HTML5 Vibration API is supported
}
</script>

Vibration Basics

A basic vibration can be set by passing a number of milliseconds to navigator.vibrate:

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

Alternatively, you can pass an array with vibration and delay parameters specified in milliseconds. For example, to vibrate for 500ms, wait for 300ms, then vibrate again for 100ms:

// vibrate for one second
navigator.vibrate([500, 300, 100]);

The even-numbered array items define a vibration time (arrays are zero-based so the first and third items are 0 and 2). Odd-numbered array items define the delay time.

Vibration is non-blocking; your JavaScript code will continue to run while the device is vibrating. To stop it, you can pass zero to navigator.vibrate.

This concept could be useful in games. For example, when the user crashes their car, you set navigator.vibrate(10000). However, if the crash effect ends before 10 seconds has elapsed, you set navigator.vibrate(0) to finish it.

Vibration Demonstration

To test the API in your device…

View the Vibration API demonstration…

View the source for all HTML, CSS and JavaScript. The form parameters build an array which is passed to navigator.vibrate when START is clicked. When the STOP button is clicked, navigator.vibrate(0); is executed.

Have fun with the Vibration API and let me know if you have any interesting uses for it.

Demo by:www.sitepoint.com

 

Leave a Reply