Virtual Piano & Chord Lab — Play, Learn Chords & Scales

A virtual piano is a playable keyboard that runs entirely in the browser: every note is synthesised on the Web Audio API, so there is nothing to download and no plugin to install. It responds to touch, mouse and the computer keyboard, which makes it a usable practice surface when no real piano is at hand.

Directly below the keybed sits the Piano Lab practice desk. It adds dedicated surfaces for exploring chords and inversions, practicing scale degrees, looping harmonic progressions in tempo, and testing pitch recognition with a gentle find-the-note trainer—all lighting up on the exact same keys without leaving the page.

How to use it

1. Start the sound. Press Tap to start sound once. Browsers do not allow a page to make noise before you interact with it, so the piano stays silent until that press, and it tells you so rather than leaving you wondering why the keys are quiet.
2. Pick the size of the instrument. The Keys row switches between 25, 49, 61 and 88 keys. A 25-key instrument is C3 to C5; the 88-key instrument is A0 to C8, the same span as a full-size grand. On a phone the keyboard scrolls sideways inside its own frame — drag the bar under the keys, or use the ‹ › buttons, to reach the rest of the range.
3. Choose where the computer keyboard points. The − and + buttons move the two QWERTY rows by an octave. The keys the computer keyboard is currently mapped to are marked with a thin amber line along their top edge, so you can see the window move as you shift.
4. Play. Tap or click the keys, or use the computer keyboard. Where you press a key matters: near the top of the key the note is lighter, near the bottom it is heavier, which is how a real key behaves under the finger.
5. Hold notes with the pedal. Sustain latches the pedal on, so notes keep ringing after you let go. The space bar does the same thing while you hold it down. The voice counter next to the start button shows how many notes are sounding.
6. Turn on the note names. The Note names toggle prints the note under each key — useful while you are learning where the black keys sit, unnecessary once you know.

Chord lab: chords and inversions

The chord lab builds chords across 12 chromatic roots and 14 qualities, ranging from basic triads to extended seventh chords and suspensions. Selecting any root and quality calculates the exact voicing, spells out the note names, and lights the matching keys on the keybed. Brazilian cifra conventions are supported naturally alongside standard chord symbols, so a major seventh chord can be read as C7M as well as Cmaj7, and half-diminished chords appear as m7(♭5).

Inversions let you rearrange chord tones without changing the harmonic function. You can switch between root position, first inversion, second inversion, and third inversion for four-note chords. Each inversion immediately updates both the note readout and the keys lit on the keybed, making voice leading and tight keyboard hand positions easy to visualize.

Playback offers two listening modes: block chords and arpeggios. Block playback sounds all voices together so you can judge the harmonic density, while the arpeggio plays each tone in ascending sequence to isolate individual intervals. The highlight toggle keeps the chord tones lit on the keys while you play along with your mouse, touch, or computer keyboard.

Scale practice and degrees

The scale section covers 17 scale types across all 12 root keys, spanning major and natural minor, modal variants, pentatonics, the blues scale, whole tone, and the full chromatic spectrum. Traditional Japanese scales are fully integrated, including 平調子 (hirajoshi), 陰旋法 (insen), and 琉球音階 (ryukyu). Choosing a scale maps its complete interval structure across the entire keyboard.

Scale degrees are displayed directly under each note name, numbering tonic to octave so you can understand modal construction and interval steps. You can audition any scale with dedicated ascending and descending playback buttons. Hearing the scale played in both directions helps internalize how characteristic intervals sound when resolving upward or downward.

Visual indicators highlight scale tones across the keybed in a distinct tint, distinguishing the root note from other scale steps. This makes it straightforward to practice fingerings or locate safe melodic tones while improvising over a backing track. Because the synthesis runs locally in Web Audio, auditioning scales adds no downloaded samples and no extra network traffic.

Progression practice

The progression practice desk pairs harmonic theory with timekeeping, offering classic Western patterns alongside culturally distinct progressions. Standard presets include the four-chord pop loop (I–V–vi–IV), the 50s progression (I–vi–IV–V), Pachelbel’s Canon, the jazz ii7–V7–Imaj7, the Andalusian cadence, the 12-bar blues, and minor iiø7–V7–i cadences. Brazilian traditions are represented with Bossa Nova/MPB cadences (ii7–V7–I7M) and Gospel/Adoração add9 voicings.

Japanese harmonic presets provide direct practice for popular songwriting formulas, including 王道進行 (IV–V–iii–vi), 丸サ進行 (IVM7–III7–vi7–I7), and 小室進行 (vi–IV–V–I). Presets for the Japanese childcare qualification exam (保育士試験) are also included, covering practical I–IV–V and I–vi–IV–V cadence accompaniments. Each chord in the progression displays both its Roman numeral degree and the local chord symbol.

The progression player includes adjustable tempo from 50 to 160 BPM, an optional count-in measure, and an automatic looping mode. Each bar highlights the active chord tones on the keyboard as the progression advances, so you can practice timing transitions smoothly. Playback scheduling is locked to the Web Audio clock to guarantee steady, drift-free accompaniment.

Find-the-note trainer

The find-the-note trainer is a lightweight pitch identification exercise designed for deliberate note-reading and keyboard geography practice. Each session presents 10 rounds prompting you to locate a specific named pitch on the keyboard. You submit answers directly by clicking or tapping the target key on the keybed or pressing the corresponding mapped computer key.

Feedback is kept intentionally calm and low-friction, without countdown timers, loud buzzers, or punitive deductions. Correct answers trigger a gentle melodic confirmation and advance your current streak, while misses softly highlight the intended note so you learn the position before moving on. Real-time stats track your round count, score percentage, and best streak across attempts.

Because the trainer reuses the exact same 25-to-88 key layout as the free-play piano, keyboard familiarity transfers immediately to playing music. Scores and personal bests are saved locally in your browser session without requiring an account or profile. It serves as an unhurried warm-up before practicing scales or working through chord inversions.

Computer keyboard map

The piano listens to physical key positions rather than the letters printed on your keys, so the shape of the mapping survives a non-QWERTY layout. The names below are the US QWERTY names; the default window is C4 to B5, and − / + move it an octave at a time.

Lower octave	Note	Upper octave	Note
Z	C4	Q	C5
S	C♯4	2	C♯5
X	D4	W	D5
D	D♯4	3	D♯5
C	E4	E	E5
V	F4	R	F5
G	F♯4	5	F♯5
B	G4	T	G5
H	G♯4	6	G♯5
N	A4	Y	A5
J	A♯4	7	A♯5
M	B4	U	B5

Key	Action
Z S X D C V G B H N J M	Lower octave of the window
Q 2 W 3 E R 5 T 6 Y 7 U	Upper octave of the window
− (minus)	Move the computer keyboard down one octave
= (equals)	Move the computer keyboard up one octave
Space	Hold the sustain pedal while the space bar is down
Arrow left / right	With a key focused, move focus one semitone along the keybed
Arrow up / down	With a key focused, move focus a whole octave
Enter, or Space on a focused key	Play the focused key

Practising without a real piano

An on-screen keyboard is not a piano, but it is a fair tool for several kinds of practice that do not depend on touch weight or pedalling.

• Interval and chord shapes. Play a shape slowly and name the intervals between the notes as you go. Because the keys are labelled and the mapping is fixed, you can build the same shape in every key by moving the octave window instead of re-learning the position.
• Note naming. Turn on Note names for the first pass, then turn them off and name each key before you play it. This is the same drill a real keyboard gives you, only without the pressure of making a sound in front of anyone.
• Melodic dictation with the metronome. Open the metronome in another tab, set a slow tempo, and play a four-note phrase, then repeat it exactly. Playing in time is a separate skill from playing the right notes, and this is the cheapest way to notice that you are rushing.
• Transposition by ear. Set a phrase in C, then move the octave window and play it again in a different register. Nothing about the mapping changes, so any confusion is about the pitches rather than the layout.
• Sight-reading the mapping, not the page. The letter caps on the keys turn the QWERTY rows into a named keyboard. Reading a melody as scale degrees and finding them by letter is a genuine hand-to-ear exercise.
• Sustained listening. Hold a few notes with the pedal down and listen to the decay above the fundamental. Recognising how a note changes as it fades is the start of hearing voicing rather than just pitch.

Note naming basics

The site numbers octaves so that MIDI note 60 is C4, which is scientific pitch notation: C4 is middle C, and each octave runs C, C♯, D, D♯, E, F, F♯, G, G♯, A, A♯, B. Going up an octave doubles the frequency, so A3 is 220 Hz and A4 is 440 Hz. The synthesised notes follow equal temperament with A4 = 440 Hz, which is the common concert-pitch standard; this piano does not offer a different reference pitch.

Sharps and flats are two names for the same key: C♯ and D♭ are the same black key. Which name is correct depends on the key you are in, so a piece in D major would call it C♯ while the same sound in a piece in B♭ minor is usually written D♭. The synthesised note does not change.

On-screen keyboard versus a hardware controller

• What a browser keyboard does well. It is always there, it needs no power supply or cable, it works on a phone, it costs nothing, and it can be resized from 25 to 88 keys in one click. The labelled keys and note names make it a good teaching surface for beginners.
• What it cannot do. There is no key weight, no escapement and no aftertouch, so you cannot practise dynamics as a physical skill. There is no MIDI output, so it will not drive a notation program or a DAW. The keys are narrower than real keys, especially on a phone, so wide intervals and stretches are misleading.
• Where they overlap. Both give you a chromatic keyboard with a sustain control, and both are useful for slow, deliberate practice of intervals, chords and note naming. If you already own a MIDI keyboard, use it — the browser keyboard is the substitute, not the other way round.

A note on the sustain control

The sustain toggle holds notes without changing the timbre, so it is a hold pedal rather than a damper model: on a real instrument, releasing the pedal also releases the strings, and the open strings of the rest of the instrument ring in sympathy with what you play. Sympathetic resonance is one of the things this synthesis does not reproduce, so sustained notes sound thinner here than on an instrument.

Headphones

Headphones are worth using while you practise on a synthesised keyboard, for two reasons and both are practical rather than medical. First, the quiet end of what is playable is easy to lose over a room’s background noise, and headphones let you hear the tail of a decay without turning the level up. Second, if you are working through note naming or a phrase on a laptop speaker, the low notes are the first thing a small speaker loses, so what you hear is not what the synthesis is doing.

Keep the level comfortable: if a repeat-by-repeat practice session ends with your ears feeling full, the level was too high. A pleasant playing level is normally lower than the level that sounds impressive for the first ten seconds.

Accuracy and limits

• The timbre is synthesis, not a recording. There is no sampled grand piano anywhere in this tool, and no per-note variation between one C4 and the next. Two presses of the same key produce the same voice, which no real instrument does.
• Nothing is modelled physically. A struck string has inharmonic partials, a soundboard, a hammer, a damper and a case. This voice keeps a fixed partial stack and a short detuned unison to suggest a struck string; it does not simulate the parts.
• The sixteen-voice cap is a hard limit. When it is reached, the oldest voice is stolen. A long sustained passage with the pedal down therefore ends up with the newest sixteen notes ringing and the earliest ones gone.
• Velocity from a touch position is an approximation. Pressing near the bottom of a key sounds louder than pressing near the top, which mirrors the leverage of a real key, but it is measuring where your finger landed, not how much force you used. Device pressure sensing is deliberately not used, because it is not reported consistently enough to map onto dynamics.
• The reference is fixed at A4 = 440 Hz, so the piano cannot be tuned to an ensemble that uses a different standard. Use the tuning generator if you need another reference.
• The octave shift is bounded. The two QWERTY rows cover two octaves, and the window is clamped inside both the instrument’s MIDI range and the range you selected, so a mapped key always sounds a real note and the window can never move somewhere empty.

Safety

• Start with the volume low and raise it. The volume slider starts at 80%; the first chord on headphones at full volume is a genuinely unpleasant surprise.
• Take the pedal off between attempts. With sustain on and a chord held, the level builds up as the voices overlap, which is the easiest way to end up louder than you intended.
• Do not use the piano at a level that masks what is around you. You share rooms and roads; a keyboard is not worth missing a doorbell, an alarm or traffic.