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.