MIDI Piano Visualizer

Visualizes MIDI input in a piano layout using the Web MIDI API and SVG.js.

This is the same visualizer seen in tutorial videos on keropiano (my VGM covers channel).

Spacebar pauses/resumes scroll
Minus decreases scroll speed; plus or equals increases scroll speed
Q clears all displayed notes
R, followed by one key then another, will restrict the display between the two specified keys
- Pressing R again before pressing two keys will reset to the full piano range
- Higher-contrast lines are drawn at every octave counted from the lowest note in the defined range, even if that isn't C
- The size of the keyboard along the scrolling axis is inversely proportional to how many keys are in the range

If you want to capture this directly using a browser source in OBS, you will need to use OBS 21, because the Web MIDI API no longer functions in later versions.

You can pass the --portable command-line switch to the main OBS executable to keep OBS 21's settings separate from your main installation.

If you want to capture a Firefox or Chrome window directly instead, you should have no issue using this visualizer with the latest version.

First public release (built from code written several years ago)
I originally built this with vertical keyboard / horizontal scroll, akin to piano rolls you'd see in most DAWs, but viewers largely preferred the opposite orientation, so both are implemented