The HTML5 Vibration API

HTML5 has a several API’s that are designed to use with mobile devices because more and more smartphones are used to access websites. Moreover, it is predicted that smartphones and tablets are going to surpass desktop computers accessing the web in the near future.  So, the HTML5 Vibration API is one those API’s that are going to be very useful on responsive web applications where developers can use features of the device to improve the user experience.

Support by Feature Detection

In order to verify if the API is supported by the browser, it is necessary to use feature detection in the navigator object.

if(navigator.vibrate){

//Execute this code only if it is supported.

}

Vibrating for One Second

The vibrate method takes a single integer, which represents the milliseconds that the vibration is going to keep running. So, we need to pass 1000 as parameter to execute the vibration for one second.

navigator.vibrate(1000);

Alternatively, you can pass an array with one element, and it would work.

navigator.vibrate([1000]);

Vibrate More Than Once

You already saw that it is allowed to pass an array to the vibrate method. But, in the previous example we passed an array with one single element.  If the array has multiple elements, the first element is going to be the duration of the vibration and the second one is going to be the delay for the next vibration. The following code runs the vibration for 2 seconds, then stops for 1 second, and runs again for 3 seconds.

navigator.vibrate([2000, 1000, 3000]);

Cancelling the Vibration

If you want to cancel the vibration, it is necessary to pass a zero as the argument.

navigator.vibrate(0);

Conclusion

As we can see, the new HTML5 API’s are helping us to provide better user experiences no matter the device visiting the site. For example, for a desktop computer you may display a message on the screen while on smartphones, the message could be accompanied with a vibration of the device.

Teylor Feliz
Teylor Feliz

Teylor is a seasoned generalist that enjoys learning new things. He has over 20 years of experience wearing different hats that include software engineer, UX designer, full-stack developer, web designer, data analyst, database administrator, and others. He is the founder of Haketi, a small firm that provides services in design, development, and consulting.

Over the last ten years, he has taught hundreds of students at an undergraduate and graduate levels. He loves teaching and mentoring new designers and developers to navigate the rapid changing field of UX design and engineering.

Articles: 182