• Public
  • Public/Protected
  • All

Class StaffSVGVisualizer

Displays a NoteSecuence as a staff on a given SVG. Staff is scaled to fit vertically config.noteHeight and note horizontal position can behave in two different ways: If config.pixelsPerTimeStep is greater than zero, horizontal position will be proportional to its starting time, allowing to pile several instances for different voices (parts). Otherwise, resulting staff will display notes in a compact form, using minimum horizontal space between musical symbols as regular paper staff does.

Clef, key and time signature will be displayed at the leftmost side and the rest of the staff will scroll under this initial signature area accordingly. In case of proportional note positioning, given it starts at pixel zero, the signature area will blink meanwhile it collides with initial active notes. Key and time signature changes will be shown accordingly through score.

New configuration features have been introduced through StaffSVGVisualizerConfig over basic VisualizerConfig.

When connected to a player, the visualizer can also highlight the notes being currently played.

You can find more info at:







Protected config

Protected height

height: number


noteSequence: INoteSequence

Protected parentElement

parentElement: HTMLElement

Protected width

width: number


Protected clear

  • clear(): void


  • clearActiveNotes(): 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 noteSequence in a staff if no activeNote is given, highlighting on and off the appropriate notes otherwise. Should the noteSequence had changed adding more notes at the end, calling this method again would complete the redrawing from the very last note it was drawn, maintaining the active note and the scroll position as they were. This is handy for incremental compositions. Given the complexity of adaption to a modified score, modifyied notes previously drawn will be ignored (you can always clear() and redraw() for a full redraw). Please have in mind mm.Player does not have this incremental capability so, once the player had started, it will go on ignoring the changes.


    • Optional activeNote: INote

      (Optional) If specified, this Note will be painted in the active color and there won't be an actual redrawing, but a re-colouring of the involved note heads, accidentals, dots and ties (activated and de-activated ones). Otherwise, all musical symbols which were not processed yet will be drawn to complete the score.

    • Optional scrollIntoView: boolean

      (Optional) If specified and the active note to be highlighted is not visualized in the container DIV, the latter will be scrolled so that the note is viewed in the right place. This can be altered by AdvancedVisualizerConfig.scrollType.

    Returns number

    The x position of the highlighted active note relative to the beginning of the DIV, or -1 if there wasn't any given active note. Useful for automatically advancing the visualization if needed.

Protected scrollIntoViewIfNeeded

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

Protected updateMinMaxPitches

  • updateMinMaxPitches(noExtraPadding?: boolean): void

Generated using TypeDoc