DEV Community

Cover image for Vibrating your phone with JavaScript ๐Ÿ“ฑ
Dhairya Shah
Dhairya Shah

Posted on • Originally published at codewithsnowbit.hashnode.dev

Vibrating your phone with JavaScript ๐Ÿ“ฑ

In this article we are going to vibrate mobile phones with JavaScript Vibration API.

JavaScript is an amazing language

Navigator.vibrate()

The navigator.vibrate method pulses the vibration hardware on the device if such device is compatible. If device is not compatible, no effect will take place.

The method works in the following structure,

navigator.vibrate(pattern)
Enter fullscreen mode Exit fullscreen mode

So, this was a little explanation on the navigator.vibrate method. Now let's deal with some easy examples.

Examples

const vibrate = () => {
  window.navigator.vibrate([500])
}
Enter fullscreen mode Exit fullscreen mode

This will vibrate the hardware for 500ms.

const vibrateTwoTimes = () => {
  window.navigator.vibrate([200, 100, 200])
}
Enter fullscreen mode Exit fullscreen mode

In this example, vibration will occur two times for 200ms with a gap of 100ms.

Conclusion

I hope you have found this article useful. Thank you for reading!

Let's Connect

Top comments (7)

Collapse
 
khokon profile image
Khokon M.

hahaha, seems fun. Thanks for sharing

Collapse
 
dhairyashah profile image
Dhairya Shah

Thanks for reading ๐Ÿ™Œ

Collapse
 
glowreeyah profile image
Gloria Asuquo

This was fun to try out
Thank you

Collapse
 
dhairyashah profile image
Dhairya Shah

You're welcome ๐Ÿ™‚

Collapse
 
stefino76 profile image
Stefano Baccetti

Awesome! ๐Ÿคฉ

Collapse
 
stcanpham profile image
Can Pham T.

Thanks for sharing.

I use vibration with the touch event, but on the first page load, after the first touch, vibration does not work. It only works from the second touch onward.

Collapse
 
omriluz profile image
omriluz

Yeah since a user has to interact with your page before you can use this API