VITON13 SCHOOL · Music
Online piano
A real keyboard in your browser: play with your fingers, the mouse or the computer keys, watch chords and scales light up, and learn eight simple songs key by key.
The sound switches on with your first key.
Just play. Switch on Record first if you want to hear it back.
Play with the mouse, your fingers or the computer keys: Z S X D C… for one octave, Q 2 W 3 E… for the next.
How to use it
- PlayClick or tap the keys with as many fingers as you like, or use the computer keyboard: the bottom row from Z, the top row from Q. Hold Space for the sustain pedal.
- Learn chords and scalesPick a root and a type: the keys light up with their note names, and you hear the chord, or the scale going up.
- Play a song, or recordChoose a melody and press “Follow the lit key”: it waits for the right key each time. “Play it for me” plays it first, and Record keeps what you play so you can hear it back.
About the sound and the songs
The sound is made in your browser by the Web Audio API, with no recordings: each note mixes its fundamental with several overtones on three oscillators tuned a few cents apart, starts in 5 milliseconds, fades faster at the top of the keyboard than at the bottom, and passes through a low-pass filter that darkens as the note dies away.
The songs are old melodies in the public domain, written in C so they fit the keys you see: traditional tunes from France and England, a 19th-century American nursery song, Beethoven’s Ode to Joy and Jingle Bells by James Lord Pierpont. A recording of your playing stays in this tab’s memory and is gone when you leave the page.
Questions
Which computer keys play the piano?
The bottom letter row plays one octave: Z, X, C, V, B, N, M are the white keys from C to B, and S, D, G, H, J the black keys between them. The top row plays the next octave: Q, W, E, R, T, Y, U for the white keys and 2, 3, 5, 6, 7 for the black ones, then I, O, P carry on. Keys are read by their position, so any keyboard layout works. Hold Space or Shift for the sustain pedal; the ← and → arrows move one octave.
Why is there no sound until I press a key?
Browsers let a page play sound only after you click, tap or press a key on it, so the piano switches its sound on with your first touch, and that first note already plays. If you still hear nothing, check the volume here and on the device; on an iPhone the ring/silent switch can also silence web pages.
How are chords built?
Count semitones up from the root, one key at a time, white or black. A major chord adds 4 and then 3 more (C–E–G), a minor chord 3 and then 4 (C–E♭–G). A seventh chord adds a fourth note 10 semitones above the root (C7, Cm7) or 11 (Cmaj7). Diminished is 3 + 3 (C–E♭–G♭), augmented 4 + 4 (C–E–G♯), and sus2 or sus4 put the 2nd or the 4th in place of the third.
How are scales built?
A scale is a pattern of steps. The major scale goes tone, tone, semitone, tone, tone, tone, semitone: from C it uses only white keys. The natural minor goes tone, semitone, tone, tone, semitone, tone, tone (A minor is all white keys), and the harmonic minor raises its 7th note by a semitone. The major pentatonic keeps five notes (C D E G A), and the blues scale adds the ♭5 to the minor pentatonic (C E♭ F G♭ G B♭).
Sources
Related guides
- Piano notes: how to find and name every key on the keyboardPiano notes repeat in a 12-key pattern: white keys C D E F G A B and five black keys. How to find C, middle C, sharps, flats and octave numbers.
- Piano chords: how they are built, with all 24 major and minor chordsPiano chords are built from intervals: major is 4 + 3 semitones, minor 3 + 4. All 24 major and minor chords, sevenths, inversions and progressions.
- Easy piano songs: 8 public-domain melodies with the notes written outEight easy piano songs with every note in letters, from Hot Cross Buns to Ode to Joy and Jingle Bells, in the order to learn them, all in C position.
More tools
Time and music