No Login Data Private Local Save

Vibration API Demo - Online Test Haptic Feedback

12
0
0
0
Checking device compatibility...
Vibrating...

Tap any vibration button — the icon shakes even on desktop

Preset Vibration Patterns
Popular 📳
Double Pulse

100-50-100 ms

⚠️
Warning Alert

300-100-300 ms

Success Chime

100-50-200 ms

Error Shake

500-100-200-100-200

💓
Heartbeat

50-100-50-100-50-300

🆘
SOS Signal

Morse pattern

🔔
Doorbell

100-100-100-100-100

Alarm Clock

500-200-500-200-500

👆
Tap Feedback

30 ms micro-tap

📞
Urgent Call

150-30-150-30-150-30-150

Custom Vibration Pattern
Quick fill: 200,80,200,80,500 100,30,100,30,100 400,200,400 60,40,60,40,60,200
Format: comma-separated numbers in milliseconds. Odd positions vibrate, even positions pause.
Vibration Log
  • No vibrations triggered yet. Tap a button above!
Frequently Asked Questions

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