Home▸Physics & Mechanics▸Piano Note Visualizer (2D)

Piano Note Visualizer (2D)

Interactive 2D piano note visualizer: watch a looping melody play itself across a flat keyboard while glowing note bars rise off each key, with a live frequency and harmonics readout.

Physics & Mechanics2DEasy60 FPS📱 Mobile-adapted⇄ 3D version
2d-3d-piano-note-visualizer ↗ Open standalone

This 2D visualizer plays a short looping melody on its own across a flat piano keyboard drawn from above: each note press animates the corresponding key and launches a glowing bar that rises and fades, colored by pitch class. Unlike a playable virtual keyboard, nothing here responds to your clicks or keystrokes — it is a pure visualization of a pre-recorded tune, letting you watch tempo, rise speed and key-press depth reshape the same fixed sequence of notes. A live readout tracks the last note played, its frequency in Hz, how many bars are currently rising, and how far the loop has progressed.

⚙ Under the hood

Watch a looping melody play itself across a flat piano keyboard while glowing note bars rise off each key, with a live frequency and loop-progress readout.

pianomusicsoundfrequency2d

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

What did you find?

Add reproduction steps (optional)