The HTML5 API opens up the ability to utilize a device’s vibration functionality. While from a user experience standpoint you’ll want to be very careful not to abuse this feature as most people will not be expecting a website to vibrate their phone, it’s also very fun to play with.
Here is the basic vibration snippet. The number, like the rest of JS timing, is in milliseconds.
if (navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate) {
navigator.vibrate(1000);
}
You can also create vibration patterns. The syntax is simply a pattern of on and off (starting with on and alternating thereafter). Here are some fun patterns to try.
These patterns could also be used on some of your phone’s apps that allow for custom patterns. Note that many phone apps start with “off”, so you may need to add a “0” to the pattern at the beginning.
Super Mario Theme Intro
navigator.vibrate([125,75,125,275,200,275,125,75,125,275,200,600,200,600]);
Teenage Mutant Ninja Turtles
navigator.vibrate([75,75,75,75,75,75,75,75,150,150,150,450,75,75,75,75,75,525]);
Voltron Theme
navigator.vibrate([250,200,150,150,100,50,450,450,150,150,100,50,900,2250]);
Final Fantasy Victory Fanfare
navigator.vibrate([50,100,50,100,50,100,400,100,300,100,350,50,200,100,100,50,600]);
Star Wars Imperial March (Darth Vader’s Theme)
navigator.vibrate([500,110,500,110,450,110,200,110,170,40,450,110,200,110,170,40,500]);
Go Go Power Rangers
navigator.vibrate([150,150,150,150,75,75,150,150,150,150,450]);
Shave and a Haircut
navigator.vibrate([100,200,100,100,75,25,100,200,100,500,100,200,100,500]);
Morse Code SOS
navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]);
James Bond 007
navigator.vibrate([200,100,200,275,425,100,200,100,200,275,425,100,75,25,75,125,75,25,75,125,100,100]);
Mortal Kombat Theme
navigator.vibrate([100,200,100,200,100,200,100,200,100,100,100,100,100,200,100,200,100,200,100,200,100,100,100,100,100,200,100,200,100,200,100,200,100,100,100,100,100,100,100,100,100,100,50,50,100,800]);
Michael Jackson – Smooth Criminal
navigator.vibrate([0,300,100,50,100,50,100,50,100,50,100,50,100,50,150,150,150,450,100,50,100,50,150,150,150,450,100,50,100,50,150,150,150,450,150,150]);
Dream Theater – Fatal Tragedy “What a phenomenon”
navigator.vibrate([75,38,75,488,75,38,75,200,75,38,75,400]);
Dream Theater – Overture 1928 Intro
navigator.vibrate([75,25,75,25,75,25,75,525,75,25,75,25,75,25,75,25,75,25,75,25,75,225,75,25,75,25,75,25,75,225,75,25,75,25,75,25,75,525,75,25,75,25,75,25,75,25,75,25,75,25,75,225,75,25,75,25,75,25,75,225]);
Dream Theater – Strange Déjà Vu Intro
navigator.vibrate([100,50,100,50,100,50,100,350,100,50,100,50,100,50,100,350,100,50,100,50,100,500,100,50,100,50,100,50,100,1400]);
Muse – Madness
navigator.vibrate([80,80,80,80,80,80,80,80,80,80,80,80,80,80,80,80,320,160,320,160,320]);
Pain of Salvation – Nihil Morari
navigator.vibrate([50,50,50,50,50,50,50,550,300,300,100,200,50,50,50,50,50,50,50,250]);
Karnivool – Cote
navigator.vibrate([75,75,75,75,75,225,75,75,75,75,75,75,75,225,75,75,75,75,75,75,75,225,75,75,75,75,75,75,75,225,75,75,75,75,75,75,75,225,75,75,75,75,75,225,75,75,75,225,75,75,75,225,75,75,75,225,75,75,75,75,75,225,75,75,75,75,75,75,75,225,75,75,75,75,75,75,75,225,75,75,75,75,75,75,75,225,75,75,75,75,75,75,75,225,75,75,75,75,75,75]);
TesseracT – Nocturne
navigator.vibrate([660,60,180,60,60,180,60,180,60,180,420,60,180,60,60,180,60,180,60,180,420,60,180,60,60,180,60,180,60,180,420,60,180,60,60,180,60,180,420,60,420,60]);
TesseracT – Perfection
This is my coup de grâce since it’s one of my favorite riffs. It’s the main rhythm from “Perfection” by TesseracT.
navigator.vibrate([75,225,75,75,75,75,75,225,75,225,75,225,75,75,75,225,75,225,75,75,75,75,75,225,75,225,75,225,75,75,75,225,75,225,75,75,75,75,75,225,75,225,150,150,75,75,75,225,75,375,75,75,75,75,75,225,75,225,75,225,75,75,75,225,75,225,75,75,75,75,75,225,75,225,75,225,75,75,75,225,75,225,75,75,75,75,150,150]);
Here is a great resource for more vibration documentation.
including example: