Tutoriel des ajouts au format abc
avec la lib abc-ui-1.0.0.min.js

Ce que abc_ui ajoute au format abc standard :

Le code html minimum

<!DOCTYPE html>
<html>
<head lang="fr">
    <meta charset="UTF-8">
    <title>Le minimum pour abc-ui</title>
    <link rel="stylesheet" href="http://dev.music.free.fr/web-music-tools/css/music.min.css" />
    <script src="http://dev.music.free.fr/web-music-tools/libs/harmony-1.0.0.min.js"></script>
    <script src="http://dev.music.free.fr/web-music-tools/libs/abc-ui-1.0.0.min.js"></script>
</head>
<body>
<h1>Le minimum pour avoir une partition avec abc-ui</h1>

<div class="abc-score">
    CDEFGABc |]
</div>

<script>
    $ABC_UI.init();
</script>
</body>
</html>

Lien : abc-ui-mini.html.

Ajout d'instructions par défaut.

La lib étend le format abc :

Les notes colorées

On ajoute devant la note la décoration couleur (!color!) parmi celles-ci :

<div class="abc-score">
    L:1/4
    !red!G !brown!G !peru!G !coral!G !orange!G !khaki!G !gold!G !yellow!G |
    !lime!G !green!G !teal!G !cyan!G !blue!G !navy!G !indigo!G |
    !purple!G !orchid!G !plum!G !pink!G !tan!G !gray!G G |]
</div
L:1/4 "!red!"!red!G "!brown!"!brown!G "!peru!"!peru!G "!coral!"!coral!G "!orange!"!orange!G "!khaki!"!khaki!G "!gold!"!gold!G "!yellow!"!yellow!G | "!lime!"!lime!G "!green!"!green!G "!teal!"!teal!G "!cyan!"!cyan!G "!blue!"!blue!G "!navy!"!navy!G "!indigo!"!indigo!G | "!purple!"!purple!G "!orchid!"!orchid!G "!plum!"!plum!G "!pink!"!pink!G "!tan!"!tan!G "!gray!"!gray!G "normal"G|]

Les flèches colorées

On utilise la décoration !x>(! sur la note de départ et la décoration !x>)! sur la note d'arrivée.
x est le code couleur parmi (r red, o orange, b blue, g green, n noir, y yellow).

Version simple

<div class="abc-score">
    Q:1/1=50
    %%piano2+2
    [V:S] e  | d/d/    | d/!o>(!f/    | !o>)!e |]
    [V:A] G  | !g>(!^F | !g>)!G       | G      |]
    [V:T] C  | !b>(!C  | !b>)!!r>(!B, | !r>)!C |]
    [V:B] C, | D,      | G,           | C,     |]
</div>
Q:1/1=50 %%piano2+2 [V:S] e | d/d/ | d/!o>(!f/ | !o>)!e |] [V:A] G | !g>(!^F | !g>)!G | G |] [V:T] C | !b>(!C | !b>)!!r>(!B, | !r>)!C |] [V:B] C, | D, | G, | C, |]

Ajout des accords/degrés, coloration de note et intervalle dans l'accord

<div class="abc-score">
    Q:1/1=50
    %%piano2+2CD
    [V:C] "C"x | "D7"x              | "G7"x                      | "C"x            |]
    [V:D] "I"x | "V7/V"x            | "V7"x                      | "I"x            |]
    [V:S] e    | d/d/               | d/"@-3,0 7"!o>(!!orange!f/ | "@-4,2 3"!o>)!e |]
    [V:A] G    | "_3"!g>(!!green!^F | "_1"!g>)!G                 | G               |]
    [V:T] C    | "^7"!blue!!b>(!C   | "^3"!b>)!!r>(!!red!B,      | "^1"!r>)!C      |]
    [V:B] C,   | D,                 | G,                         | C,              |]
</div>
Q:1/1=50 %%piano2+2CD [V:C] "C"x | "D7"x | "G7"x | "C"x |] [V:D] "I"x | "V7/V"x | "V7"x | "I"x |] [V:S] e | d/d/ | d/"@-3,0 7"!o>(!!orange!f/ | "@-4,2 3"!o>)!e |] [V:A] G | "_3"!g>(!!green!^F | "_1"!g>)!G | G |] [V:T] C | "^7"!blue!!b>(!C | "^3"!b>)!!r>(!!red!B, | "^1"!r>)!C |] [V:B] C, | D, | G, | C, |]

La gestion des voix pour le piano

La macro %%piano

On a deux voix, une pour la clé de sol nommée KG, l'autre pour la clé de fa nommée KF.

<div class="abc-score">
    %%piano
    [V:KG] CDEFGAB|]
    [V:KF] A,G,F,E,D,C,B,,|]
</div>
%%piano [V:KG] CDEFGAB|] [V:KF] A,G,F,E,D,C,B,,|]

Le tempo

Il est possible de fixer plusieurs temporisation et ajoutant la macro %%tempo :

%%tempo { 30, 60, 90, 120 }

Les valeurs sont basées sur la durée de la noire. Il faut séparer les valeurs par une virgule, on peut en ajouter ou en supprimer. La premiere valeur est sélectionnée par défaut (ici 30).

<div class="abc-score">
    %%tempo { 30, 60, 90, 120 }
    L:1/4
    M:C
    CDEF | GABc |]
</div
%%tempo { 30, 60, 90, 120 } L:1/4 M:C CDEF | GABc |]

On peut sélectionner la valeur initiale en mettant une * devant (ici 180).

<div class="abc-score">
    %%tempo { 60, 100, 140, *180, 220, 240, 260, 280 }
    cBAGFEDC |]
</div
%%tempo { 60, 100, 140, *180, 220, 240, 260, 280 } cBAGFEDC |]