@kentcdodds/pocket-piano

Pocket Piano

Intent

A simple piano on your phone for choir practice: plunk out a few notes, find a starting pitch, or check a chord. It opens on your singing part's range, uses the phone's own volume buttons, slides through the keyboard with two fingers, installs like an app, and still opens offline.

What it does

• A full 88-key keyboard (A0 to C8) that opens on your singing part, with that part's range marked by a green strip. Tenor (C3 to A4) is the default.
• Singing part: pick Soprano (C4 to A5), Alto (F3 to D5), Tenor (C3 to A4), Baritone (A2 to F4), or Bass (E2 to E4) on the About page. It is saved on your phone and sets the green range and where the keyboard opens.
• Middle C (C4) is gold with a "middle C" tag. Every white key is labeled (C3, D3, and so on). Black keys show their sharp.
• One finger plays, and sliding it glides from key to key.
• Several fingers play a chord.
• Two fingers dragged along the keyboard scroll it smoothly, with a little momentum, and stop at the ends. When you let go it glides to rest on whole keys, so no key is ever cut off at either edge. Notes under those fingers are cut the moment the drag is recognized, and nothing plays until you lift them.
• Tap the range button (for example "A3 to A5") to glide back to your part.
• Notes hold while your finger is down and fade out on release. Sustain lets them ring on after you lift.
• The gold readout shows the last note and its frequency. Tap it to replay.
• Volume: there is no app volume. The app plays at full level through a limiter, so the phone's volume buttons (media volume) are the only control.

Layout

Keys always run left (low) to right (high).

• Landscape: one row, 15 white keys across the screen (C3 to C5 for tenor).
• Portrait: two stacked rows of eight white keys each, the top row starting where the bottom row ends (for tenor, C3 to C4 on the bottom and C4 to C5 on top). The rows act as one continuous window: a two-finger sideways drag on either row slides both together.

About and updates

The main screen is just the keys. The small (i) button at the top right opens the About page: the singing part picker, a "How it works" section (what the colors mean, gestures, volume, installing), and the published commit, its message, when it was published and committed (in your phone's time), when you last checked for updates, and a link to the package. Tap Check for updates there any time. When a newer version is published, a small "Update available" card appears at the bottom of the screen with Refresh and Dismiss.

How to use it

Open https://piano.kentcdodds.com/ on your phone. Anyone can use it, no sign-in needed. The first tap on a key turns the sound on.

Install it: tap the green Install button when it appears, or use Chrome's menu and choose "Install app" (or "Add to Home screen"). The installed app opens full screen and works offline after the first visit.

Done when

• Keys render with labels and middle C is easy to spot.
• Tapping a key plays right away, chords work, and two-finger drags scroll without sounding notes.
• The phone's volume buttons change the loudness.
• Chrome offers to install it, and the installed app opens offline.

No accounts or secrets. The only stored settings are Sustain and your singing part, in your browser.

Make your own copy

This package is public, so you can fork it on Kody and run your own piano.

1. Fork it from its Kody package page. Your copy gets your own name, for example @you/pocket-piano. Rename it in package.json if you like.
2. Publish it. Your app shows up at https://<you>.kody.run/pocket-piano/ (or whatever you named it). No accounts, secrets, or settings needed.
3. Record the version after each publish so the About page and the "Update available" card work. The exact call is in AGENTS.md.
4. Point your own code link. The About page's "View this app on Kody" button uses CODE_URL in src/about-page.ts. Change it to your copy's page.
5. Custom domain (optional). To serve it at your own domain, make the app internet-visible in Kody and add the hostname. If your DNS is on Cloudflare, the @kentcdodds/cloudflare custom-domain helper does it in one step, or follow Kody's custom domain guide. Skip this to use the kody.run address.
6. Share image (optional). The canonical and social preview links follow whatever address the app is opened at, so they work without changes. The preview image itself shows piano.kentcdodds.com at the bottom. To put your address there, re-render it (see AGENTS.md).

Ranges, colors, and wording live in src/parts.ts, src/styles.ts, and src/about-page.ts. AGENTS.md has the details.