• Public
  • Public/Protected
  • All

Class WaterfallSVGVisualizer

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:






Protected config

Protected drawn

drawn: boolean

Protected height

height: number


noteSequence: INoteSequence

Protected parentElement

parentElement: HTMLElement

Protected svg

svg: SVGSVGElement

Protected svgPiano

svgPiano: SVGSVGElement

Protected width

width: number


Protected clear

  • clear(): void


  • clearActiveNotes(): void

Protected draw

  • draw(): void

Protected fillActiveRect

  • fillActiveRect(el: Element, note: INote): void

Protected getNoteEndTime

  • getNoteEndTime(note: INote): number

Protected getNotePosition

  • getNotePosition(note: INote, noteIndex: number): { h: number; w: number; x: number; y: number }

Protected getNoteStartTime

  • getNoteStartTime(note: INote): number

Protected getSize

  • getSize(): { height: number; width: number }

Protected isPaintingActiveNote

  • isPaintingActiveNote(note: INote, playedNote: INote): boolean


  • redraw(activeNote?: INote, scrollIntoView?: boolean): number
  • Redraws the entire note sequence if it hasn't been drawn before, optionally painting a note as active


    • Optional activeNote: INote

      (Optional) If specified, this Note will be painted in the active color.

    • Optional scrollIntoView: boolean

      (Optional) If specified and the note being painted is offscreen, the parent container will be scrolled so that the note is in view.

    Returns number

    The x position of the painted active note. Useful for automatically advancing the visualization if the note was painted outside of the screen.

Protected scrollIntoViewIfNeeded

  • scrollIntoViewIfNeeded(scrollIntoView: boolean, activeNotePosition: number): void

Protected unfillActiveRect

  • unfillActiveRect(svg: SVGSVGElement): void

Protected updateMinMaxPitches

  • updateMinMaxPitches(noExtraPadding?: boolean): void

Generated using TypeDoc