Vibrating your phone with JavaScript 📱
Dhairya Shah

Dhairya Shah @dhairyashah

About: I am 19 years old and have an intention to become a successful developer

Location:
India
Joined:
Sep 20, 2021

Vibrating your phone with JavaScript 📱

Publish Date: May 28 '22
30 8

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

Comments 8 total

  • Stefano Baccetti
    Stefano BaccettiMay 28, 2022

    Awesome! 🤩

  • Gloria Asuquo
    Gloria AsuquoMay 28, 2022

    This was fun to try out
    Thank you

  • Khokon M.
    Khokon M.May 29, 2022

    hahaha, seems fun. Thanks for sharing

  • Can Pham T.
    Can Pham T.Dec 1, 2023

    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.

    • omriluz
      omriluzFeb 15, 2024

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

  • Anuj Pandey
    Anuj PandeySep 16, 2024

    This is not working in iphone browser

Add comment