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.

Styling SVG visualizers

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:

To demonstrate this, we need a slightly juiced up version of our NoteSequence:

Click below to apply the following style sheet: