DEV Community

Cover image for How To Use Vibration API in Your Website

How To Use Vibration API in Your Website

Bibek on May 05, 2021

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 vib...
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
kotAPI •

Time to build that massager app I always wanted to

Collapse
 
pavelloz profile image
PaweΕ‚ Kowalski •

Tried it on my phone and it doesnt work :<

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
 
kotapi profile image
kotAPI •

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
 
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
 
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
 
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
 
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
 
mrdulin profile image
official_dulin •

Good to know this new Web API.

Collapse
 
bibekkakati profile image
Bibek •

Thanks!

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.