Piano Note Visualizer — Learn Piano with MIDI Keyboard Animation

Upload a piano piece (*.mid / *.midi)

No file loaded. Try the .

Hand mode

Transport

Speed 1.0×

Left/Right seed: C4 (60)

Audio

Finger hints

Note names

Single color (both blue)

Play Piano (click keys)

Fingering mode

00:00 00:00

Key height 600px

Full width

Spotlight active keys

Piano Note Visualizer is a simple, browser-based tool that turns any MIDI file into a clear, animated piano tutorial. Load a piece and watch the full 88-key keyboard light up in real time.

How it works

Upload a MIDI file of a piano piece (.mid / .midi).
Hand mode: Left, Right, or Both.
Press Play. Keys light up as they are played. Left hand = green, Right hand = blue.
Use Key height to make keys longer; try Full width or Fullscreen for maximum size.
Toggle Finger hints and Note names; Spotlight dims inactive keys.
Fingering mode: Heuristic or Optimized for smoother transitions.
Scrub the timeline by dragging or clicking the time bar.
Play Piano mode lets you click/touch keys to play live, without affecting playback.

Need sample MIDI files? Visit our FREE MIDI Library, or purchase our PREMIUM MIDI Library.

🎹 Piano Note Visualizer

Left hand (finger numbers)

Right hand (finger numbers)

How it works