Vibration API Demo - Online Test Haptic Feedback

The Vibration API is a Web API that allows web applications to control the vibration motor of a device. It's part of the navigator interface and can be called via navigator.vibrate(). It's primarily used on mobile devices to provide haptic feedback for notifications, alerts, game interactions, and more. The API accepts either a single duration (in milliseconds) or an array of durations defining a vibration-pause pattern.

The Vibration API is widely supported on Android devices running Chrome, Firefox, Edge, and Samsung Internet. On iOS (iPhone/iPad), Safari technically has the API but does not activate the vibration motor due to Apple's restrictions. Desktop browsers generally expose the API but lack vibration hardware, so calls silently fail. For the best experience, use an Android device with a modern browser. WebView and PWA environments on Android also support the API well.

Single vibration: navigator.vibrate(200); — vibrates for 200ms.
Pattern vibration: navigator.vibrate([100, 50, 100]); — vibrate 100ms, pause 50ms, vibrate 100ms.
Stop vibration: navigator.vibrate(0); or navigator.vibrate([]);
Check support: if ('vibrate' in navigator) { ... }
Note: Vibration must be triggered by a user gesture (click, touch) in most browsers.

Apple restricts access to the vibration motor in Safari on iOS and iPadOS. Although navigator.vibrate exists as a function (to avoid breaking websites that check for support), it does not produce any haptic feedback. This is a deliberate design decision by Apple. There is currently no workaround for web apps — native iOS apps use UIFeedbackGenerator instead. For cross-platform haptic feedback, consider building a native app or using a PWA on Android.

Pass an array of numbers to navigator.vibrate(). The array alternates between vibration duration (odd-indexed: 1st, 3rd, 5th...) and pause duration (even-indexed: 2nd, 4th, 6th...). All values are in milliseconds. For example, [300, 100, 300] means: vibrate 300ms → pause 100ms → vibrate 300ms. Keep total duration reasonable (under 5 seconds) for the best user experience. Use our Custom Pattern input above to test your patterns instantly.

The Vibration API is not restricted to HTTPS — it works on plain HTTP as well. However, Google Chrome has been moving toward requiring HTTPS for many Web APIs, and it's always best practice to serve your site over HTTPS for security and SEO benefits. If you're testing locally on localhost, the API works fine regardless of protocol.

No. The Vibration API only supports on/off control — you can set the duration of vibration bursts but not the intensity. The vibration motor runs at its default strength. Some Android devices allow users to adjust haptic intensity at the system level, but this is not accessible via the Web API. For nuanced haptic effects (light, medium, heavy), you would need to use native SDKs like Android's VibrationEffect or iOS's UIFeedbackGenerator.

Call navigator.vibrate(0) or navigator.vibrate([]) to immediately cancel any active vibration. This is useful when the user navigates away, closes a modal, or when you need to interrupt a long vibration pattern. On this demo page, use the red "Stop Vibration Immediately" button to test this functionality.

The Vibration API is generally safe. Browsers enforce that vibration must be triggered by a user gesture (click, tap, keypress) — a page cannot vibrate on load without interaction. Additionally, if the browser tab is in the background, vibration is automatically suppressed. These safeguards prevent malicious sites from draining your battery or creating annoying auto-vibrating pages. If you encounter a site abusing the API, simply close the tab.

Common use cases include:
• Form validation feedback — brief vibration on errors
• Button press confirmation — micro-tap for virtual keys
• Game interactions — explosion, collision, or power-up effects
• Notification alerts — patterned vibrations for different alerts
• Accessibility enhancements — tactile feedback for visually impaired users
• QR code scan success — a short buzz on successful scan
• E-commerce — subtle feedback when adding items to cart