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 mm.PianoRollSVGVisualizer,
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 PianoRollSVGVisualizermm.PianoRollSVGVisualizer,
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:
.active class.data-instrument, data-program,
data-is-drum and data-pitch.--midi-velocity custom property is defined on every note and can be
accessed using the
var() CSS function.
To demonstrate this, we need a slightly juiced up version of our NoteSequence:
Click below to apply the following style sheet: