Tono y ritmo incrustados en las imágenes SVG

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:

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.

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.

View the Markdown source for this page to view the JavaScript code for the example.