Real Examples of Using the Vibration API in JavaScript

Learn how to add subtle, tactile feedback to your mobile web apps using the Vibration API.

Introduction

You’ve probably felt your phone buzz when a message arrives, when you pull to refresh, or when a game character takes a hit.
That short vibration adds a layer of feel that makes apps more immersive.

But did you know you can create the same effect right inside a web app using just JavaScript?

That’s the power of the Vibration API.

It lets web apps trigger vibration on supported devices (mainly Android), allowing you to build tactile feedback into buttons, forms, games, and even notifications.

In this post, we’ll explore real, working examples of how to use the Vibration API in different scenarios, from a simple buzz to patterned feedback.

1. The One-Line API

The core of the Vibration API is delightfully simple:

navigator.vibrate(200);

That line tells the device to vibrate for 200 milliseconds.
It’s available under the navigator object, and works on most Android browsers like Chrome, Edge, and Firefox.

To check support before using it:

if ('vibrate' in navigator) {
  console.log('Vibration API supported!');
}

If you run this on a mobile browser that supports it, your phone will literally buzz.

2. Short Haptic Feedback for Buttons

Let’s start small, adding a quick, subtle vibration when a user taps a button.

<button id="btn">Tap Me</button>

<script>
  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    navigator.vibrate(100); // vibrate for 100ms
    alert('Button tapped!');
  });
</script>

This is perfect for mobile-first designs where you want feedback that feels instant and natural, like a “tap click” in native apps.

3. Different Feedback Patterns

You can define vibration patterns using arrays of on/off durations.

navigator.vibrate([200, 100, 200]);

This means:

Vibrate for 200ms
Pause for 100ms
Vibrate again for 200ms

You can use patterns like this to distinguish different types of feedback, for example, success vs. error.

Example: Success vs. Error Feedback

function vibrateSuccess() {
  navigator.vibrate(150); // short buzz
}

function vibrateError() {
  navigator.vibrate([100, 50, 100, 50, 100]); // triple buzz
}

<button onclick="vibrateSuccess()">✅ Success</button>
<button onclick="vibrateError()">❌ Error</button>

Now your app can feel different depending on the outcome, a nice UX touch, especially for mobile web forms.

4. Notification-Style Feedback

You can combine vibration with browser notifications for richer, more noticeable alerts.

new Notification('New message received!');
navigator.vibrate([200, 100, 200]);

Or for push notifications (inside a service worker):

self.registration.showNotification('You have a new alert!', {
  body: 'Tap to open your inbox.',
  vibrate: [200, 100, 200]
});

This works great for PWAs that already have notification permissions.

5. Haptics in Games or Interactions

Add vibration as feedback for in-game events, for example, when a player scores or takes damage.

function onPlayerHit() {
  navigator.vibrate([300, 100, 300]);
}

function onPlayerScore() {
  navigator.vibrate(100);
}

This tiny addition instantly makes mobile browser games feel more alive.

6. Confirmation in Form Submissions

Use vibration to confirm successful submissions or errors.

<form id="myForm">
  <input placeholder="Enter something..." required />
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    if (form.checkValidity()) {
      navigator.vibrate(100); // success
      alert('Form submitted!');
    } else {
      navigator.vibrate([100, 50, 100]); // error
    }
  });
</script>

It’s especially helpful when users are typing on touchscreens; tactile feedback makes it feel more responsive.

7. Stopping Vibrations

If you’ve triggered a long or repeating vibration, you can stop it at any time:

navigator.vibrate(0);

That cancels any pending vibration pattern immediately.

8. Browser Support and Requirements

Here’s what works today:

A few important notes:

Must run over HTTPS (or localhost).
Requires user interaction (tap, click) to trigger.
Won’t work if the device is in Do Not Disturb or Silent mode.

9. Combining with Other Web APIs

The Vibration API shines when paired with other APIs:

a. With the Battery API

Prevent long vibrations when the battery is low.

navigator.getBattery().then(battery => {
  if (battery.level > 0.3) {
    navigator.vibrate(150);
  }
});

b. With the Gamepad API

Trigger haptics when buttons are pressed.

c. With the Web Animations API

Vibrate in sync with visual motion for extra immersion.

10. Full Example: Vibration Playground

Here’s a simple playground to test different vibration types:

<h3>Vibration API Demo</h3>
<button onclick="navigator.vibrate(100)">Short Buzz</button>
<button onclick="navigator.vibrate([100, 50, 200])">Pattern</button>
<button onclick="navigator.vibrate([50, 30, 50, 30, 50])">Triple Buzz</button>
<button onclick="navigator.vibrate(0)">Stop</button>

Try this on your phone using Chrome; you’ll literally feel the difference between each button.

Conclusion

The Vibration API is small, simple, and incredibly underused.
It’s one of the easiest ways to make mobile web apps feel as responsive and polished as native ones.

In a single line of JavaScript, you can give users immediate, physical feedback that confirms actions or signals events.

Whether it’s confirming form submissions, improving mobile UX, or adding fun to web games, subtle haptics can take your web experience to the next level.

Pro Tip: Combine vibrations with color animations or sound cues for multi-sensory feedback that feels intuitive and premium.

Call to Action

Which vibration pattern do you like best: short, triple, or patterned?
Try it in your own project and share your results in the comments!
And don’t forget to bookmark this post for your next mobile web app idea.

Skill Stuff