JavaScript Navigator vibrate() Method

What You’ll Learn

navigator.vibrate() pulses phone (and some tablet) vibration hardware. Learn single-duration vs pattern arrays, how to cancel, user-activation rules, five examples, and try-it labs best tested on a real mobile device.

Introduction

Games, chat apps, and form errors often give a short haptic pulse so the user feels feedback without staring at the screen. The Vibration API exposes that through navigator.vibrate().

Pass one number (vibrate that many milliseconds) or an array that alternates vibrate and pause. A new call replaces any pattern already running. Call it from a user gesture (button click). Silent / Do Not Disturb modes may block physical vibration even when the method returns true.

Understanding the vibrate() Method

• One argument — a number of milliseconds, or an array of ms values.
• Array meaning — [vibrate, pause, vibrate, pause, …].
• Replace previous — a new call stops the old pattern and starts the new one.
• Cancel — 0, [], or [0] stops vibration.
• Return value — true if parameters are valid; false if invalid.
• No hardware — desktop / missing vibrator: usually no effect (still may return true).

📝 Syntax

General form of the method:

navigator.vibrate(pattern)

Parameters

• pattern — a single number (ms) or an array of numbers alternating vibrate / pause.

Return value

• true if the vibration was successfully started (or canceled with a valid cancel pattern).
• false if the parameters are invalid.

MDN-style examples

navigator.vibrate(200); // vibrate for 200ms

navigator.vibrate([
  100, 30, 100, 30, 100, 30, 200, 30, 200, 30, 200, 30, 100, 30, 100, 30, 100
]); // Vibrate "SOS" in Morse

Examples Gallery

Vibration is easiest to feel on a phone. Desktop browsers may return true with no haptic effect. Always call from a button click so user activation is present.

const lines = [
  "vibrate: " +
    (typeof navigator.vibrate === "function" ? "available" : "missing"),
  "tip: test on a phone after a button click"
];
console.log(lines.join("\n"));

vibrate: available
tip: test on a phone after a button click
(or missing on some desktop / Safari setups)

function buzzShort() {
  if (typeof navigator.vibrate !== "function") {
    return "API not supported";
  }
  const ok = navigator.vibrate(200);
  return ok ? "vibrate(200) accepted" : "vibrate(200) rejected";
}

// Call buzzShort() from a button click handler

vibrate(200) accepted
(feel it on a phone; desktop may still print accepted)

const SOS = [
  100, 30, 100, 30, 100, 30, 200, 30, 200, 30, 200, 30, 100, 30, 100, 30, 100
];

function buzzSos() {
  if (typeof navigator.vibrate !== "function") {
    return "API not supported";
  }
  const ok = navigator.vibrate(SOS);
  return ok ? "SOS pattern started" : "SOS pattern rejected";
}

// Call buzzSos() from a button click

SOS pattern started

function startLongBuzz() {
  if (typeof navigator.vibrate !== "function") {
    return "missing";
  }
  // Long alternating pattern — cancel with vibrate(0)
  navigator.vibrate([400, 200, 400, 200, 400, 200, 400]);
  return "long pattern started — call stopBuzz() to cancel";
}

function stopBuzz() {
  if (typeof navigator.vibrate !== "function") {
    return "missing";
  }
  const ok = navigator.vibrate(0);
  return ok ? "canceled with vibrate(0)" : "cancel rejected";
}

// Wire startLongBuzz / stopBuzz to two buttons

long pattern started — call stopBuzz() to cancel
canceled with vibrate(0)

function vibrateSafe(pattern) {
  if (typeof navigator.vibrate !== "function") {
    return { ok: false, reason: "missing-api" };
  }
  try {
    const accepted = navigator.vibrate(pattern);
    return {
      ok: accepted,
      reason: accepted ? "accepted" : "invalid-pattern"
    };
  } catch (err) {
    return { ok: false, reason: err.name };
  }
}

// From a button:
// console.log(JSON.stringify(vibrateSafe(150)));
// console.log(JSON.stringify(vibrateSafe([80, 40, 80])));
// console.log(JSON.stringify(vibrateSafe(0))); // cancel

{"ok":true,"reason":"accepted"}
(or missing-api / invalid-pattern)

🚀 Common Use Cases

• Form validation — short buzz when an error appears.
• Chat / notifications — gentle pulse when a message arrives (with permission UX).
• Games — hit / miss patterns with short arrays.
• Timers — alert when a countdown finishes (from a user-started timer UI).
• Accessibility care — keep patterns short; offer a setting to disable haptics.

📝 Notes

• Limited availability (not Baseline) — feature-detect always.
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Requires sticky user activation (call from a click / tap).
• Silent / DND modes may block physical vibration.
• Related: share(), unregisterProtocolHandler(), canShare(), Window.

💡 Best Practices