The Navigator.vibrate() Song Guessing Game

Recently I went to my first ever Developer Conference! It was great getting to meet and learn from a bunch of people way more experienced than I am.

One of the talks I went to was titled Yes, Your Browser Can Do That (Probably) — A Look At Modern Web APIs You Might Not Know. Julian Burr presented a list of fresh (or neglected) Browser APIs that have functionality so integrated with the OS, you’d guess it would only be available in native apps.

Three of my favourites:

  1. Battery Status API, which lets you get information about the user’s battery level, including an estimate on when it runs out. It’s useful for long interactions. For example, when the user starts a lengthy form and battery is low, you could display a prompt to save.
  2. Screen Wake Lock API. This allows you to prevent the user’s screen from going to sleep. I’m excited to implement this in a focus mode web app. Even while a user focuses on one task for a longer time and doesn’t provide tactile input, the screen can remain awake.
  3. Contact Picker API, which opens up an installed Contact application and allows the user to select one or multiple contacts to share their information with the web page. This functionality is familiar from a lot of native apps: Selecting multiple contacts to, for example, invite them through email to try this app. To have this available in a web app is pretty cool.

Disclaimer

At the time of writing (December 2022), browser support for these APIs varies. Most aforementioned APIs are supported on Chrome and Edge, but support for Safari and Firefox is spotty. You can check Browser compatibility through Can I use… and the MDN Web Docs.

These functionalities are best thought of as progressive enhancement. Not necessary for the function of the website, but a cherry on top for the user whose browser already support it.

The Vibration API

Now, to the Browser API that allows for some really fun implementations: The Vibration API. As the name suggests, it allows web apps to pulse the device’s hardware on supported browsers.

This can be a single vibration, specified in ms:

window.navigator.vibrate(200);
window.navigator.vibrate([200]);

Or a pattern:

window.navigator.vibrate([200, 100, 200]);

The Song Guessing Game

Of course, this is the internet. So someone found a fun and creative implementation for this. In this case, being able to control the pattern allows phones to pulse in a specific rhythm. Through what I can only assume to be painstaking trial and error, people figured out how to port popular songs into buzzing patterns.

I’ve added three of those below. Tap the buttons and see how many you can guess!

📱 This functionality only works on devices with buzzable hardware, e.g. your phone. If you’re on desktop, scan the QR code to open this page on another device.

⚠️ Also, sorry iOS users. At the time of writing, Navigator.vibrate() is not supported on Safari or Chrome on iOS. The latest versions of Chrome for Android, Samsung Internet, Android Browser and Opera Mobile should support this functionality.

QR code for this post url

Let’s play! 🎵

Snippet 1

Show solution #1 Did you guess it right? It’s the Super Mario Theme Song 🍄!

Snippet 2

Show solution #2 That sounded ominous… It’s the “Imperial March” from Star Wars 🌌

Snippet 3

Show solution #3 Did you feel the groove? It’s Michael Jackson’s “Smooth Criminal”! 🕺🏻

I hope you had fun playing along! The credit for these patterns goes to henriquemelanda and Gearside Design. There are plenty more snippets available on both of those sites.