Simple use of the verovio javascript toolkit to display EsAC data as graphical notation on a stand-alone webpage with a tiny bit of javascript.

The following music notation is generated from the EsAC data below.












Notice the use of !!!filter: autobeam to beam eighth notes together.



View the source code
for this page to view the javascript used to create the notation.  The main
difference from Humdrum data display is that the input format
is set to "esac".



Analytic phrase markers



In this example the starting note of a phrase is highlighted in green and the ending
note is highlighted in blue.  This is done with the following CSS code:



.phraseStart { fill: green; }
.phraseStart [stroke] { stroke: green; }

.phraseStop { color: blue; }
.phraseStop [stroke] { stroke: blue; }

.phraseStart.phraseStop { color: orange; }
.phraseStart.phraseStop [stroke] { stroke: orange; }




Phrases are implicitly encoded in EsAC data by linebreaks.  The first note
on a line is the start of the phrase, and the last note on a line is the
end of the phrase.  These notes are labeled in the SVG with the classes
phraseStart and phraseStop respectively.