I Made a Breakout Room with a Digital Piano and JavaScript

Several months ago, my wife and I decided to create our own "breakout room" experience in our house to entertain friends and family.

I decided to get crafty with JavaScript and create a series of locks that required players to play certain notes correctly on a digital piano. The piano is connected to a computer with a MIDI cable. On the computer, a Chrome browser window is open and listening for input with the Web MIDI API.

I wrote an entire article about everything I learned in the process. Read it now on Smashing Magazine.

ALSO, I got published on Smashing Magazine!! Ahh!

Here’s a video of a demo gameplay sequence from the Smashing article. Shown below the Chrome window is a virtual MIDI keyboard to help visualize which notes are currently being played. For a normal breakout room scenario, this can run in full-screen mode and with no other inputs in the room (such as a mouse or computer keyboard) to prevent users from closing the window.