DEV Community

Cover image for How to Make a Phone Vibrate Using JavaScript
Free Programmers
Free Programmers

Posted on

How to Make a Phone Vibrate Using JavaScript

In this tutorial, we’ll explore how to trigger the vibration function on a smartphone using JavaScript. This feature can be useful for creating more interactive and responsive web applications, particularly when targeting mobile users. Let’s dive into the details of how this can be implemented effectively.

  1. Introduction to the Vibration API

The Vibration API is a simple yet powerful feature available in modern web browsers that allows you to control the vibration functionality of a device. This API is primarily used on mobile devices, as most desktops do not have a vibration feature.

The API is straightforward and consists of a single method: navigator.vibrate(). When this method is called, it triggers the vibration of the device for a specified duration.

  1. Basic Usage of the Vibration API

The syntax of the vibrate() method is as follows:

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

Here, pattern can be:

  • A single number representing the duration of vibration in milliseconds.
  • An array of numbers where odd indices represent vibration durations, and even indices represent pauses.

For example:

// Vibrate for 500 milliseconds
navigator.vibrate(500);

// Vibrate for 200ms, pause for 100ms, then vibrate for 200ms again
navigator.vibrate([200, 100, 200]);
Enter fullscreen mode Exit fullscreen mode

Practical Examples

  1. Simple Vibration on Button Click

Let’s start with a basic example where we trigger a vibration when the user clicks a button.

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Vibration API Example</title>
   </head>
   <body>
       <button onclick="navigator.vibrate(300)">Vibrate</button>
   </body>
   </html>
Enter fullscreen mode Exit fullscreen mode

In this example, clicking the button will cause the device to vibrate for 300 milliseconds.

  1. Patterned Vibration

You can create more complex vibration patterns by using an array of numbers. Each odd index in the array defines a vibration duration, and each even index defines a pause.

   <button onclick="navigator.vibrate([100, 50, 100, 50, 300])">Vibrate Pattern</button>
Enter fullscreen mode Exit fullscreen mode

In this example, the phone will vibrate in the following pattern: 100ms vibration, 50ms pause, 100ms vibration, 50ms pause, 300ms vibration.

Stopping Vibration

To stop a vibration that is currently in progress, you can call the vibrate() method with a value of 0 or an empty array:

navigator.vibrate(0);
// Or
navigator.vibrate([]);
Enter fullscreen mode Exit fullscreen mode

Checking Browser Support

Not all browsers or devices support the Vibration API. Before using the vibration feature, it’s a good practice to check if the API is supported:

if ("vibrate" in navigator) {
   console.log("Vibration API is supported");
} else {
   console.log("Vibration API is not supported");
}
Enter fullscreen mode Exit fullscreen mode

Real-World Use Cases

  • Notifications: Trigger a short vibration when receiving a notification on a web app.
  • Games: Enhance user experience by adding vibration feedback when interacting with game elements.
  • Alerts: Alert users to critical updates or warnings by using a distinctive vibration pattern.

Considerations and Best Practices

  • Battery Consumption: Frequent or prolonged vibrations can drain the device's battery quickly. Use vibrations sparingly.
  • User Experience: Excessive vibrations can be annoying or distracting. Always provide users with the option to disable this feature.
  • Accessibility: Keep in mind that some users may rely on vibrations as part of their accessibility settings. Ensure that your application respects these settings.

Conclusion

The Vibration API in JavaScript is a simple yet effective way to enhance the interactivity of your web applications, especially for mobile users. Whether you're creating a game, building notifications, or just adding a bit of flair to your UI, the ability to trigger vibrations can significantly improve user engagement. Remember to use this feature judiciously to ensure a positive user experience.
Telegram channel:
https://t.me/Free_Programmers

Top comments (52)

Collapse
 
andreagelmini profile image
Andrea Gelmini

Image description

Chrome on my PC confirms api support. Too bad it can't vibrate I would have liked to make it dance a bit.

Collapse
 
free_programmers profile image
Free Programmers

logically!!!

Collapse
 
andreagelmini profile image
Andrea Gelmini

To be honest, I was expecting him to tell me that I wasn't available.
Although, the idea of making the desk dance had gassed me. :-D

Thread Thread
 
free_programmers profile image
Free Programmers

👽

Collapse
 
algot profile image
AlgoT

Watch this get abused...

Collapse
 
razielrodrigues profile image
Raziel Rodrigues

I got your point hahahahaha

Collapse
 
shricodev profile image
Shrijal Acharya

Exactly my thought 👀

Collapse
 
free_programmers profile image
Free Programmers

It works!>!

Collapse
 
free_programmers profile image
Free Programmers

Of course 🌚🌚

Collapse
 
free_programmers profile image
Free Programmers

What's?

Collapse
 
paulsanjay81 profile image
Sanjay Paul

Great tutorial! The Vibration API is a neat tool for adding a touch of interactivity to your mobile web apps. Whether you're enhancing user feedback in a game or making notifications pop, this guide covers all the essentials. Just remember to use vibrations wisely to keep your users happy and engaged!

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

Totally agree! The Vibration API can really elevate the user experience when used correctly. Do you have any examples of where you've implemented it in your projects? I'm curious to see how others are creatively using it.

PS: Commenting using AI it's the dumbest thing ever

Collapse
 
free_programmers profile image
Free Programmers

👍

Collapse
 
free_programmers profile image
Free Programmers

💯

Collapse
 
mediaformat profile image
Django

Nice, still wish this still had better support



Data on support for the vibration feature across the major browsers from caniuse.com

Collapse
 
free_programmers profile image
Free Programmers

Of course

Collapse
 
martinbaun profile image
Martin Baun • Edited

Pretty neat! It’s nice for feedback on web apps that have a unique UX. For example, you might have something that does an action on press and on long press, so if a user presses down and wait 1000ms, you can perform the long press action and vibrate to let the user know they can let go now.

I however don’t think vibration has a place in 99.9% of sites though

Collapse
 
free_programmers profile image
Free Programmers

But knowing it is not bad.
For 0.1%

Collapse
 
iainsimmons profile image
Iain Simmons

Good post, and I learnt something new today!

One thing though, you mentioned odd and even indices a couple of times, but JavaScript has zero-based indexing, so the first integer in the array is the zeroth index and technically even, the second integer is index 1 and an odd index.

But I get how it could be difficult to communicate it without confusing people. Maybe talking about the odd and even positions in the array?

Collapse
 
joaquin_cavenaghi_3f84b04 profile image
Joaquin Cavenaghi

Great article!
I'm thinking of using vibrate app for my university final paper, I need to know if it's possible to manage the intensity of the vibration as well as the time. I understand that in the current version it is not, but maybe someone knows an alternative?
greetings from argentina.

Collapse
 
dixonw45 profile image
Hadeh

great feature

Collapse
 
free_programmers profile image
Free Programmers

and practical

Collapse
 
hanzla-baig profile image
Hanzla Baig

👍👍👍👍

Collapse
 
free_programmers profile image
Free Programmers

❤️👍

Collapse
 
razielrodrigues profile image
Raziel Rodrigues

I will create an app with this ͡° ͜ʖ ͡°)

Collapse
 
free_programmers profile image
Free Programmers

I am waiting.
Email me after you make it.
programmersfree@gmail.com

Some comments may only be visible to logged-in visitors. Sign in to view all comments.