Virtual Piano in Chrome with OffiDocs

DESCRIPTION

Practice playing the piano on your browser

Click the purple SYN icon — and a sleek 440 × 300 pixel popup appears, ready to play. There is no account to create, no sample libraries to preload, and no latency-inducing round-trips to a cloud server. Because the engine relies solely on the Web Audio API running in your machine’s renderer process, notes trigger with sub-10 millisecond latency on mainstream hardware. That means you can sketch a melody during a meeting break, teach chord voicings in a classroom, or test sound-design ideas the moment inspiration strikes.

At the heart of the extension sit oscillator 1 and oscillator 2, each independently switchable between sine, square, and sawtooth waveforms. A Mix knob cross-fades them, letting you morph from mellow sine pads to rich detuned saw leads. A dedicated low-pass filter dials in warmth, while a four-stage ADSR envelope sculpts attack, decay, sustain, and release. These are the same building blocks found in classic analog gear, yet here they run directly in JavaScript.

Playing the “piano”
Action How to do it

Mouse play
Click any key on the canvas; hold to sustain, release to stop. Multiple clicks = chords.

Computer-keyboard play
The top letter row is mapped like a real piano:
A W S E D F T G Y H U J → C C♯ D D♯ E F F♯ G G♯ A A♯ B.
(The exact mapping shows in the tooltip when you hover a key.)

Octave shift Press Z (-1 octave) or X (+1 octave) to move the keyboard range.

Glide between notes
Drag the mouse across keys—envelopes retrigger smoothly so you can sweep pitches.

Stop all sound
Click the blank area below the keyboard or hit Esc.

Whether you are a touring producer needing a scratch-pad, a computer-science teacher explaining Fourier components, or a casual gamer who just wants to doodle chord progressions between matches, you can try using this extension today

Virtual Piano web extension integrated with the OffiDocs Chromium online