DEV Community

loading...
Cover image for How To Use Vibration API in Your Website

How To Use Vibration API in Your Website

Bibek
Hey, 👋 I'm a full-stack developer with expertise in the MERN stack. I do freelancing, contract jobs for my living 👨🏼‍💻
Originally published at blog.bibekkakati.me Updated on ・2 min read

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.



Discussion (31)

Collapse
pstark profile image
Simon

👍

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

Collapse
bibekkakati profile image
Bibek Author

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 Author

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 Author • Edited

You can use it as a massager too.

Thread Thread
raghavmisra profile image
Thread Thread
kotapi profile image
Pranay Kothapalli

Time to build that massager app I always wanted to

Thread Thread
bibekkakati profile image
Bibek Author

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 Author

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 Author • 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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

Thank you for that.

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

Live Page

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 Author

You're welcome.

You can try this too. You will like it.

Collapse
soycedric profile image
soycedric

Why it doesnt work on firefox?

Collapse
bibekkakati profile image
Bibek Author • 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.

Forem Open with the Forem app