Pitch and rhythm information can be embedded in SVG images generated
from Humdrum data with verovio. To embed this information, add the
option humType: 1 to the verovio options. These extra parameters
are stored in the class parameter of g elements that enclose
graphical elements for each note. This information can be used to
style notes with CSS, align audio/MIDI with the image, or do basic
pitch/rhythm analyses directly from the SVG image as demonstrated
further below on this page.
Conversion from Humdrum data into MEI data inserts a type attribute
storing pitch and rhythm for notes. A Humdrum note such as:
8G#
is converted into this MEI note element:
<note xml:id="note-L6F3S1" type="qon-12 qoff-25_2 pname-g acc-s oct-3 b40c-26 b12c-7" dur="8" oct="3" pname="g" accid="s" />
The type attribute contains several separate embedded parameters for passing through to the final SVG image:
- qon-12 (quarter-note on-time)
- The starting time of the note in units of quarter notes since the start of the music.
- qoff-25_2 (quarter-note off-time)
- The ending time of the note. This is a rational value, representing “25/2” or 12.5 in floating point.
- pname-g
- The diatonic pitch name (a, b, c, d, e, f, or g).
- acc-s
- The chromatic alteration (n=natural, s=sharp, f=flat, ff=double flat, ss=double sharp).
- oct-3
- Fourth octave (middle-C octave)
- b40c-26 (base-40 pitch class)
- This is the base-40 representation of the pitch class G#.
- b40c-12 (base-12 pitch class)
- This is the base-12 representation of the pitch class G#/A-flat.
Subtracting the on-time from the off-time yields the duration of the note: 25/2 – 12 = 1/2 of a quarter note, or an eighth note.
Here is the graphical rendering of the above MEI element in and SVG conversion of the score:
<g class="note qon-12 qoff-25_2 pname-g acc-s oct-3 b40c-26 b12c-7" id="note-L6F3S1">
<use xlink:href="#E0A4" x="2049" y="2615" height="720px" width="720px" />
<g class="accid" id="accid-L6F3S1">
<use xlink:href="#E262" x="1824" y="2615" height="720px" width="720px" />
</g>
</g>
The MEI attribute
type="qon-12 qoff-25_2 pname-g acc-s oct-3 b40c-26 b12c-7"
has been transformed into the SVG attribute
class="qon-12 qoff-25_2 pname-g acc-s oct-3 b40c-26 b12c-7",
preserving basic pitch and rhythm information about the note within the image.
Coloring notes by pitch-class
Here is an example of using CSS to color pitches in an SVG image:
!!!OTL: Mister Frog's Wedding
!!!filter: autobeam
**kern
*clefG2
*k[]
*M2/4
{8g
=1
8cc
8cc
8cc
8ee
=2
8dd
8cc
8a}
{(8g
=3
4.cc)
(8g
=4
4.cc)}
{8cc
=5
8ee
8gg
8.gg
16gg
=6
8aa
8gg
4ee}
=7
{8gg
16ee
16ee
16dd
16dd
8cc
=8
16ee
16ee
8cc
8a}
{(8g
=9
4.cc)
(8g
=10
4.cc)}
==
*-
|
|
Here is the styling added to the page in order to color the pitches:
<style>
.note.pname-c { fill: green; }
.note.pname-d { fill: blue; }
.note.pname-e { fill: firebrick; }
.note.pname-f { fill: gold; }
.note.pname-g { fill: darkturquoise; }
.note.pname-a { fill: purple; }
.note.pname-b { fill: orange; }
</style>
Coloring stems, beams, and ties
The following example demonstrates a more complicated setup for coloring all aspects of the notation. Pitch classes control the coloring of noteheads, stems, tied and beams, with the beams being given a color gradient according to the pitch classes of the first and last note in the beam.
**kern *M4/4 *clefG2 *k[f#] 8dL 8gJ =1 2e 8r 8d 8gL 8aJ =2 2.g 8bL 8ddJ =3 [2ee 8ee]L 8ddJ 8bL 8aJ =4 2.b 8gL 8gJ =5 [2b 8b]L 8gJ 8aL 8gJ =6 [2d 8d]L 8dJ 8eL 8dJ =7 8gL 8dJ 8gL 8bJ 4.a 8g =8 16cLL 16d 16e 16f#JJ 2g == *- |
|
View the Markdown source for this page to view the CSS and JavaScript code for the example.
Key analysis directly from SVG images
The following example generates a pitch-class histogram table directly from the displayed SVG image. As you mouse-over notes in the image or rows in the table, all similar pitch-classes will be highlighted in the notation. The pitch histogram is also analyzed to calculate an estimated musical key for the music, which is displayed above the pitch-class table. Columns in the table can be sorted by clicking on the little arrows to the right of the column headings.
Try editing the Humdrum data in the box below (or paste in new data). The notation should update as you change it, and the table of pitch-class counts/durations further below should update as well.
**kern *clefF4 *k[b-e-a-] *M3/4 =1- (8GL 8E-) (8BBn 8CJ) 4AA- =2 (8cL 8A-) (8En 8FJ) 4BBn =3 (8dL 8A-) (8En 8FJ) (8GGL 8GJ) =4 (8FL 8E-) (8BBn 8CJ) 4CC =5 (8CL 8E- 8A-) (8G 8d-X 8cJ) =6 (8DL 8F 8B-) (8A- 8c 8B-J) =7 (8A-L 8G) (8D 8E-) (8BB- 8DJ) =8 2.EE- =9:|!|: (8B-L 8G) (8D 8E-J) 4DD-X =10 (8B-L 8G) (8En 8FJ) 4GG =11 (8d-XL 8B-) (8En 8FJ) 8CCL 8cJ =12 (8B-L 8A-) (8En 8FJ) 4FF =13 (8EE-L 8C 8F) (8E- 8B- 8AnJ) =14 (8DDL 8D 8G) (8F 8c 8BnJ) =15 (8cL 8A-) (8F#X 8G) 8BBn 8CJ =16 (8GGL 8D) (8G 8F#X) 8c 8BnJ =17 (8e-L 8c) (8F#X 8GJ) 8AAnL 8e-J =18 (8dL 8A-X) (8En 8FJ) 8BBnL 8GJ =19 (8FL 8E- 8BBn 8CJ) (8GGL 8BnJ) =20 (8CCL 8GG 8F 8E-J 4c) =:|! *- |
|
View the Markdown source for this page to view the JavaScript code for the example.