# Learn Piano

Interactive piano learning site with **two audiences**:

| Path | File | Idea |
|------|------|------|
| **Landing** | [`index.html`](index.html) | The same order as the book: In C, then After C, then other keys, then modes |
| **Introduction** | [`introduction.html`](introduction.html) / [`introduction.md`](introduction.md) | How to sit, finger numbers, middle C, and the black-key map |
| **Simple melodies** | [`simple-melodies.html`](simple-melodies.html) / [`simple-melodies.md`](simple-melodies.md) | Right-hand tunes novices know: Hot Cross Buns, Ode to Joy, Twinkle, and the rest. Five fingers, written in C |
| **Major scale** | [`major-scale.html`](major-scale.html) / [`major-scale.md`](major-scale.md) | That five-finger shape kept going, then the W–W–H pattern |
| **How chords are built** | [`building-chords.html`](building-chords.html) / [`building-chords.md`](building-chords.md) | Notes 1, 3, and 5 of that scale, still in C |
| **Diatonic chords** | [`chord-cheatsheet.html`](chord-cheatsheet.html) / [`chord-cheatsheet.md`](chord-cheatsheet.md) | The seven chords in a key, ready to grab. Am arrives as the chord on the 6th |
| **Chord changes** | [`songs.html`](songs.html) / [`songs.md`](songs.md) | Loops under songs. Change chords in time |
| **Melody and chords** | [`melody-and-chords.html`](melody-and-chords.html) / [`melody-and-chords.md`](melody-and-chords.md) | Right-hand tune, left-hand root and beat. The chord, one note at a time, comes before the tune |
| **Independence** | [`independence.html`](independence.html) / [`independence.md`](independence.md) | Twelve steps. Right hand leads. Left hand keeps the harmony and the beat. End of playing in C |
| **Minor scale** | [`minor-scale.html`](minor-scale.html) / [`minor-scale.md`](minor-scale.md) | The Am chord, stretched into its own scale |
| **Scales lab** | [`scales-lab.html`](scales-lab.html) / [`scales-lab.md`](scales-lab.md) | Major and minor side by side, with fingering |
| **Note values** | [`note-values.html`](note-values.html) / [`note-values.md`](note-values.md) | Names for the lengths Independence already used: whole, half, quarter, eighth, sixteenth |
| **Time signatures** | [`time-signatures.html`](time-signatures.html) / [`time-signatures.md`](time-signatures.md) | How many of those values fill a bar — 2/4, 3/4, 4/4, 6/8, odd groupings |
| **Rhythm in the hands** | [`rhythm-hands.html`](rhythm-hands.html) / [`rhythm-hands.md`](rhythm-hands.md) | Left-hand Charleston, tresillo, habanera, cinquillo; bossa clave; three against two to five against four |
| **Sight reading** | [`reading.html`](reading.html) / [`reading.md`](reading.md) | Name a note, starting in the five-finger shape; then bass and grand staff |
| **Highway Game** | [`highway.html`](highway.html) / [`highway.md`](highway.md) | Hear the tune, play one note into the microphone, or hit the falling notes with MIDI |
| **Circle of fifths** | [`circle-of-fifths.html`](circle-of-fifths.html) / [`circle-of-fifths.md`](circle-of-fifths.md) | The map out of C. Key signatures, relative minors, neighbouring keys |
| **Other chord types** | [`chord-types.html`](chord-types.html) / [`chord-types.md`](chord-types.md) | Sus, 6ths, extensions, altered — once major, minor, and the seventh are familiar |
| **Bossa nova comping** | [`bossa-comping.html`](bossa-comping.html) / [`bossa-comping.md`](bossa-comping.md) | Root and fifth in the left hand, seventh chords on the bossa clave in the right; two-note voicings; starting on either side |
| **Every chord, every key** | [`chord-dictionary.html`](chord-dictionary.html) / [`chord-dictionary.md`](chord-dictionary.md) | Appendix of spellings: you know the name, the row spells it |
| **Modes** | [`modes.html`](modes.html) / [`modes.md`](modes.md) | The minor-scale trick for every degree: same notes, a new home |
| **Modes lab** | [`modes-lab.html`](modes-lab.html) / [`modes-lab.md`](modes-lab.md) | Build and hear any mode on the keyboard |
| **Beyond the major scale** | [`beyond-scales.html`](beyond-scales.html) / [`beyond-scales.md`](beyond-scales.md) | What changes when the note list itself changes |
| **Beyond the major scale lab** | [`beyond-scales-lab.html`](beyond-scales-lab.html) / [`beyond-scales-lab.md`](beyond-scales-lab.md) | Build and hear a scale from any of those families |
| **Drills** | [`drills.html`](drills.html) / [`drills.md`](drills.md) | Five-finger warm-up, contrary motion, trills, thumb-under. Beside the path, not in the middle of it |
| **Exercises** | [`exercises.html`](exercises.html) / [`exercises.md`](exercises.md) | Longer patterns with no tune: Hanon No. 1, scales, arpeggios, two-against-one |
| **Hanon (Part I)** | [`hanon.html`](hanon.html) / [`hanon.md`](hanon.md) | All 20 Part I exercises on a grand staff (data from Mutopia, CC BY-SA) |
| **Solo lab** | [`solo-lab.html`](solo-lab.html) / [`solo-lab.md`](solo-lab.md) | Improvise over a loop |
| **Training routines** | [`routines.html`](routines.html) / [`routines.md`](routines.md) | Guided workouts — Scale Forge, Circle of Fifths, Chord & Arp Bootcamp, Progression Drill |
| **Quest Mode** | [`quest.html`](quest.html) / [`quest.md`](quest.md) | Three tracks, lucky dips, echo & note-race games, streaks, points, stars |
| **Resources** | [`resources.html`](resources.html) / [`resources.md`](resources.md) | Best free theory, scores, and tools |
| **Ear training** | [/sangeet-yatra/tools/ear-training.html](/sangeet-yatra/tools/ear-training.html) | Shared Tools hub (not this room) |

**Live site:** https://bikashacharya.com/sangeet-yatra/piano/ — the landing links to [Sangeet Yatra](https://bikashacharya.com/sangeet-yatra/) (singing, guitar, madal, tabla).

## How the pages fit together

The sidebar, the landing page, and Previous / Next are one list. `js/piano-book-nav.js` is that list. The introduction’s “where to go next” copies it.

- **Introduction** — how to sit, finger numbers, middle C, and the five-finger shape.
- **In C** — [Simple melodies](simple-melodies.html), [Major scale](major-scale.html), [How chords are built](building-chords.html), [Diatonic chords](chord-cheatsheet.html), [Chord changes](songs.html), [Melody and chords](melody-and-chords.html), [Independence](independence.html). Play the tune before the scale is named. Am shows up as a chord before it becomes a scale.
- **After C** — [Minor scale](minor-scale.html) beside the [Scales lab](scales-lab.html), then [Note values](note-values.html), [Time signatures](time-signatures.html), [Rhythm in the hands](rhythm-hands.html), [Sight reading](reading.html), [Highway Game](highway.html).
- **Other keys** — [Circle of fifths](circle-of-fifths.html) is the map out of C. [Other chord types](chord-types.html), [Bossa nova comping](bossa-comping.html) and [Every chord, every key](chord-dictionary.html) come after major, minor, and the seventh are familiar. Backing band stays a tool, under Tools.
- **Modes and other scales** — [Modes](modes.html) beside the [Modes lab](modes-lab.html), then [Beyond the major scale](beyond-scales.html) beside its [lab](beyond-scales-lab.html). Modes wait until the minor scale has been played.
- **Technique & practice** — [Drills](drills.html) → [Exercises](exercises.html) → [Hanon](hanon.html) → [Solo lab](solo-lab.html) → [Training routines](routines.html). The cluster stays together, after the path. Drills are linked from the five-finger start. Exercises are linked from the major scale and from Independence.

**Quest Mode** and **Resources** close the book. Each cluster page shows a strip of its siblings. Ear training lives on the [Tools](/sangeet-yatra/tools/ear-training.html) hub.

Open `index.html` locally, or serve the folder with any static host.

## Why this shape?

Forked from the structure of the [singing](https://github.com/Zither-Labs/singing) guide (landing → learning path → interactive practice → curated resources), then rewritten for **Western piano**: note names, major/minor, chords, and a **points-based Quest Mode** for learners who respond to challenges.

## Quest Mode progress

Quest Mode stores points and unlocks in `localStorage` (`piano-kids-quest-v1`) on that browser/device. Reset is on the Quest Mode page. Replays and hot streaks still add points so the high-score board keeps moving.

## Audio

`js/piano-core.js` plays the acoustic piano samples in `samples/piano/` (C2–C6). The first tap waits until those notes have decoded. Works offline after the files are on disk.

## Metronome (every page)

`js/metronome.js` self-injects a pinned bottom **metronome bar** on every page (load it after
`piano-core.js`). It has a typeable tempo (40–208 BPM, read as the quarter note), a volume slider,
and a Beats selector for simple, compound and odd/irregular meters with grouped accents; the beat
unit matters, so a `/8` meter ticks twice as fast as the same numerator in `/4`. Other scripts read
it via `PianoMetronome` (`bpm()`, `beats()`, `denom()`, `beatMs()`, `volume()`, `start()`, `stop()`),
which is how the scale/mode "Hear it" players stay in sync with the tempo.

## Real keyboard input

Introduction can react to a physical instrument:

- **MIDI keyboards** via the Web MIDI API (`PianoCore.enableMIDI()`) — exact and polyphonic;
  needs a secure context (https or localhost) and a browser that implements Web MIDI
  (Chrome/Edge on desktop). **Safari and iPadOS do not** — the connect UI hides the MIDI
  button and promotes the microphone (or on-screen keys). For USB MIDI on iPad, use the
  **Web MIDI Browser** app.
- **Acoustic pianos** via microphone pitch detection (`PianoCore.enableMic(opts)`) — monophonic
  (one note at a time). Noise handling: adaptive noise floor, clarity/confidence gate, band-limited
  pitch range, and median smoothing. The returned handle exposes `calibrate(cb, ms)`,
  `setSensitivity(0..1)`, and `getLevel()`; pass `opts.onLevel` for a live meter. Introduction
  wires these to a Calibrate button, Sensitivity slider, and level meter.
  Shared helpers: `PianoCore.supportsMIDI()`, `midiUnavailableHint()`, `adaptConnectUi()`.

Live input drives the scale, chord, and ear-quiz drills. Subscribe with
`PianoCore.onInput(fn)`; events look like `{ type:'on'|'off', midi, velocity, source:'midi'|'mic' }`.

## Free learning stack (external)

See [`resources.md`](resources.md): musictheory.net, Open Music Theory, IMSLP, PianoPath, and how they fit with this app.