Virtual Piano

A piano in your browser

This virtual piano gives you a playable keyboard of two octaves and a third — 29 keys from C to E — right in your browser. You can play it with a mouse, with one or more fingers on a touchscreen, or with your computer keyboard, where every key on screen is labelled with its shortcut. It is handy for checking a melody you have in your head, finding the starting note of a song, working out chords, practising simple pieces when you are away from a real instrument, or just having fun.

The octave buttons move the whole keyboard up or down by twelve semitones, so the range covers from C1 to E7 in total. The current range is shown between the buttons, and the C keys are labelled with their octave number (middle C is C4). A sustain toggle works like the right pedal of an acoustic piano, letting notes ring and overlap, and the volume slider sets the overall level.

How the sound is made

Nothing is downloaded or streamed: each note is synthesised on the fly with the Web Audio API. A triangle-wave oscillator provides the body of the tone and a quieter sine wave an octave above adds brightness. A gain envelope gives each note a quick attack followed by a gradual decay, similar to a struck string, and a compressor on the output keeps big chords from distorting. Because the sound engine is created only when you first press a key, the page stays light and complies with browser autoplay rules.

Playing with the computer keyboard

The layout mirrors a piano: the bottom row of letters (Z to M) is the lower octave's white keys and the row above it (S, D, G, H, J) supplies the black keys. The top letter row from Q to U is the next octave, with the number keys 2, 3, 5, 6 and 7 as sharps and flats, and I, 9, O, 0 and P reach the top of the keyboard. Keys are matched by their physical position, so the layout works the same on QWERTY, AZERTY and QWERTZ keyboards. Hold several keys together to play chords.