humdrum-notation-plugin

A javascript plugin for displaying music notation on a webpage using Humdrum data

Coloring with RDF marks

RDF markers can be used to color notes in a score. In the following example, the line

!!!RDF**kern: @ = marked note

Defined the user-signifier in **kern data to mean a marked note. These marked notes will automatically be rendered in red when converting into notation.

<script>displayHumdrum({source: "rdf1", scale:50})</script>
<script type="text/x-humdrum" id="rdf1">
**kern
*M4/4
=1
4c
4d
4e@
4g
=2
8fL@
8aJ@
4g
4a@
4b@
=3
1c
==
*-
!!!RDF**kern: @ = marked note
</script>

The color of the mark can be changed by adding a color parameter to the RDF line:

<script>displayHumdrum({source: "rdf2", scale:50})</script>
<script type="text/x-humdrum" id="rdf2">
**kern
*M4/4
=1
4c
4d
4e@
4g
=2
8fL@
8aJ@
4g
4a@
4b@
=3
1c
==
*-
!!!RDF**kern: @ = marked note, color=chartreuse
</script>

And multiple colors can be used on different notes by defining multiple markers:

<script>displayHumdrum({source: "rdf3", scale:50})</script>
<script type="text/x-humdrum" id="rdf3">
**kern
*M4/4
=1
4cN
4dZ
4eN
4g@
=2
8fL@
8aJj
4gj
4a@
4bZ
=3
1ci
==
*-
!!!RDF**kern: @ = marked note
!!!RDF**kern: i = marked note, color=goldenrod
!!!RDF**kern: j = marked note, color=#ffaadd
!!!RDF**kern: N = marked note, color=rgba(100,255,50,0.2)
!!!RDF**kern: Z = marked note, color=chartreuse
</script>

Note that any CSS/SVG color can be used, either a named color or a numeric one. However, make sure to avoid spaces in the color name (such as the rgba color in the above example).

Color interpretations

Notes can be colored within a spine by using a *color tandem interpretation. All notes in a spine after a color interpretation will be colored until a new color is given (or the color “black” is used to stop coloring the notes).

<script>displayHumdrum({source: "interpretation", scale:50})</script>
<script type="text/x-humdrum" id="interpretation">
**kern
*M4/4
=1
4c
*color:hotpink
4d
4e
*color:crimson
4g
=2
*color:darkorchid
8fL
8aJ
*color:#3e8d1b
4g
4a
*color:rgba(0,0,0,0.2)
4b
=3
1ci
==
*-
</script>

Coloring by **color spine

A **color spine can be added to a score to display to color all notes starting at the current line until another color is given (using “black” is equivalent to turning off the color). You can scroll in this example to see the changes in color at measures 7, 12, 16, and 24. Green means G major, red is D major, and yellow is C major.

<script>displayHumdrum({source: "chopin-color", scale:22})</script>
<script type="text/x-humdrum" id="chopin-color">
!!!COM: Chopin, Frederic
!!!CDT: 1810///-1849///
!!!OTL: Prelude in G Major, Op. 28, No. 3
!!!OPS: Op. 28
!!!ONM: No. 3
!!!OMD: Vivace
**kern	**kern	**color
*clefF4	*clefG2	*
*k[f#]	*k[f#]	*
*G:	*G:	*
*met(c|)	*met(c|)	*
*M4/4	*M4/4	*
16GGL	1r	chartreuse
16D	.	.
16G	.	.
16AJ	.	.
16BL	.	.
16A	.	.
16G	.	.
16eJ	.	.
16dL	.	.
16c	.	.
16B	.	.
16AJ	.	.
16GL	.	.
16A	.	.
16B	.	.
16DJ	.	.
=2	=2	=2
16GGL	1r	.
16D	.	.
16G	.	.
16AJ	.	.
16BL	.	.
16A	.	.
16G	.	.
16eJ	.	.
16dL	.	.
16c	.	.
16B	.	.
16AJ	.	.
16GL	.	.
16A	.	.
16B	.	.
16DJ	.	.
=3	=3	=3
16GGL	4.d	.
16D	.	.
16G	.	.
16AJ	.	.
16BL	.	.
16A	.	.
16G	8r	.
16eJ	.	.
16dL	4.g 4.b	.
16c	.	.
16B	.	.
16AJ	.	.
16GL	.	.
16A	.	.
16B	16r	.
16DJ	16cc 16ee	.
=4	=4	=4
16GGL	2.b 2.dd	.
16D	.	.
16G	.	.
16AJ	.	.
16BL	.	.
16A	.	.
16G	.	.
16eJ	.	.
16dL	.	.
16c	.	.
16B	.	.
16AJ	.	.
16GL	8r	.
16A	.	.
16B	16r	.
16DJ	16ee 16ccc	.
=5	=5	=5
16GGL	1dd 1bb	.
16D	.	.
16G	.	.
16AJ	.	.
16BL	.	.
16A	.	.
16G	.	.
16eJ	.	.
16dL	.	.
16c	.	.
16B	.	.
16AJ	.	.
16GL	.	.
16A	.	.
16B	.	.
16DJ	.	.
=6	=6	=6
16GGL	2b 2gg	.
16D	.	.
16G	.	.
16AJ	.	.
16BL	.	.
16A	.	.
16G	.	.
16eJ	.	.
16dL	2r	.
16c	.	.
16B	.	.
16AJ	.	.
16GL	.	.
16A	.	.
16B	.	.
16DJ	.	.
=7	=7	=7
*	*^	*
16AAL	1g 1a 1cc#	2...ff#	firebrick
16E	.	.	.
16A	.	.	.
16BJ	.	.	.
16c#L	.	.	.
16B	.	.	.
16A	.	.	.
16f#J	.	.	.
16eL	.	.	.
16d	.	.	.
16c#	.	.	.
16BJ	.	.	.
16AL	.	.	.
16B	.	.	.
16c#	.	.	.
16EJ	.	16ee	.
=8	=8	=8	=8
16DDL	4f#: 4dd:	2aa:	.
16AA	.	.	.
16D	.	.	.
16EJ	.	.	.
16F#L	4r	.	.
16E	.	.	.
16D	.	.	.
16BJ	.	.	.
16AL	2r	2ryy	.
16G	.	.	.
16F#	.	.	.
16EJ	.	.	.
16DL	.	.	.
16E	.	.	.
16F#	.	.	.
16BBJ	.	.	.
=9	=9	=9	=9
16AAL	1g 1a 1cc#	2...ff#	.
16E	.	.	.
16A	.	.	.
16BJ	.	.	.
16c#L	.	.	.
16B	.	.	.
16A	.	.	.
16f#J	.	.	.
16eL	.	.	.
16d	.	.	.
16c#	.	.	.
16BJ	.	.	.
16AL	.	.	.
16B	.	.	.
16c#	.	.	.
16EJ	.	16ee	.
=10	=10	=10	=10
16DDL	4f#: 4ccn:	2aa:	.
16AA	.	.	.
16D	.	.	.
16EJ	.	.	.
16F#L	4r	.	.
16E	.	.	.
16D	.	.	.
16BJ	.	.	.
*	*v	*v	*
16AL	2r	.
16G	.	.
16F#	.	.
16EJ	.	.
16DL	.	.
16E	.	.
16F#	.	.
16AAJ	.	.
=11	=11	=11
16DDL	4r	.
16AA	.	.
16D	.	.
16EJ	.	.
16F#L	8rL	.
16E	.	.
16D	16	.
16BJ	16aa 16ccc	.
16AL	4.cc 4.ee	.
16G	.	.
16F#	.	.
16EJ	.	.
16DL	.	.
16E	.	.
16F#	16r	.
16AAJ	16cc 16dd	.
=12	=12	=12
16GGL	4.d	chartreuse
16D	.	.
16G	.	.
16AJ	.	.
16BL	.	.
16A	.	.
16G	8r	.
16eJ	.	.
16dL	4.g 4.b	.
16c	.	.
16B	.	.
16AJ	.	.
16GL	.	.
16A	.	.
16B	16r	.
16DJ	16cc 16ee	.
=13	=13	=13
16GGL	2.b 2.dd	.
16D	.	.
16G	.	.
16AJ	.	.
16BL	.	.
16A	.	.
16G	.	.
16eJ	.	.
16dL	.	.
16c	.	.
16B	.	.
16AJ	.	.
16GL	8r	.
16A	.	.
16B	16r	.
16DJ	16ee 16ccc	.
=14	=14	=14
16GGL	1dd 1bb	.
16D	.	.
16G	.	.
16AJ	.	.
16BL	.	.
16A	.	.
16G	.	.
16eJ	.	.
16dL	.	.
16c	.	.
16B	.	.
16AJ	.	.
16GL	.	.
16A	.	.
16B	.	.
16DJ	.	.
=15	=15	=15
16GGL	2b 2gg	.
16D	.	.
16G	.	.
16AJ	.	.
16BL	.	.
16A	.	.
16G	.	.
16eJ	.	.
16dL	2r	.
16c	.	.
16B	.	.
16AJ	.	.
16GL	.	.
16A	.	.
16B	.	.
16DJ	.	.
=16	=16	=16
*	*^	*
16GGL	1b	2ffn	gold
16D	.	.	.
16G	.	.	.
16AJ	.	.	.
16BL	.	.	.
16A	.	.	.
16G	.	.	.
16eJ	.	.	.
16dL	.	4..ff	.
16c	.	.	.
16B	.	.	.
16AJ	.	.	.
16GL	.	.	.
16A	.	.	.
16B	.	.	.
16DJ	.	16ff	.
=17	=17	=17	=17
16GGL	1b	4..ffn	.
16D	.	.	.
16G	.	.	.
16AJ	.	.	.
16BL	.	.	.
16A	.	.	.
16G	.	.	.
.	.	16ffqL	.
.	.	16ggq	.
16eJ	.	16ffJ	.
16dL	.	4..ee	.
16c	.	.	.
16B	.	.	.
16AJ	.	.	.
16GL	.	.	.
16A	.	.	.
16B	.	.	.
16GGJ	.	16dd#	.
=18	=18	=18	=18
16CCL	[1e: [1g:	[1cc: [1ee:	.
16GG	.	.	.
16C	.	.	.
16DJ	.	.	.
16EL	.	.	.
16D	.	.	.
16C	.	.	.
16AJ	.	.	.
16GL	.	.	.
16Fn	.	.	.
16E	.	.	.
16DJ	.	.	.
16CL	.	.	.
16D	.	.	.
16E	.	.	.
16GGJ	.	.	.
=19	=19	=19	=19
16CCL	1e] 1g]	1cc] 1ee]	.
16GG	.	.	.
16C	.	.	.
16DJ	.	.	.
16EL	.	.	.
16D	.	.	.
16C	.	.	.
16AJ	.	.	.
16GL	.	.	.
16Fn	.	.	.
16E	.	.	.
16DJ	.	.	.
16CL	.	.	.
16D	.	.	.
16E	.	.	.
16GGJ	.	.	.
=20	=20	=20	=20
16CCL	1e 1g	2cc	.
16GG	.	.	.
16C	.	.	.
16DJ	.	.	.
16EL	.	.	.
16D	.	.	.
16C	.	.	.
16AJ	.	.	.
16GL	.	4..cc	.
16Fn	.	.	.
16E	.	.	.
16DJ	.	.	.
16CL	.	.	.
16D	.	.	.
16E	.	.	.
16GGJ	.	16cc	.
=21	=21	=21	=21
16CCL	1e 1g	2...cc	.
16GG	.	.	.
16C	.	.	.
16DJ	.	.	.
16EL	.	.	.
16D	.	.	.
16C	.	.	.
16AJ	.	.	.
16GL	.	.	.
16Fn	.	.	.
16E	.	.	.
16DJ	.	.	.
16CL	.	.	.
16D	.	.	.
16E	.	.	.
16GGJ	.	16b	.
=22	=22	=22	=22
16CCL	[1e [1g	1b	.
16GG	.	.	.
16C	.	.	.
16DJ	.	.	.
16EL	.	.	.
16D	.	.	.
16C	.	.	.
16AJ	.	.	.
16GL	.	.	.
16Fn	.	.	.
16E	.	.	.
16DJ	.	.	.
16CL	.	.	.
16D	.	.	.
16E	.	.	.
16GGJ	.	.	.
=23	=23	=23	=23
16CCL	1e] 1g]	2...a	.
16GG	.	.	.
16C	.	.	.
16DJ	.	.	.
16EL	.	.	.
16D	.	.	.
16C	.	.	.
16AJ	.	.	.
16GL	.	.	.
16Fn	.	.	.
16E	.	.	.
16DJ	.	.	.
16CL	.	.	.
16D	.	.	.
16E	.	.	.
16GGJ	.	16b	.
=24	=24	=24	=24
16DDL	4A:	1d: 1g:	chartreuse
16AA	.	.	.
16D	.	.	.
16EJ	.	.	.
16F#L	4r	.	.
16E	.	.	.
16D	.	.	.
16BJ	.	.	.
16AL	2r	.	.
16G	.	.	.
16F#	.	.	.
16EJ	.	.	.
16DL	.	.	.
16E	.	.	.
16F#	.	.	.
16AAJ	.	.	.
=25	=25	=25	=25
16DDL	1c 1d	2...f#	.
16AA	.	.	.
16D	.	.	.
16EJ	.	.	.
16F#L	.	.	.
16E	.	.	.
16D	.	.	.
16BJ	.	.	.
16AL	.	.	.
16G	.	.	.
16F#	.	.	.
16EJ	.	.	.
16DL	.	.	.
16E	.	.	.
16F#	.	.	.
16AAJ	.	16g	.
=26	=26	=26	=26
16GGL	1B 1d	1g	.
16D	.	.	.
16G	.	.	.
16AJ	.	.	.
16BL	.	.	.
16A	.	.	.
16G	.	.	.
16eJ	.	.	.
16dL	.	.	.
16c	.	.	.
16B	.	.	.
16AJ	.	.	.
16GL	.	.	.
16A	.	.	.
16B	.	.	.
16DJ	.	.	.
*	*v	*v	*
=27	=27	=27
16GGL	1r	.
16D	.	.
16G	.	.
16AJ	.	.
16BL	.	.
16A	.	.
16G	.	.
16eJ	.	.
16dL	.	.
16c	.	.
16B	.	.
16AJ	.	.
16GL	.	.
16A	.	.
16B	.	.
16DJ	.	.
=28	=28	=28
16GGL	16BL	.
16D	16d	.
16G	16g	.
16AJ	16aJ	.
16BL	16bL	.
16A	16a	.
16G	16g	.
16eJ	16eeJ	.
16dL	16ddL	.
16c	16cc	.
16B	16b	.
16AJ	16aJ	.
16GL	16gL	.
16A	16a	.
16B	16b	.
16DJ	16dJ	.
=29	=29	=29
16GGL	16BL	.
16D	16d	.
16G	16g	.
16AJ	16aJ	.
16BL	16bL	.
16A	16a	.
16G	16g	.
16eJ	16eeJ	.
16dL	16ddL	.
16c	16cc	.
16B	16b	.
16AJ	16aJ	.
16GL	16gL	.
16A	16a	.
16B	16b	.
16DJ	16dJ	.
=30	=30	=30
16GGL	16BL	.
16D	16d	.
16G	16g	.
16AJ	16aJ	.
16BL	16gL	.
16A	16a	.
16G	16b	.
16eJ	16dJ	.
16GGL	16BL	.
16D	16d	.
16G	16g	.
16AJ	16aJ	.
16GL	16gL	.
16A	16a	.
16B	16b	.
16DJ	16dJ	.
=31	=31	=31
16GGL	16BL	.
16D	16d	.
16G	16g	.
16AJ	16aJ	.
16GL	16gL	.
16A	16a	.
16B	16b	.
16dJ	16ddJ	.
*clefG2	*	*
16gL	16ggL	.
16a	16aa	.
16b	16bb	.
16ddJ	16dddJ	.
16ggL	16gggL	.
16aa	16aaa	.
16bb	16bbb	.
16dddJ	16ddddJ	.
=32	=32	=32
4bb	4bbb	.
4r	4r	.
*clefF4	*	*
2GG: 2D: 2G:	2B: 2d: 2g: 2b:	.
=33	=33	=33
1GG: 1D: 1G:	1B: 1d: 1g: 1b:	.
==	==	==
*-	*-	*-
</script>

If there is a color spine anywhere to the right of of a kern spine, it will be used to color the notes found in that kern spine. If you want to color notes in different kern spines independently, place a color spine to the right of each kern spine. This can also be done to only color a single spine’s notes.

Coloring by msearch filter

The msearch filter is a basic music searching tool that can be used to highlight notes. The following example shows two separate searches. The first search for the pitch sequence “C D E G” uses the default color of red, and uses @ as an RDF marker behind-the-scenes. The second search uses a different marker (N) and a different color to search for the melodic sequence “A G A B”.

<script>displayHumdrum({source: "msearch", scale:50})</script>
<script type="text/x-humdrum" id="msearch">
**kern
*M4/4
=1
4c
4d
4e
4g
=2
8fL
8aJ
4g
4a
4b
=3
1c
==
*-
!!!filter: msearch -q cdeg
!!!filter: msearch -q agab -c chartreuse -m N
</script>