Virtual piano — play online
A two-octave piano you can play with a mouse, a touchscreen, or your computer keyboard. Every note is synthesized with correct equal-temperament pitch, several notes can sound at once, and nothing you play here is uploaded anywhere.
How it works
Each key press builds a small Web Audio graph: an OscillatorNode is created at the exact frequency for that note, feeds into its own GainNode which handles that note's attack and release, and that gain node feeds a shared master gain node connected to your device's audio output. Every currently sounding note has its own oscillator and gain pair, summed together at the master gain — that is what makes chords possible rather than one note cutting another off.
Equal temperament — the pitch math
Every key's frequency comes from the standard 12-tone equal-tempered scale, using A4 = 440 Hz (MIDI note 69) as the one fixed reference point. Every other note is a power of the twelfth root of two away from it:
where n is the note's MIDI number. Middle C is MIDI note 60, twelve semitones below A4, so its frequency comes out to 440 × 2^(-9/12) ≈ 261.63 Hz. An octave is exactly a factor of two — MIDI note 81 (A5) is 440 × 2^(12/12) = 880 Hz, precisely double A4.
Why nothing clicks when a note starts or stops
Jumping a gain value straight from silence to full volume — or the reverse — almost always produces an audible click, because the waveform gets cut off mid-cycle instead of crossing zero. Every note here ramps its own gain up over about eight milliseconds on note-on and back down over roughly fifty milliseconds on note-off, instead of stepping it instantly. Oscillators are also one-shot nodes in the Web Audio API — once stopped, one can never be restarted — so a fresh oscillator is created for every note-on and discarded once its release ramp finishes.
Why the first note has to come from a real gesture
Browsers deliberately restrict audio from starting on its own, so a page cannot autoplay sound the moment it loads. The audio engine here is created — and resumed, if the browser had suspended it — inside the very first note's own event handler, whether that event is a mouse click, a touch, or a keydown, which is exactly the kind of user gesture that policy requires. Building it any earlier would risk the audio engine staying silently suspended.
Computer-keyboard mapping
Every mapped key shows its own letter on the matching on-screen key, but the full layout is also listed here for reference:
| Row | Keys | Plays |
|---|---|---|
| Home row (white keys) | A S D F G H J K L ; | C, D, E, F, G, A, B, C, D, E |
| Upper row (black keys) | W E T Y U O P | C♯, D♯, F♯, G♯, A♯, C♯, D♯ |
There is deliberately no black key between E and F, or between B and C, on either row — a real piano octave has none there either, which is why 17 keys cover a bit more than a full octave instead of exactly 12. Shift the octave up or down and the same physical keys play a full octave higher or lower.
Use cases & honest limitations
Where this is genuinely useful
- Quick practice without an instrument at hand. Working out a fingering, a scale, or a short passage away from a real piano — on a laptop between other tasks, for instance.
- Checking a melody by ear. Play back a phrase you half-remember and compare it against what you meant, one note at a time.
- Basic ear training. Play an interval or a short sequence and try to name it before checking the on-screen labels, or use it as a reference pitch source for interval-recognition practice.
- Teaching pitch and octaves. Seeing the white/black key pattern repeat every octave, and hearing a note double in frequency exactly one octave up, makes the equal-temperament math above tangible.
What this tool cannot do
- It is not a real piano timbre. A single oscillator waveform has none of a real piano string's rich harmonic content, hammer attack, or the way tone changes with velocity — see the FAQ below for more on this.
- It has no velocity sensitivity. Every note plays at the same fixed loudness regardless of how a key is clicked or pressed; only the volume slider changes overall level.
- Timing depends on your device. Web Audio scheduling is generally precise, but the true round-trip latency from a key press to sound leaving the speaker varies with your device, browser and audio hardware, and can matter for tightly timed playing.
- The computer-keyboard mapping covers a bit over an octave at a time, not the full two-octave range shown on screen — the remaining keys are playable by mouse or touch only, at any given octave setting.
- No recording, saving, or MIDI export. Nothing you play is stored anywhere, on this device or any server; refreshing the page starts fresh.
Frequently asked questions
Why doesn't a key make any sound?
Check your system and browser volume first, and the volume slider inside the tool itself. Browsers also require a real click, tap or keypress before they will start audio at all — this page creates its audio engine on the very first note you play, which satisfies that requirement, so a note that was somehow triggered without a real gesture would legitimately stay silent. This also needs JavaScript and the Web Audio API; a very old or locked-down browser may not expose either.
How does the computer-keyboard mapping work?
The home row — A S D F G H J K L and semicolon — plays the white keys shown on screen, left to right. The row above — W E T Y U O P — fills in the black keys between them, skipping the two spots a real piano octave has no black key (between E and F, and between B and C). Every mapped key shows its letter directly on the on-screen key it plays.
What does the octave button change?
It shifts the entire two-octave keyboard, and the computer-key mapping with it, up or down by a full octave, up to two octaves in either direction. The readout above the keys shows the current range, for example C4–B5. Shifting stops any notes currently sounding, since the same physical key would otherwise suddenly mean a different pitch mid-note.
What does the sustain toggle do?
With sustain off, a note stops ringing as soon as you release the key, mouse button or touch, the same as a piano with no pedal pressed. With sustain on, releasing a note leaves it ringing until you either turn sustain back off (which fades out every note that was released while it was on) or the polyphony limit forces the oldest note to stop — approximating a held sustain pedal rather than modelling its exact acoustic behaviour.
Can I play more than one note at a time?
Yes. Each note you play gets its own oscillator and its own gain envelope, so chords and multi-finger playing on the computer keyboard work as genuine polyphony rather than one note cutting another off. A generous but finite cap on simultaneous notes protects the browser tab from ever accumulating unbounded oscillators; if you somehow exceed it, the oldest note is stopped to make room.
Does this sound like a real piano?
No, and this page does not claim otherwise. Every note is a single Web Audio oscillator wave (sine, triangle, sawtooth or square), which is tonally simple compared to a real piano string's rich, evolving harmonic content and hammer attack. It is accurate on pitch and timing, useful for checking a melody or getting an interval by ear, but it will not fool anyone into thinking it is a recorded or sampled piano.
Is anything I play recorded or sent anywhere?
No. Every note is synthesized locally by your browser's Web Audio API and sent straight to your device's audio output — there is no server call, no upload, and no account. Which keys you press exist only in this page's memory and disappear when you leave it.
Why did a note keep ringing after I switched tabs or apps?
A note held down with the computer keyboard is released automatically the moment the browser window loses focus, precisely so that a lost key-up event (from alt-tabbing away, or an OS dialog stealing focus) can never leave a note stuck on indefinitely. A note held with the mouse or a touch is left alone, since the pointer itself is usually still physically held in that case.