Visualizers

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:

• Currently playing notes can be matched using the .active class.
• Notes can also be matched based on properties like instrument or pitch (using attribute selectors), thanks to the data attributes data-instrument, data-program, data-is-drum and data-pitch.
• A --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: Load

Click below to apply the following style sheet: Apply