Use the Vibration API to vibrate your device on the web + Code Examples


Written by Ilias Ism, a digital strategist and founder of MagicSpace, specializing in scaling startups to $1M+ ARR. With a decade of experience, he offers full-funnel growth plans covering design, development, and SEO.
How to use the Vibration API to vibrate your device on the web. (+ Code Examples)
The Vibration API is an API specifically made for mobile devices as they are thankfully the only devices that have a vibrate function. The API allows developers to vibrate a device (in a pattern) for a given duration.
- Note: This article is best viewed on a mobile device. Go to il.ly/vibrate on your mobile device to quickly go to this article.
Vibration API Browser Support
Device | Support |
---|---|
iOS Safari | NO |
Opera Mini | NO |
IE | NO |
BlackBerry | NO |
Android Browser | Since Android 4.4 |
Opera | Yes! |
Chrome | Yes! |
Chrome for Android | Yes! |
Firefox | Yes! |
Your Browser |
The vibration API is implemented in navigator.vibrate
. So calling the function makes your phone vibrate. You can test if your browser is recent enough to have the vibrate
function in navigator
.
Mozilla had their own implementation mozVibrate
so some browsers may support that instead.
var canVibrate = 'vibrate' in navigator || 'mozVibrate' in navigator
if (canVibrate && !('vibrate' in navigator))
navigator.vibrate = navigator.mozVibrate
However, this doesn't mean that your device can vibrate. Just that it's recent enough. There are a few requirements you need to meet.
- You need the hardware for it.
- The page needs to be visible.
- Browser-specific implementation prevents the vibration.
Usage of navigator.vibrate
The navigator.vibrate
function either accepts a number or an array of numbers.
In the following example the device will vibrate for 1000 milliseconds (ms):
Test Code
// vibrate for 1000 ms
navigator.vibrate(1000)
// or alternatively
navigator.vibrate([1000])
The vibration pattern is formed by milliseconds of duration of the vibration and the duration of the waiting period.
In this example the devices will vibrate for 1000 ms, wait 500 ms and vibrate again.
Test Code
// device will vibrate wait vibrate
navigator.vibrate([1000, 500, 1000])
Any new call stops the previous vibration sequence. If the page is no longer visible, like locking the device, minimizing the window, moving to another tab then the vibration also stops.
In this example the devices will stop vibrating.
Test Code
// Stop vibrating
navigator.vibrate()
navigator.vibrate(0)
navigator.vibrate([])
How to Vibrate your Phone on the Web
We can keep vibrating until the user stops touching the device. The vibration stops after a while though. But it's not meant to be pressed infinitely anyway.
In this example the device will keep vibrating until the touch event has stopped
Test Code
var isMobile = /iPhone|iPod|iPad|Android|BlackBerry/.test(navigator.userAgent)
$('.button').on(isMobile ? 'touchstart' : 'mousedown', function (e) {
navigator.vibrate(Infinity) // Infinity is a number
})
$('.button').on(isMobile ? 'touchend' : 'mouseup', function (e) {
navigator.vibrate(0)
})
Vibrate on click
The best use case I can imagine for this API is for buttons. You get a little haptic feedback like you get for native apps. This can be done by setting the vibration to a very low number. For me 50ms seems ideal.
In this example all buttons and links on this page vibrate on tap. We also detect if the device is mobile and use touchend.
Test Code
var isMobile = /iPhone|iPod|iPad|Android|BlackBerry/.test(navigator.userAgent)
$('.button, a').on(isMobile ? 'touchend' : 'click', function (e) {
navigator.vibrate(50)
})
Vibrate via checkboxes
Vibrating after clicking a sliding checkbox is also very helpful. It feels really natural. There is a short vibration at the start, then a period of waiting whilst the checkbox is moving and then a longer vibration at the end.
In this example, the checkbox will vibrate.
<div className="ui slider checkbox">
<input id="product-1" type="checkbox" />
<label htmlFor="product-1">Duvel</label>
</div>
<div className="ui slider checkbox">
<input id="product-2" type="checkbox" />
<label htmlFor="product-2">Jupiler</label>
</div>
$('.ui.checkbox').click(function () {
navigator.vibrate([5, 200, 20])
})
Vibration Duration
If you're not sure how long the haptic feedback should be. You can experiment with various timespans. Try all of these buttons out a mobile device. Anything above 100ms seems to long for me.
In this example the following buttons vibrate each on a different timespan.
Vibrate on notification
Another great use case are for notifications. These can be a bit longer than haptic feedback. Patterns can also be used to differentiate.
Please be aware of the vibration notification on the phone and try not to replicate them as to not to confuse the user. Some visual feedback together with the vibration would be ideal.
Click the buttons below. When the progress bar reaches the end. You get a notification! Each button is a different vibration pattern.
// Vibrate on completion
var pattern = [500, 100, 500];
$(".progress .bar")
.css({width: "0%"})
.animate({width: "100%"}, {
duration: 1000,
complete: function() {
if (canVibrate) navigator.vibrate(pattern);
}
});
jQuery.vibrate.js
If doing it manually seems difficult for you, I've written a jquery plugin that can get you started right away.
Download and embed the code then initialize in one of the following ways.
// Vibration for 50ms on all .button on click
$('.button').vibrate()
// Vibrate for 20ms on click
$('.button').vibrate('short')
// Vibrate for 50ms on click
$('.button').vibrate('medium')
$('.button').vibrate('default')
$('.button').vibrate(50)
// Vibrate for 100ms on click
$('.button').vibrate('long')
// Vibrate for 1000ms on touchstart. Stop vibrating on touchend.
$('.button').vibrate({
duration: 1000,
trigger: 'touchstart',
})
Vibration with Song Patterns
Groggie mentioned his blog post on using the Vibration API for music and theme songs. It's a really cool example of what can be done using the Vibration API and some creative thought. Click on the titles below to play.
navigator.vibrate([
125, 75, 125, 275, 200, 275, 125, 75, 125, 275, 200, 600, 200, 600,
])
navigator.vibrate([
200, 100, 200, 275, 425, 100, 200, 100, 200, 275, 425, 100, 75, 25, 75, 125,
75, 25, 75, 125, 100, 100,
])
navigator.vibrate([
500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170, 40,
500,
])
navigator.vibrate([
100, 30, 100, 30, 100, 200, 200, 30, 200, 30, 200, 200, 100, 30, 100, 30, 100,
])
I also made a slideshow: Learn About The Vibration API from Illyism. Feel free to share it and show it around.
We analyzed 30,000+ Chrome Extensions for busy internet developers like you. Get the List โ
Generate them effortlessly for your website. No design skills required. Start Now โ
Discover GradientPage, your source for gradient wallpapers. Perfect for any app. Explore Now โ
Try MagicBuddy, a chatbot powered by AI. Start chatting now! Visit MagicBuddy โ
Try AI-generated language learning workbooks for free. Customized to your interests and learning style. Learn More โ