MIDI Piano Visualizer
SynopsisVisualizes 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
OBS Usage notes
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.
Version 1.0 (July 17, 2023)
- 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