There are several MIDI or
NoteSequence visualizers available.
You can connect it to an
mm.Player to update the visualization
in sync with the audio.
Load a melody in any of these formats:
Note: This has the same visual output as
but using a canvas instead of an svg. This visualizers also redraws the entire
sequence on every time step. For longer sequences, canvases become really expensive and
big, and might crash the renderer.
We recommend using the
if performance is a concern.
SVG visualizers (piano roll and waterfall) support CSS! Use a selector like
svg rect.note to match notes, and style them using the
available CSS properties. More advanced styling is possible:
--midi-velocitycustom property is defined on every note and can be accessed using the
To demonstrate this, we need a slightly juiced up version of our
Click below to apply the following style sheet: