$ABC_UI


$ABC_UI is a tool to render abc score directly in html page. It handles:

For example, handling voices for harmonic study (independent voices selection):

Q:1/4=160 %%piano2+2CD K:C [V:C] "C"x | "E7/B"x | "Am"x | "C7/G"x | "F"x | "G7"x | "C"x |] [V:D] "I"x | "V7/VI"x | "VI"x | "V7/IV"x | "IV"x | "V7"x | "I"x |] [V:S] !blue!c | !blue!!b>(!d | !b>)!!n>(!c | !n>)!!n>(!c | !n>)!c | !red!!r>(!B | !r>)!!blue!c |] [V:A] !n>(!E | !n>)!!n>(!E | !n>)!!n>(!E | !n>)!!green!!g>(!E | !g>)!!blue!!n>(!F | !n>)!!orange!!o>(!F | !o>)!E |] [V:T] !n>(!G, | !n>)!!green!!g>(!^G, | !g>)!!blue!A, | !blue!!b>(!_B, | !b>)!A, | !blue!!n>(!G, | !n>)!G, |] [V:B] !blue!C, | B,, | !blue!A,, | G,, | !blue!F,, | !blue!G,, | !blue!C, |]

Bolero rhythm (customized tempo):

%%tempo { 60, *70, 80, 90 } M:4/4 L:1/8 K:C clef=perc %%map drum ^d print=B % Clave %%stafflines 1 V:1 %%MIDI program 128 %%voicemap drum %%pos stem up [V:1] ^d(3^d/^d/^d/ ^d(3^d/^d/^d/ ^d^d | ^d(3^d/^d/^d/ ^d(3^d/^d/^d/ (3^d/^d/^d/(3!beambr1!^d/^d/^d/ :|

Samples of real score

Samples

$ABC_UI validation tests

Websites using $ABC_UI

$ABC_UI how to?

Usefull links:

How to use $ABC_UI?

To use $ABC_UI javascript library in html page, you have to:

<head>
  <link rel="stylesheet" href="http://dev.music.free.fr/css/music.min.css" />
  <script src="http://dev.music.free.fr/js/abc-ui-1.0.0.min.js"></script>
</head>
<div class="abc-source">
   % add abc text here
</div>
<script>
  $ABC_UI.init();
</script>

Using $ABC_UI with minimal code

Piano with fingering

%%player_no_voice L:1/8 Q:1/4=72 M:4/4 %%score { (1 2) | 3 } V:1 clef=treble V:2 clef=treble V:3 clef=bass [V:1] z !1!G/!2!c/ !4!e/G/c/e/ z G/c/ e/G/c/e/ | z !1!A/!3!d/ !5!f/A/d/f/ z A/d/ f/A/d/f/ | [V:2] z/!1!E3/2-E2 z/E3/2-E2 | z/!2!D3/2-D2 z/D3/2-D2 | [V:3] !3!C4 C4 | !3!C4 C4 |

Piano with string

L:1/4 M:6/8 K:E %%player_no_voice %%score {1|2} (3 4) V:1 clef=treble %%MIDI program 0 % piano V:2 clef=treble %%MIDI program 0 % piano V:3 clef=treble %%MIDI program 40 % string V:4 clef=treble %%MIDI program 40 % string [V:1] c3/2-c f/ | f3/2-f/ e/ f/ | a3/2-a c'/ | b3/2-b/ f/ g/ | [V:2] z/C/ F/ [FA]3/2 | z/C/ =F/ [FA]3/2 | z/C/ E/ [EA]3/2 | z/B,/ F/ [FB]3/2 | [V:3] c3 | -c3 | -c3 | -c3 | [V:4] F3 | =F3 | E3 | D3 |

Afoxé percussion patterns

X:1 M:4/4 L:1/4 K:C clef=perc %%player_no_voice %%player_right %%map HT G print=d % Agogo bell %%map LT _A print=G % Agogo bell %%map TD _G print=B % Tumba drum %%score {(H L) | T} %%stafflines .|.| % V:H name="Agogo" %%MIDI program 128 %%voicemap HT %%pos stem down % V:L name="bell" %%MIDI program 128 %%voicemap LT %%pos stem up % V:T name="Tumba\ndrum" %%MIDI program 128 %%stafflines 1 %%voicemap TD %%pos stem down % [V:H] x x/ G/x/ G/ G | x x G G :| [V:L] _A/_A/ z/ x/z/ x/ x | _A _A x x :| [V:T] z2 _G _G | z2 _G _G :|

Chorus notation

%%chorus+name [V:S] c/d//c// | c/ B/ | c |] [V:A] E | D/ -D//E///F/// | E |] [V:T] G, | -G, | G, |] [V:B] C, | G,,/ G,,/ | C, |]

Transposable Chorinho

Select major tonality:

L:1/4 K:C M:4/4 %%player_top %%player_no_voice %%pianoC [V:C] "C"x4 | "Dm"x4 | "G7"x4 | "C"x4 :|] [V:KG] z/[CEG]/ z/[CEG]/ z/[CEG]/ z/[CEG]/ | z/[DF]/ z/[DF]/ z/[DF]/ z/[DF]/ | z/[DFG]/ z/[DFG]/ z/[DFG]/ z/[DFG]/ | z/[CEG]/ z/[CEG]/ z/[CEG]/ z/[CEG]/ :|] [V:KF] C, z G,, z | D, z A,, z | G, z D, z | C, z G,, z :|]
%%player_no_voice %%player_bottom T:Prélude n°20 T:en do mineur C:Frédéric Chopin L:1/4 Q: "Allegro" 1/4=40 M:4/4 K:Cm %%score { (1 2) | 3 } V:1 clef=treble V:2 clef=treble V:3 clef=bass [V:1] x x [EG]/>[DF]/ x | x x [CE]/>[B,_D]/ x | [V:2] !ff![G,CEG] [A,CEA] [G,=B,] [E,G,CE] | [E,A,CE] [F,A,_DF] [_D,E,G,] [C,E,A,C] | [V:3] [C,,C,] [F,,,F,,] [G,,,G,,] [C,,G,,C,] | [A,,,A,,] [_D,,,_D,,] [E,,,E,,] [A,,,A,,] | % [V:1] x x [G]/>[F]/ x | x x [=B]/>[=A]/ x || [V:2] [=D,F,=B,=D] [=E,G,_B,C=E] [A,C] [G,C_E] | [^F,CD] [G,=B,DG] [CD^F] [=B,D,G] || [V:3] [G,,,G,,] [C,,,C,,] [F,,,F,,] [C,,C,] | [D,,=A,,D,] [G,,,G,,] [D,,,D,,] [G,,,G,,] || % [V:1] |: x x [A]/>[^F]/ x | x x [DG=B]/>[C=A]/ x | [V:2] |: !pp![EGe] [E_Ae] [Dd] [DGd] | [CGc] [CD^Fd] x [=B,DG] | [V:3] |: [C,,C,] [C,C] [=B,,=B,] [_B,,_B,] | [=A,,=A,] [_A,,_A,] [G,,G,] [F,,F,] | % [V:1] x x G/>F/ x | x x E/>=D/ x :| x4 |] [V:2] [CGc] [A,CA] [G,D] [G,CE] | [E,A,CE] [F,A,_DF] [F,G,=B,] [E,G,C] :| !fermata!!diminuendo(!!diminuendo)![CEGc]4 |] [V:3] [E,,E,] [F,,F,] [=B,,,=B,,] [C,,C,] | [A,,,A,,] [_D,,,_D,,] [G,,,G,,] [C,,,C,,] :| !invertedfermata![C,G,]4 |]
%%player_no_voice %%player_top T:Part of The Entertainer C:Scott Joplin L:1/16 Q:1/4=72 M:2/4 K:F %%score { (1 2) | (3 4) } V:1 clef=treble V:2 clef=treble V:3 clef=bass V:4 clef=bass [V:1] |: x8 | [fbd']8 | x8 | [V:2] |: [fa]^g[fa]2 -[fa]2[fac']2 | z2 BA Bcd2 | [df]e[df]2 -[df]2[dfa]2 | [V:3] |: F,,2[A,CF]2 C,2[A,CF]2 | B,,2[B,DF]2 F,2[B,DF]2 | D,,2[A,DF]2 A,,2[A,DF]2 | [V:4] |: x8 | x8 | x8 | % [V:1] [dgb]4 -[dgb]3g | x8 | x8 | [V:2] z2 G^F GAB2 | d2gd -dgd2 | c4 f4 | [V:3] G,,2[B,D]2 D,2[B,D]2 | [B,,B,]2[B,D]2 [G,,G,]2[^G,,^G,]2 | [A,,A,]2[A,CF]2 D,2[A,DF]2 | [V:4] x8 | x8 | x8 | % [V:1] x8 | x8 | x8 | [V:2] e^g=be' -e'd'=bc' | a4 _b4 | [fa]^g[fa]2 -[fa]2[fac']2 | [V:3] E,2[=B,DE]2 ^G,2[B,DE]2 | [A,CE]4 [CE]4 | F,,2[A,CF]2 C,2[A,CF]2 | [V:4] x8 | x4 G,2C,2 | x8 | % [V:1] [fbd']8 | x8 | [dgb]4 -[dgb]3g | [V:2] z2 BA Bcd2 | [df]e[df]2 -[df]2[dfa]2 | z2 G^F GAB2 | [V:3] B,,2[B,DF]2 F,2[B,DF]2 | D,,2[A,DF]2 A,,2[A,DF]2 | G,,2[B,D]2 D,2[B,D]2 | [V:4] x8 | x8 | x8 | % [V:1] x8 | x8 | [V:2] d2gd -dgd2 | c4 [^G=Bf]3f | [V:3] [B,,B,]2[B,D]2 [G,,G,]2[^G,,^G,]2 | [A,,A,][F,,F,][E,,E,][D,,D,] [_D,,_D,]4 | [V:4] x8 | x8 | % [V:1] ac'2g -gcde |1 x8 :|2 x8 || [V:2] [Ac]c2B -B2B2 |1 [Af]2 =Bc defg :|2 [Af]2 z2 [fac'f']2 z2 || [V:3] [C,,C,]2[A,CF]2 [C,C]2[C,,C,]2 |1 [F,,F,]2 z2 z4 :|2 [F,,F,]2 z2 [F,,,F,,]2 z2 || [V:4] x8 |1 x8 :|2 x8 ||