Humdrum Notation Plugin |
A javascript plugin for displaying music notation with Humdrum data |
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).
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>
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.
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>