Navigator.vibrate() — Methode · JavaScript-Referenz

Signatur

Navigator.prototype.vibrate(pattern)

Beschreibung

navigator.vibrate() gehört zur Vibration API und steuert den Vibrationsmotor von Mobilgeräten. Du kannst eine einzelne Dauer in Millisekunden übergeben oder ein Muster aus abwechselnden Vibrations- und Pausenzeiten, z. B. [200, 100, 200] (200 ms vibrieren, 100 ms Pause, 200 ms vibrieren).

Typische Einsatzfälle sind haptisches Feedback bei Formularfehlern, Bestätigungen in Web-Apps, Spielereignisse oder Benachrichtigungen in PWAs. Die Vibration läuft asynchron: Der Aufruf kehrt sofort zurück, und ein neuer Aufruf ersetzt ein noch laufendes Muster.

Mit navigator.vibrate(0) oder einem leeren Array navigator.vibrate([]) stoppst du eine laufende Vibration. Der Rückgabewert zeigt nur an, ob die Eingabe gültig war und akzeptiert wurde – nicht, ob das Gerät tatsächlich vibriert hat.

Browser erlauben die Vibration nur nach einer Nutzerinteraktion (sticky user activation), etwa nach einem Klick oder Tippen. Aufrufe ohne vorherige Interaktion werden ignoriert und geben false zurück.

Parameter

Name	Typ	Default	Beschreibung
$pattern Pflicht	number \| number[]		Einzelne Vibrationsdauer in Millisekunden oder ein Array aus abwechselnden Werten: Vibration, Pause, Vibration, … Ungerade Positionen (Index 0, 2, …) sind Vibrationen, gerade (1, 3, …) Pausen. `0` oder `[]` brechen eine laufende Vibration ab.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Muster gültig war und angenommen wurde; false bei ungültigen Werten, fehlender Nutzerinteraktion oder wenn der Browser den Aufruf blockiert. Garantiert nicht, dass das Gerät tatsächlich vibriert.

Beispiele

Kurzes haptisches Feedback beim Button-Klick

const button = document.querySelector('#speichern');

button.addEventListener('click', () => {
  // Feature-Erkennung: Safari/iOS kennt die API nicht
  if ('vibrate' in navigator) {
    const ok = navigator.vibrate(50);
    console.log('Vibration angenommen:', ok);
  }
});

Vibration angenommen: true

Muster für Fehlermeldung im Formular

const form = document.querySelector('form');

const vibrieren = (muster) => 'vibrate' in navigator && navigator.vibrate(muster);

form.addEventListener('submit', (event) => {
  if (!form.checkValidity()) {
    event.preventDefault();
    // 3× kurz: 100 ms an, 50 ms Pause, ...
    vibrieren([100, 50, 100, 50, 100]);
  }
});

Dauervibration starten und wieder stoppen

const startBtn = document.querySelector('#alarm-start');
const stopBtn = document.querySelector('#alarm-stop');
let intervalId = null;

startBtn.addEventListener('click', () => {
  // Muster alle 1,5 s wiederholen
  navigator.vibrate([500, 250, 500]);
  intervalId = setInterval(() => navigator.vibrate([500, 250, 500]), 1500);
});

stopBtn.addEventListener('click', () => {
  clearInterval(intervalId);
  navigator.vibrate(0); // laufende Vibration abbrechen
  console.log('Alarm gestoppt');
});

Alarm gestoppt

// Wichtig · Fallstricke

Kompatibilität: Unterstützt in Chrome, Edge, Firefox und Opera auf Android. Safari (macOS und iOS) unterstützt die API nicht – Desktop-Browser ohne Vibrationsmotor ignorieren den Aufruf in der Regel stillschweigend. Immer per 'vibrate' in navigator prüfen.
Nutzerinteraktion nötig: Ohne vorherigen Klick oder Tipp auf die Seite blockiert Chrome den Aufruf (Konsolenwarnung, Rückgabe false).
Nur sicherer Kontext / Top-Level: In Cross-Origin-iframes ist die Vibration in vielen Browsern blockiert.
Der Rückgabewert true heißt nicht, dass wirklich vibriert wurde – Stummschaltung, Energiesparmodus oder Systemeinstellungen können die Vibration unterdrücken.
Browser begrenzen die maximale Dauer und Länge des Musters (Chrome z. B. 10 Sekunden pro Wert); zu lange Werte werden gekürzt.
Wechselt die Seite in den Hintergrund (visibilitychange), wird die Vibration meist abgebrochen.
Barrierefreiheit/UX: Vibration sparsam einsetzen und nie als einzigen Hinweis nutzen – ergänze immer eine visuelle Rückmeldung.

Siehe auch

Navigator Navigator.userActivation Notification GamepadHapticActuator HighlightRegistry.get() new NavigateEvent()