Chord Garden

A playful web app that helps young children (about 2–6 years old) develop perfect (absolute) pitch using the Eguchi Chord Identification Method.

The child hears a chord on a real piano and taps the matching colour. No reading, no scores, no chord names — just listening and playing. Grown-ups get a quiet, PIN-protected area to choose colours, follow progress, and add the next colour when the child is ready.

---

The method in one minute

The Eguchi method teaches absolute pitch to very young children by pairing each chord with a fixed colour:

Order	Colour	Chord	Notes
1	🔴 Red	C	C E G
2	🟡 Yellow	F/C	C F A
3	🔵 Blue	G/B	B D G
4	⚫ Black	F/A	A C F
5	🟢 Green	G/D	D G B
6	🟠 Orange	C/E	E G C
7	🟣 Purple	F	F A C
8	🩷 Pink	G	G B D
9	🟤 Brown	C/G	G C E

(Five advanced colours — Gray, Tan, Light Green, Light Purple, Sky Blue — cover the remaining major triads.)

How to practise:

• Short and often — about 5 sessions a day, 2–3 minutes each (~20 rounds).
• Brand-new learners can start with one colour — pure listening and imprinting, no choice to make yet — then move to two colours once that first one is familiar, so there is a real choice to make.
• Introduce colours one at a time, roughly every two weeks.
• Only add the next colour once the current ones are recognised with near‑100% accuracy. The grown-up area shows a readiness signal and lets you add it.

Learn more: Eguchi's Chord Identification Method (Ichionkai Music School).

---

Run it

It's a static site — no build step, no dependencies to install.

Option A — just open it

Open index.html in a modern browser (Chrome, Safari, Firefox, Edge).

Option B — serve locally (recommended; avoids any browser file:// quirks)

cd rainbow-pitch
python3 -m http.server 8000
# then visit http://localhost:8000

Option C — host it free

Push to GitHub and enable GitHub Pages (serve from the repo root), or drop the folder onto Netlify / Vercel / Cloudflare Pages.

The piano sound is played by Tone.js. The piano note files are self-hosted in assets/piano/, built from the Salamander Grand Piano recordings by tools/piano-samples/. The first visit needs an internet connection, to fetch Tone.js and to fill the offline cache; after that, a service worker keeps the whole app — including the piano — working fully offline when served over http(s) (e.g. GitHub Pages). Opening index.html directly via file:// still works, just without offline caching.

An installed copy also updates itself: a new version downloads in the background and switches over automatically the next time the child Home screen is showing (never mid-set or mid-celebration), which matters on iPhone/iPad where an installed PWA can stay open in the app switcher for days. Settings → About shows the running version and a "Check for updates" button for a grown-up who wants to update right away. Release checklist: bump the version on every release, as MAJOR.MINOR.PATCH (a patch for a fix, a minor for new features; 1.0.0 once the app is ready), in APP_VERSION in js/app.js and CACHE_NAME in sw.js together — a test (tests/version.test.mjs) fails the suite if they drift apart.

---

Using the app

Child (default)

1. Tap Play (this also wakes up the audio — browsers require a tap first).
2. Listen to the chord, then tap the matching colour.
3. A wrong tap is gentle: the right flag glows while the chord plays again, and tapping it moves on. Nothing is marked "wrong."
4. Tap All done any time — stopping early is fine, never a failure.
5. Finish the set, then tap the watering can to water today's flower. A set stopped early is saved for the grown-up but doesn't water it. Each finished set helps it grow — seed, sprout, leaves, bud — and the fifth set of the day makes it bloom in the colours just practised. Every day's flower stays in the garden on the home screen.

Grown-ups

Tap the lock button on the home screen and enter the demo PIN 2468.

• Colours — see the readiness signal, add the next colour, or hand-pick the active set (keep at least two).
• Progress — accuracy per colour, recent sessions, and a JSON export.
• Children — add/switch/remove child profiles (siblings each keep their own progress).
• Settings — set length, rename a child, reset progress, turn the pictures on the flags on or off, and natural piano variety (each chord played a little softer or firmer, with the notes a few milliseconds apart, never changing the notes; on for new children, off for existing ones until you choose); also Real piano mode (below). The whole app's language (English or Spanish; follows the browser by default, can be changed here) and note names (C D E or Do Re Mi) are set here too — device-wide preferences, like the PIN, not per child. When a child is ready for a new colour, a small dot appears on the lock on Home (and optionally a badge on the installed app's icon) until you open the grown-up area; both can be switched off here.

The PIN is a light gate for demos, not real security. All data is stored only on this device (browser localStorage); nothing is uploaded.

Real piano mode (experimental)

Instead of the app choosing and playing a chord, a grown-up plays one on a real piano near the device; the app listens through the microphone, decides which chord it heard, and the child taps the matching colour. Turn it on per-child in Settings. All listening happens locally in the browser — audio is never recorded, saved, or sent anywhere.

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗