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
showOnlyOctavesUsed config parameter, in which case
only the octaves present in the NoteSequence will be used.
The DOM created by this element is:
In particular, the
div created 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 the
WaterfallSVGVisualizer constructor. 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:
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