Click staff to place · Click note to cycle duration · Space to play/stop
🎵 Current clef
Treble Clef — Middle C on first ledger line below
About Staff Sketch
Why this project?
Music notation has always been one of the great "gatekeeper" skills in music education. Most interactive music tools assume you already know how to read a staff. Staff Sketch flips that model: it makes the musical staff itself the primary interface, turning abstract notation into a hands-on creative playground.
What is it?
Staff Sketch is an interactive music staff where you click to place notes, set their durations, and play back your melodies in real time. It supports treble, bass, and alto clefs, five note durations from whole through sixteenth, sharps and flats, and multi-measure compositions with up to 16 measures.
How does it work?
The staff is rendered as HTML and CSS positioned elements — no canvas needed. Each measure is a clickable grid with snap-to positions for every valid note.
Note placement uses a coordinate system where each staff line and space is a discrete Y-position. Clef changes shift the mapping of Y-position to MIDI pitch.
Audio playback uses the Web Audio API with triangle oscillators, ADSR envelope shaping, and a tempo-based scheduling system that fires notes at precise intervals.
Note rendering includes proper stem direction (up below staff center, down above), flags for short durations, and ledger lines for notes outside the staff range.
How to use it
Place a note: Click anywhere on the staff. The note snaps to the nearest line or space.
Set duration: Select a duration button before placing, or click an existing note to cycle its duration.
Add accidentals: Click the sharp or flat button, then click on the staff. Click natural to reset.
Play: Press the Play button or hit Space to hear your melody. Notes light up as they play.
Change clef: Use the Clef dropdown to switch between Treble, Bass, and Alto.
Adjust tempo: Use the plus/minus buttons (40 to 240 BPM).
More measures: Add or remove measures to compose longer pieces.