How To Use Vibration API In Your Website

Haptic Feedback in Your Website

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Hello everyone πŸ‘‹

In this article, we will see how can we use Vibration API in our websites.

We can use the Vibration API to provide haptic or vibration feedback to the user using the website for their actions.

Most modern mobile devices include vibration hardware, which lets software code provide physical feedback to the user by causing the device to shake. So this API works well with mobile devices only and targeted for the same.

The Vibration API allows the web apps to access the vibration hardware if it exists.

Implementation πŸ‘¨β€πŸ’»

Let's explore the API.

We can access the API from the browser's window.navigator object.

Check Vibration API Support

It is always a good idea to check for API support.

if (Boolean(window.navigator.vibrate)) {
    // It Supports
    ...
}
  • vibrate is a method that is responsible for the vibration.
  • It expects one argument.

Argument is a number or an array of numbers for a series of vibrations. Those numbers are considered as milliseconds.

If the method was unable to vibrate because of invalid parameters, it will return false else it returns true.

Single Vibration πŸ“³

For a single vibration, we can pass a single number directly or in an array.

// Will vibrate the device for 500ms
window.navigator.vibrate(500);

// Same as the above line
window.navigator.vibrate([500]);

Pattern Vibration πŸ“³ πŸ“³ πŸ“³

To vibrate the device in a pattern, we can pass an array of numbers.

Even indices numbers are responsible for the vibration and odd indices numbers will delay that much millisecond before the next vibration.

// Vibrate for 500ms, Wait for 200ms, Vibrate for 800ms
window.navigator.vibrate([500, 200, 800]);

Cancelling Vibrations

To cancel an ongoing vibration pattern, we need to pass a 0 or an empty array or an array containing all zeroes to the vibrate method.

window.navigator.vibrate(0);
window.navigator.vibrate([])

Fun Example ✨

Vibrate SOS in morse code.

window.navigator.vibrate([
    100,30,100,30,100,30,
    200,30,200,30,200,30,
    100,30,100,30,100
]);

Working only on Chrome Android.

Sample Code | Live Link


Thank you for reading πŸ™

If you enjoyed this article or found it helpful, give it a thumbs-up πŸ‘

Feel free to connect πŸ‘‹

Twitter | Instagram | LinkedIn

Interested in reading more such articles from Bibek Kakati?

Support the author by donating an amount of your choice.

Recent sponsors
Tapas Adhikary's photo

Great post. Web APIs are powerful indeed.

Bibek Kakati's photo

Thank you! I really appreciate your feedback.

Rangaraj Kumar Das's photo

Quite knowledgeableπŸ‘

Tomasz Gil's photo

Wow, didn't even know that such thing exists. Awesome!

Bibek Kakati's photo

Thank you for your comment.

Pirijan's photo

Certainly looks promising but I couldn’t get the demo to work on my phone. Does this work with iOS/iPhones ?

Bibek Kakati's photo

Hey, it is not working with iOS (due to some restrictions). It is also not working with Firefox android, it has some open issues on github regarding this. I hope they will fix this soon.

Shree krishna lamichhane's photo

Learned something new today.

Thanks for sharing.

Bibek Kakati's photo

My pleasure 😊