Hello everyone 👋
In this article, we will see how can we use Vibration API in our websites.
We can use the Vibration API to provide haptic or vibration feedback to the user using the website for their actions.
Most modern mobile devices include vibration hardware, which lets software code provide physical feedback to the user by causing the device to shake. So this API works well with mobile devices only and targeted for the same.
The Vibration API allows the web apps to access the vibration hardware if it exists.
Implementation 👨💻
Let's explore the API.
We can access the API from the browser's window.navigator object.
Check Vibration API Support
It is always a good idea to check for API support.
if (Boolean(window.navigator.vibrate)) {
// It Supports
...
}
-
vibrateis a method that is responsible for the vibration. - It expects one argument.
Argument is a number or an array of numbers for a series of vibrations. Those numbers are considered as
milliseconds.
If the method was unable to vibrate because of invalid parameters, it will return false else it returns true.
Single Vibration 📳
For a single vibration, we can pass a single number directly or in an array.
// Will vibrate the device for 500ms
window.navigator.vibrate(500);
// Same as the above line
window.navigator.vibrate([500]);
Pattern Vibration 📳 📳 📳
To vibrate the device in a pattern, we can pass an array of numbers.
Even indices numbers are responsible for the vibration and odd indices numbers will delay that much millisecond before the next vibration.
// Vibrate for 500ms, Wait for 200ms, Vibrate for 800ms
window.navigator.vibrate([500, 200, 800]);
Cancelling Vibrations
To cancel an ongoing vibration pattern, we need to pass a 0 or an empty array or an array containing all zeroes to the vibrate method.
window.navigator.vibrate(0);
window.navigator.vibrate([])
Fun Example ✨
Vibrate SOS in morse code.
window.navigator.vibrate([
100,30,100,30,100,30,
200,30,200,30,200,30,
100,30,100,30,100
]);
*Working only on Chrome Android
Originally published on blog.bibekkakati.me
Thank you for reading 🙏
If you enjoyed this article or found it helpful, give it a thumbs-up 👍
Feel free to connect 👋
Twitter | Instagram | LinkedIn
If you like my work and want to support it, you can do it here. I will really appreciate it.
Top comments (31)
👍
For anyone using Angular, ngx-vibration makes using vibrations easy as pie.
Thank you for sharing that.
Sigh. What will happen to the phones if I do this in an infinite interval??!
I'm not sure what type of impact devices can have but it will eat up more battery.
Well, at least I can make a milk shake by placing my cup on the phone while visiting a site with infinite vibration.
You can use it as a massager too.
true
Time to build that massager app I always wanted to
You can open your virtual massage parlour 😉.
Tried it on my phone and it doesnt work :<
New APIs like these take a while to get widespread support, Apps that come out using these would be "experimental" til they are widely accepted.
Yeah, you are right. But this API is not so new, I don't know why other environments are taking so long to add support for it.
Hey @pavelloz , It's working fine. Check out this Live Page.
Not working on android/firefox :\
Yeah. Firefox has some issue. It is working only on Chrome Android.
Check this comment.
It doesn't really work though.
Its working on Chrome android. Firefox android has some bug.
Doesn't work on iPhone either
Checked the docs. As usual, iOS doesn't allow to access the API in the browser. So currently, its working perfectly only on Chrome android.
Good to know this new Web API.
Thanks!
Wow I didn't know about this! Although I wonder, when do we actually need to use vibration when visiting websites via the browser. I don't remember encountering this functionality while browsing.
Vibration is used by some sites while showing error, wrong input, or to give a haptic feedback on clicking action buttons responsible for undo-able task etc.
This is really awesome! Trying to embed it in my web based game!
Glad you liked it.
Live example (check with your phone) - jsfiddle.net/unfor19/zeh3d1uo/
For me it works, on Galaxy S10 , Chrome 90.0.4430.91
Thank you for that.
I have hosted the page to make it easier for readers to test it.
Live Page
Why it doesnt work on firefox?
I think we have to use the
mozVibratemethod for firefox. Let me update the code.Edited: So I tried and tested it, and came to know that somehow it is not working with Firebox. There are some open issues on Github too.
Seems really easy to implement. I could give it a shot! Thanks for sharing!
You're welcome.
You can try this too. You will like it.