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