Home▸Sound & Music Lab▸Kick Piano Simulator (2D)

🧪 Kick Piano Simulator (2D)

A 2D canvas piano you play with the mouse, touch or the keyboard: real Web Audio synthesis with three voices, sustain, octave shift and a record/loop tool.

Sound & Music Lab2DEasy60 FPS📱 Mobile-adapted⇄ 3D version

This 2D companion drives the same equal-temperament frequency formula and Web Audio oscillator/envelope chain as the 3D original, but on a flat canvas keyboard instead of an orbiting scene: click, tap or type to trigger notes, switch between three timbres, hold sustain, shift octaves, and record a short phrase to play back through the same synthesis engine.

⚙ Under the hood

Canvas2D piano keyboard driven by real Web Audio synthesis: MIDI-based equal-temperament pitch, multi-oscillator voices with a lowpass filter and convolution reverb, plus a record/loop tool that replays captured note-on/note-off events.

piano simulatorweb audio synthesisequal temperamentadsr enveloperecord and loop

2D · HTML5 Canvas 2D + Web Audio API · 60 FPS target · runs fully client-side, no install

How does this simulator turn a key press into sound?

Each key maps to a semitone offset from the selected octave. The frequency is computed with the standard equal-temperament formula (440 × 2^((midi−69)/12)) and fed to a small bank of Web Audio oscillators shaped with an attack/decay envelope, a lowpass filter and a touch of convolution reverb.

What is the difference between the three voices?

Studio Grand, Midnight Felt and Neon Glass each change the oscillator waveform mix, filter cutoff and partial ratios feeding the synth, producing a warmer, softer or brighter timbre from the same frequency formula.

How does the record and loop feature work?

Record captures every key-down and key-up event with its timestamp relative to when recording started. Play loop replays that exact sequence of note-on and note-off events through the same synthesis engine.