WaterfallSVGVisualizer constructor.
The NoteSequence to be visualized.
The parent element that will contain the visualization.
(optional) Visualization configuration options.
Redraws the entire note sequence if it hasn't been drawn before, optionally painting a note as active
(Optional) If specified, this Note will be painted
in the active color.
(Optional) If specified and the note being painted is offscreen, the parent container will be scrolled so that the note is in view.
The x position of the painted active note. Useful for automatically advancing the visualization if the note was painted outside of the screen.
Generated using TypeDoc
Displays a waterfall pianoroll as an SVG, on top of a piano keyboard. When connected to a player, the visualizer can also highlight the notes being currently played, by letting them "fall down" onto the piano keys that match them. By default, a keyboard with 88 keys will be drawn, but this can be overriden with the
showOnlyOctavesUsedconfig parameter, in which case only the octaves present in the NoteSequence will be used.The DOM created by this element is:
In particular, the
divcreated needs to make some default styling decisions (such as its height, to hide the overlow, and how much it should be initially overflown), that we don't recommend you override since it has a high chance of breaking how the visualizer works. If you want to style the waterfall area, style the element that you pass in theWaterfallSVGVisualizerconstructor. For example, if you want to resize the height (by default it is 200px), you can do:If you want to style the piano keyboard, you can style the rects themselves: