Vibration API

HTML5 Vibration API Overview

The HTML5 Vibration API allows web applications to control the device's vibration hardware for short haptic feedback. It is commonly used on mobile phones and tablets to confirm actions, alert users, or provide subtle feedback in games and interactive applications.

The API is accessed through navigator.vibrate(). You can trigger a single vibration duration or define a repeating pattern of vibrations and pauses. Support is strongest on mobile devices and is usually limited on desktop browsers.

Basic Vibration Example

<button id="vibrateButton" type="button">
  Vibrate
</button>

const vibrateButton =
  document.getElementById("vibrateButton");

vibrateButton.addEventListener("click", () => {
  if ("vibrate" in navigator) {
    navigator.vibrate(200);
  } else {
    console.log("Vibration is not supported.");
  }
});

This example vibrates the device for 200 milliseconds when the user clicks a button. Vibration is most reliable when triggered by a direct user action.

How Vibration API Works

The browser forwards vibration requests to the device hardware when supported. A single number vibrates once, while an array defines alternating vibration and pause durations in milliseconds.

Vibration Pattern Syntax

Vibration Pattern Example

function vibrateSuccess() {
  if (!("vibrate" in navigator)) {
    return false;
  }

  return navigator.vibrate([
    100,
    50,
    100
  ]);
}

function vibrateError() {
  if (!("vibrate" in navigator)) {
    return false;
  }

  return navigator.vibrate([
    300,
    100,
    300,
    100,
    300
  ]);
}

vibrateSuccess();
vibrateError();

Patterns let you create distinct feedback for success, warning, and error states. Short double pulses often feel like confirmation, while longer repeated pulses feel more like alerts.

Stop an Active Vibration

// Start a repeating alert pattern

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

// Stop vibration immediately

navigator.vibrate(0);

// Empty array also cancels vibration

navigator.vibrate([]);

Passing 0 or an empty array cancels any ongoing vibration pattern. This is useful when the user dismisses an alert or navigates away from a page.

Game Feedback Example

const gameArea =
  document.getElementById("gameArea");

const hapticPatterns = {
  hit: [40],
  miss: [80, 40, 80],
  win: [100, 50, 100, 50, 200]
};

function playHaptic(eventName) {
  if (!("vibrate" in navigator)) {
    return;
  }

  const pattern =
    hapticPatterns[eventName];

  if (pattern) {
    navigator.vibrate(pattern);
  }
}

gameArea.addEventListener("click", () => {
  const didHitTarget =
    Math.random() > 0.5;

  if (didHitTarget) {
    playHaptic("hit");
  } else {
    playHaptic("miss");
  }
});

Games and interactive apps can use vibration as lightweight haptic feedback for hits, misses, level completion, and other in-game events without building a custom vibration UI.

Reusable Vibration Helper

function vibrateDevice(pattern) {
  if (!("vibrate" in navigator)) {
    return false;
  }

  try {
    return navigator.vibrate(pattern);
  } catch (error) {
    console.error("Vibration failed:", error.message);
    return false;
  }
}

function stopVibration() {
  return vibrateDevice(0);
}

vibrateDevice(150);
vibrateDevice([100, 50, 100]);
stopVibration();

Wrap vibration calls in a helper so your app can centralize support checks, pattern definitions, and error handling in one place.

Feature Detection

function supportsVibration() {
  return "vibrate" in navigator;
}

if (supportsVibration()) {
  console.log("Vibration API supported.");
} else {
  console.log("Vibration API not supported.");
}

const started =
  navigator.vibrate(100);

if (!started) {
  console.log("Vibration request was not accepted.");
}

Always check for API support before calling navigator.vibrate(). The method returns false when the browser cannot perform the requested vibration.

Common Vibration API Method

Common Vibration API Use Cases

• Confirming button taps and form submissions on mobile.
• Alerting users to timer completion or countdown endings.
• Providing haptic feedback in browser-based games.
• Signaling success, warning, or error states in PWAs.
• Enhancing accessibility feedback when paired with visual cues.
• Creating subtle notification feedback on supported devices.

Vibration API Best Practices

• Use vibration sparingly so it remains meaningful.
• Trigger vibration from explicit user actions when possible.
• Keep patterns short and easy to distinguish.
• Provide visual or audio alternatives for unsupported devices.
• Stop vibration when alerts are dismissed or pages unload.
• Respect user preferences and accessibility needs.
• Test on real mobile hardware, not only desktop browsers.

Accessibility Considerations

• Some users disable vibration or find it distracting.
• Do not rely on vibration as the only form of feedback.
• Pair haptics with visible messages, icons, or sounds.
• Avoid long or repeated patterns that may cause discomfort.
• Consider offering a setting to turn haptic feedback off.
• Remember that desktop users often have no vibration hardware.

Common Vibration API Mistakes

• Calling vibration without checking browser support.
• Triggering vibration automatically without user interaction.
• Using very long patterns that annoy users.
• Assuming vibration works on desktop browsers.
• Using vibration as the only alert mechanism.
• Not stopping vibration when the user dismisses a modal or alert.
• Creating patterns that are too similar to distinguish.

Vibration API vs Other Feedback Methods

Key Takeaways

• The Vibration API controls device haptics through navigator.vibrate().
• Pass a number for a single pulse or an array for vibration patterns.
• Use navigator.vibrate(0) to cancel active vibration.
• Support is strongest on mobile and usually requires user interaction.
• Feature detection, short patterns, and accessible fallbacks are essential in production.