DEV Community

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

Posted on β€’ Edited on β€’ Originally published at blog.bibekkakati.me

82 20

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.



Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

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.

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay