HTML APIs
What is the Vibration API in HTML5?
The Vibration API lets a web page make a mobile device vibrate through a single call, navigator.vibrate(), useful for tactile feedback on taps, alerts and game events.
What is the Vibration API?
The Vibration API provides a way for web apps to access a device's vibration hardware, if it has any. It is a tiny API - essentially one method, navigator.vibrate() - designed to give haptic (touch) feedback. It is meant for mobile devices; most desktops have no vibration motor, so the call simply does nothing there.
Common uses include a subtle buzz when a button is pressed, an alert when a message arrives, or feedback for events in a mobile browser game.
Triggering a vibration
Call navigator.vibrate(duration) with a number of milliseconds to vibrate once. Calling navigator.vibrate(0) or navigator.vibrate([]) cancels any ongoing vibration. The method returns true if the request was accepted, or false otherwise.
<button id="buzz">Vibrate for 200ms</button>
<script>
document.getElementById("buzz").addEventListener("click", () => {
if ("vibrate" in navigator) {
navigator.vibrate(200); // vibrate for 200 milliseconds
} else {
alert("Vibration API is not supported on this device/browser.");
}
});
</script>Vibration patterns
Pass an array to create a pattern of alternating vibrate/pause durations in milliseconds. The values at even indexes are vibrations and the values at odd indexes are pauses. This lets you build buzz-pause-buzz sequences, like a Morse-style alert.
// vibrate 100ms, pause 30ms, vibrate 200ms, pause 30ms, vibrate 100ms
navigator.vibrate([100, 30, 200, 30, 100]);
// Cancel any current or queued vibration
navigator.vibrate(0);
// A simple "double tap" confirmation buzz
function confirmBuzz() {
navigator.vibrate([50, 40, 50]);
}Mobile-only and gesture-gated: vibration only works on devices with a vibration motor (mostly Android phones). Browsers require the call to happen in response to a user gesture such as a click or tap - programmatic calls with no user interaction are usually ignored. The page must not be hidden in the background.
Support is uneven. It works in Chrome and other Chromium browsers on Android, but Safari on iOS does NOT support navigator.vibrate at all. On desktop browsers the API may exist but has no hardware to drive, so it silently does nothing. Always feature-detect with 'vibrate' in navigator and treat vibration as a non-essential enhancement.
navigator.vibrate() at a glance
| Call | Effect |
|---|---|
| navigator.vibrate(200) | Vibrate once for 200 milliseconds |
| navigator.vibrate([100, 30, 100]) | Vibrate 100ms, pause 30ms, vibrate 100ms |
| navigator.vibrate(0) | Stop / cancel any current vibration |
| navigator.vibrate([]) | Also cancels any current vibration |
| 'vibrate' in navigator | Feature-detect before calling |
Keep vibrations short and infrequent. Long or repeated buzzing drains the battery and annoys users, and some browsers cap the maximum duration. Never rely on vibration for critical information, since many devices and browsers cannot deliver it.