DEV Community

Cover image for How To Use Vibration API in Your Website
Bibek
Bibek

Posted on • Updated on • Originally published at blog.bibekkakati.me

How To Use Vibration API in Your Website

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
    ...
}


Enter fullscreen mode Exit fullscreen mode
  • 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]);


Enter fullscreen mode Exit fullscreen mode

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]);


Enter fullscreen mode Exit fullscreen mode

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([])


Enter fullscreen mode Exit fullscreen mode

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
]);


Enter fullscreen mode Exit fullscreen mode

*Working only on Chrome Android

Sample Code | Live Link


Originally published on blog.bibekkakati.me


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


If you like my work and want to support it, you can do it here. I will really appreciate it.



Top comments (31)

Collapse
 
pstark profile image
Simon

👍

For anyone using Angular, ngx-vibration makes using vibrations easy as pie.

Collapse
 
bibekkakati profile image
Bibek

Thank you for sharing that.

Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman

Sigh. What will happen to the phones if I do this in an infinite interval??!

Collapse
 
bibekkakati profile image
Bibek

I'm not sure what type of impact devices can have but it will eat up more battery.

Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman

Well, at least I can make a milk shake by placing my cup on the phone while visiting a site with infinite vibration.

Thread Thread
 
bibekkakati profile image
Bibek • Edited

You can use it as a massager too.

Thread Thread
 
raghavmisra profile image
Raghav Misra

true

Thread Thread
 
kotapi profile image
Pranay Kothapalli

Time to build that massager app I always wanted to

Thread Thread
 
bibekkakati profile image
Bibek

You can open your virtual massage parlour 😉.

Collapse
 
pavelloz profile image
Paweł Kowalski

Tried it on my phone and it doesnt work :<

Collapse
 
kotapi profile image
Pranay Kothapalli

New APIs like these take a while to get widespread support, Apps that come out using these would be "experimental" til they are widely accepted.

Collapse
 
bibekkakati profile image
Bibek

Yeah, you are right. But this API is not so new, I don't know why other environments are taking so long to add support for it.

Collapse
 
bibekkakati profile image
Bibek • Edited

Hey @pavelloz , It's working fine. Check out this Live Page.

Collapse
 
pavelloz profile image
Paweł Kowalski

Not working on android/firefox :\

Thread Thread
 
bibekkakati profile image
Bibek

Yeah. Firefox has some issue. It is working only on Chrome Android.

Check this comment.

Collapse
 
tomasz_frankowski profile image
Tomasz Frankowski • Edited

It doesn't really work though.

Collapse
 
bibekkakati profile image
Bibek

Its working on Chrome android. Firefox android has some bug.

Collapse
 
tomasz_frankowski profile image
Tomasz Frankowski

Doesn't work on iPhone either

Thread Thread
 
bibekkakati profile image
Bibek

Checked the docs. As usual, iOS doesn't allow to access the API in the browser. So currently, its working perfectly only on Chrome android.

Collapse
 
mrdulin profile image
official_dulin

Good to know this new Web API.

Collapse
 
bibekkakati profile image
Bibek

Thanks!

Collapse
 
bracikaa profile image
Mehmed Duhovic

Wow I didn't know about this! Although I wonder, when do we actually need to use vibration when visiting websites via the browser. I don't remember encountering this functionality while browsing.

Collapse
 
bibekkakati profile image
Bibek

Vibration is used by some sites while showing error, wrong input, or to give a haptic feedback on clicking action buttons responsible for undo-able task etc.

Collapse
 
bhavik2936 profile image
Bhavik Parmar

This is really awesome! Trying to embed it in my web based game!

Collapse
 
bibekkakati profile image
Bibek

Glad you liked it.

Collapse
 
unfor19 profile image
Meir Gabay • Edited

Live example (check with your phone) - jsfiddle.net/unfor19/zeh3d1uo/

For me it works, on Galaxy S10 , Chrome 90.0.4430.91

Collapse
 
bibekkakati profile image
Bibek

Thank you for that.

I have hosted the page to make it easier for readers to test it.

Live Page

Collapse
 
soycedric profile image
soycedric

Why it doesnt work on firefox?

Collapse
 
bibekkakati profile image
Bibek • Edited

I think we have to use the mozVibrate method for firefox. Let me update the code.

Edited: So I tried and tested it, and came to know that somehow it is not working with Firebox. There are some open issues on Github too.

Collapse
 
mubashirmohamed647 profile image
Mubashir-Mohamed

Seems really easy to implement. I could give it a shot! Thanks for sharing!

Collapse
 
bibekkakati profile image
Bibek

You're welcome.

You can try this too. You will like it.