# Sight Reading (`reading.html`)

A dedicated, progressive note-reading trainer: read one note on the staff and name it.
Start on the **treble clef**, add the **bass clef**, then mix both on the **grand staff**.

Interactive page: [`reading.html`](reading.html). Twin of this document.

## How it works

- Pick a **lesson** — each one narrows the notes to a small, learnable set.
- A single note is drawn on an SVG staff (with the correct clef and any ledger lines).
- Name it by tapping a **letter button** (C–B), or **play it** on a connected keyboard/mic
  (see *Answer by playing*). Octave doesn't matter — the **letter** is the skill.
- Correct answers play the note and advance automatically; misses reveal the answer.
- **Hear it** plays the note, **Show name** reveals it (no score), **Skip** moves on.
- Tracks **score**, current **streak**, and **best streak** per session.
- **Progression is quantitative:** each lesson unlocks the next once you get **23 of your last 25
  correct (90%)**. A progress bar (with a 90% marker) shows how close you are; locked lessons show
  🔒 and finished ones show ✓. Your unlocked progress is saved in the browser
  (`localStorage`, key `piano-reading-progress-v1`); a **Reset progress** button clears it.

## Clef reference

- **Treble clef (𝄞)** — right hand / higher notes.
  - Lines (bottom→top): **E G B D F** — “Every Good Boy Does Fine”.
  - Spaces (bottom→top): **F A C E** — spells “FACE”.
  - Middle C is one ledger line **below** the staff.
- **Bass clef (𝄢)** — left hand / lower notes.
  - Lines (bottom→top): **G B D F A** — “Good Boys Do Fine Always”.
  - Spaces (bottom→top): **A C E G** — “All Cows Eat Grass”.
  - Middle C is one ledger line **above** the staff.

## Dynamics & tempo (reading the Italian)

Sheet music also uses Italian words for **how loud** and **how fast** — including the same *piano*
(soft) and *forte* (loud) that named the instrument.

- **Volume:** `pp` pianissimo (very soft) · `p` piano (soft) · `mp` mezzo-piano · `mf` mezzo-forte ·
  `f` forte (loud) · `ff` fortissimo (very loud). `<` crescendo = get louder; `>` diminuendo = softer.
- **Tempo** (slow → fast): Largo (40–60) · Adagio (66–76) · Andante (76–108, a "walking" pace) ·
  Moderato (108–120) · Allegro (120–168) · Presto (168–200) BPM.
- **Articulation:** *legato* (smooth, connected) vs *staccato* (short, detached). Use the pinned
  metronome to feel each tempo.

## Lessons (progressive)

| # | Lesson | Notes |
|---|--------|-------|
| 1 | Treble · first five (C–G) | Middle C up to G |
| 2 | Treble · lines (E G B D F) | the five treble lines |
| 3 | Treble · spaces (F A C E) | the four treble spaces |
| 4 | Treble · full staff (E4–F5) | all lines + spaces |
| 5 | Treble · + Middle C & ledgers | adds ledgers below/above |
| 6 | Bass · first five (C down to F) | Middle C stepping down |
| 7 | Bass · lines (G B D F A) | the five bass lines |
| 8 | Bass · spaces (A C E G) | the four bass spaces |
| 9 | Bass · full staff (G2–A3) | all lines + spaces |
| 10 | Grand staff · mixed clefs | random treble or bass |

Work through them in order — each unlocks the next at **90% over your last 25 answers** (23/25).

Currently the drills use **natural notes only** (no sharps/flats) — a deliberate starting point.
Rhythm lives on [Time signatures](time-signatures.md) and [Note values](note-values.md). Accidentals, key signatures, and multi-note phrases are natural next steps.

## Answer by playing (optional)

Connect a **MIDI keyboard** (Chrome/Edge on a computer) or **microphone** (works on iPad too) and
answer by playing the note you read — closer to real sight-reading. Matching is by pitch-class
letter, so any octave counts. Safari/iPad hide the MIDI button when Web MIDI is unavailable.

## Hanon — read the sheet music (all 60 exercises)

Hanon's *The Virtuoso Pianist* (1873, public domain) is **60 finger exercises** in three parts. The
patterns are simple and repetitive, which makes them ideal **sight-reading fuel**: the eyes learn
stepwise motion, both clefs at once, and the finger patterns that recur in real music. Read a beat
*ahead* of your hands, keep your eyes on the page, and start slow — Hanon marks the metronome at
**60**, rising toward 108 only once every note is clean.

**Read *and hear* Part I** one exercise at a time — transcribed to notation with a play cursor and
keyboard — on the dedicated [Hanon Part I](hanon.md) page (under Technique & practice). This page keeps the
full engraved **score for all 60**, for reading.

- **All three parts are embedded** as the full engraved grand-staff score, with a **Part I / II / III
  selector** — scroll through and read right on the page. Bundled at `assets/hanon/hanon-part1.pdf`,
  `hanon-part2.pdf`, and `hanon-part3.pdf`. Part I: independence & strength · Part II: scales,
  arpeggios & broken chords · Part III: running octaves, repeated notes, trills & tremolos.
- **Hear / other keys:** Part I links (1–20) open each exercise's notation and a play-along recording
  on hanon-online.com; Part II and Part III index pages are one click away.
- **Downloads:** the three bundled PDFs, an alternate Part I engraving from the
  [Mutopia Project](https://www.mutopiaproject.org/) (CC BY-SA 4.0,
  `assets/hanon/hanon-part1-mutopia.pdf`), plus
  [IMSLP](https://imslp.org/wiki/The_Virtuoso_Pianist_(Hanon%2C_Charles-Louis)) and
  [hanon-online.com](https://www.hanon-online.com/) (all keys, with audio).

The music itself is public domain (Hanon, 1873); the alternate Part I engraving is CC BY-SA 4.0.

## Notes

- Rendered with inline SVG (staff lines, clef glyph, ledger lines, notehead) — no images or
  external fonts required. Clef glyphs use the Unicode Musical Symbols block.
- Audio and live input come from `js/piano-core.js` (`playMidi`, `enableMIDI`, `enableMic`,
  `onInput`).