(Ab)use the Platform

a.k.a. Building a Multiplayer Piano the "Wrong" Way

Let's learn and use web standards in an unconventional way 🥳 ... we're building a piano you can play with friends. That in and of itself isn't very interesting, but we're going to be using:

• Remix
• Forms
• Web Audio (mostly via Tone.js)
• <meta>, <progress> and more
• Browser history
• Progressive enhancement
• Response and Server-sent events

In addition to the progressively-enhanced multiplayer piano, this repo also contains several intermediate iterations (no-op, client-side, and single-player).

Quick Start

• clone the repo
• run npm install
• run npm run dev
• open your browser to https://localhost:3000

You might also need to go into your browser settings to allow sounds for localhost (or whatever host you run this on).

But why?

A more conventional approach might be just to require client-side JavaScript with websockets and media streams. Why do it this way?

It's true this example is a bit contrived and the no-JS side of things is a little janky. That said:

1. This approach provides the same level of interactivity and peformance as other approaches
2. This approach ships less code to the browser than other approaches
3. This approach requires a comparable amount of code to write
4. We get progressive enhancement with minimal effort

If this approach works for building a multiplayer piano, then why not do the same for traditional web apps, where it's even easier and the benefits are greater? 🤔

Screenshot