mm.StaffSVGVisualizer extends the basic mm.BaseVisualizer class with new capabilities
to draw music notes in one single staff per instance, which can be configured though
extended interface mm.StaffSVGVisualizerConfig. Those new capabilities include:
Automatic Clef detection will be done according to the average note, being it
F clef if it is under middle C and G clef in any other case. Once the clef has been
set, it will remain unchanged, no matter how the score will evolve.
Displaying the score in a compact visualization way, just like paper printed
scores, which is the default behaviour and can be forced by setting
config.pixelsPerTimeStep to zero. Otherwise proportional visualization mode
will be used like in mm.PianoRollSVGVisualizer, where notes are separated according
with their duration from pixel 0 at leftmost side. In order to get staff context
information, proportional visualization makes music signatures blink sometimes to
show hidden musical symbols. You will notice in proportional visualization bar lines
are pretty close to first bar note, because there is where bar begins. In this mode
you should increase the config.pixelsPerTimeStep properly to avoid note overlapping
in very fast scores (16th notes or faster), though you can always enjoy automatic
padding space on notes and bars in compact visualization mode.
Default Key declaration to adapt the score to the right accidentals in case
key is not stated for time 0 on the NoteSequence (otherwise, NoteSequence initial
value will overwrite it).
Instrument Filtering to draw a subset of the NoteSequence tracks in one single
score. No filter will draw all tracks altogether in one score.
Follow scoreplaying with two added auto-scroll modes, besides default pagination
(ScrollType.PAGE or void), like centering active note on the middle of the
score in a note by note basis (ScrollType.NOTE) or centering it in bar sized
packed chunks (ScrollType.BAR) every time activeNote is the first one of a
bar.
Multiple key signature and time signature are supported (but notice
mm.urlToNoteSequence does not translate them from MIDI files yet).
Mixing it all
In next example you can relize several combined features. Two tracks of a single score have
been filtered in two staffs (left and right hand) which automatically adapt to the appropriate
clef according to their note range. Switching Compact visualization mode makes same score be
drawn on different mm.StaffSVGVisualizer instances, from compact mode (like a printed staff),
to proportional mode (placing note heads in x axis similarly to piano-roll rectangles, ideal
for multiple piled up visualizers). Musical symbols have been scaled up according with the
defined 'noteHeight' config value. Visualization mode can be changed during playing, but
given there will be a new instance you can experience a fast rewind before scrolling to the
next active note. Finally G Key has been forced as default key assuming provided score doesn't
handle any key information.
Compact visualization mode:Tempo:
Multiple Key and Time signatures
Next example adds more notes to the score (+) changing through all keys and the time signatures
subset [2/4, 3/4, 4/4] to see how the staff grows and adapts to it. Please notice mm.Player
does not handle incremental NoteSequence modifications once it has started to play.
Compact visualization mode:Tempo:
Piling several visualizers
Next example loads a MIDI file and will split it in as many staffs as as tracks (instruments)
it contains. Following, it will add a mm.PianoRollSVGVisualizer that will show a synchronized
version of full score. Please remember you are doing it all in a browser, have mercy and do
not load a full orchestra symphony.
Compact visualization mode:Tempo:
Musical symbol catalog and managed use cases
Next score shows all musical symbols (but F clef, previously shown). In a
G clef score, C key and 4/4 time signature, anacrusis starting, all notes
(all F) and rests from whole to sixty-fourth are shown in first four bars
with gradually lowering intensity (MIDI velocity). Following use cases are:
a splitted note between two bars (thirty-second tied to sixty-fourth), rest
completion by a sequence of lowering rests (half to sisty-fourth),
polyphonic overlapping notes splitted and tied, bar splitted rests,
accidentals repetition avoiding (F#), accidental re-activation (normal F),
accidental re-activation (F#), accidental reset after bar (F#), accidental
reset avoiding on tied notes after bar, accidental reset following tied
notes after bar and, finally, dotted note. Time changes have been shown in
previous scores.
Known issues are: No note beams are shown (flagged notes are used instead), and no triplets nor
quintuplets are managed yet.