Virtual Piano Keyboard — Free HTML CSS JS Snippet

Most "piano" demos on the web are static images or, at best, buttons that toggle a colour with no actual sound. This snippet is a genuine playable instrument: seven white keys and five black keys spanning one octave (C4 through C5), each producing a real musical tone generated live in the browser via the Web Audio API — no audio files, no samples, no external libraries.

How the keyboard layout is built in pure CSS

A real piano's black keys don't sit between white keys edge to edge — they overlap, floating above the boundary between two adjacent white keys, and two of the seven white-key gaps (E-F and B-C) have no black key at all. This snippet reproduces that exactly. The white keys are a simple display: flex row where each .key.white takes an equal flex: 1 share of the container. The black keys live in a separate .black-keys layer with position: absolute; top: 0; height: 58%, and each individual black key is positioned with an explicit left percentage computed from the white-key grid: for seven equal keys each spanning 100/7 ≈ 14.29% of the width, a black key sitting on the boundary after white key index i is centred at (i+1) * 14.29% - halfBlackWidth. That arithmetic is baked into the five left values in the HTML (10.29%, 24.57%, 53.14%, 67.43%, 81.71%), which is why C#, D#, F#, G#, and A# land in exactly the right visual gaps and the E-F / B-C gaps stay open, matching a real keyboard.

How the sound is actually synthesized

Every key press calls noteOn(note, freq, keyEl), which lazily creates a single shared AudioContext (browsers require it to originate from a user gesture, so it's only instantiated on first interaction and resumed if suspended). For each note it builds an OscillatorNode set to type: 'triangle' — a triangle wave gives a softer, more piano-like timbre than the harsh default sine or buzzy square/sawtooth — tuned to the note's real equal-tempered frequency (C4 = 261.63 Hz, up through B4 = 493.88 Hz, using standard concert pitch where A4 = 440 Hz). The oscillator is routed through a dedicated GainNode that implements a simple attack/sustain envelope: gain.gain.linearRampToValueAtTime(0.32, now + 0.02) ramps volume up over 20 ms to avoid the sharp audible "click" a hard setValueAtTime jump would cause, then exponentialRampToValueAtTime(0.16, now + 0.35) eases into a sustain level so held notes don't stay at full volume indefinitely. Releasing the key (mouseup, touchend, or keyup) calls noteOff, which ramps gain down to near-zero over 400 ms with another linearRampToValueAtTime before calling osc.stop(), producing a natural decay instead of an abrupt cutoff.

Why this is genuinely educational

This snippet is a compact demonstration of three separate front-end skills at once: percentage-based absolute positioning to reconstruct a real-world physical layout in CSS, the Web Audio node graph (oscillator → gain → destination) as the standard pattern for programmatic sound synthesis, and dual input handling that keeps mouse, touch, and keyboard interactions perfectly in sync through a single shared active note-tracking object keyed by note name — which also elegantly solves the "don't retrigger a note that's already sounding" problem when a held keyboard key fires repeated keydown events.

Why it's fun to play with

Because every note is a real, correctly-tuned pitch rather than a placeholder beep, you can actually play recognisable melodies on it — and the pressed-key animation (a colour shift plus a 3px translateY "dip" with an inset shadow to simulate the key physically depressing) gives the same tactile feedback loop that makes real electronic keyboards satisfying to noodle on.