Tutoriel du format abc simplifié
avec la lib abc-ui-1.0.0.min.js

Les liens officiels

Les avantages de la lib abc-ui.js

La lib est utilisable directement dans une page html. Elle étend le format abc :

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.

Introduction

Le nom des notes est celui de la notation anglaise : C Do, D , E Mi, F Fa, G Sol, A La, B Si.

Le minimum

Par exemple pour avoir la gamme du Do majeur avec abc-ui :

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

Plus besoin de commencer par X:1.
L: définit la durée de la note de base, celle qui est la plus utilisée dans la partition :

<div class="abc-score">
    L:1/2
    CDEFGABc
</div>
L:1/2 CDEFGABc

K: définit l'armure à la clef :

<div class="abc-score">
    L:1/4
    K:Am
    A,B,CDEF^GA
</div
L:1/4 K:Am A,B,CDEF^GA

On peut transposer, par exemple pour une partition écrite en Do majeur, on transpose en Mib majeur avec K:C shift=C_E.

<div class="abc-score">
    K:C shift=C_E
    CDEFGABc
</div
K:C shift=C_E CDEFGABc

La hauteur des notes

Les notes peuvent être en majuscule ou en minuscule, cela détermine l'octave.

Exemple de l'ensemble des notes blanches du piano :

<div class="abc-score">
    L:1/4
    A,,,,B,,,, | C,,,D,,,E,,,F,,,G,,,A,,,B,,,| C,,D,,E,,F,,G,,A,,B,,|
    C,D,E,F,G,A,B, | CDEFGAB | cdefgab |
    c'd'e'f'g'a'b' | c''d''e''f''g''a''b'' | c''' |]
</div
L:1/4 A,,,,B,,,, | C,,,D,,,E,,,F,,,G,,,A,,,B,,,| C,,D,,E,,F,,G,,A,,B,,| C,D,E,F,G,A,B, | CDEFGAB | cdefgab | c'd'e'f'g'a'b' | c''d''e''f''g''a''b'' | c''' |]

Pour simplifier la lecture des notes basses et hautes, il est possible d'ajouter des indications sur les clefs :
[K:C bass_8], [K:C bass], [K:C treble] et [K:C treble^8].

<div class="abc-score">
    L:1/4
    K:C
[K:C bass_8] A,,,,B,,,, | C,,,D,,,E,,,F,,,G,,,A,,,B,,, | [K:C bass] C,,D,,E,,F,,G,,A,,B,, |
    C,D,E,F,G,A,B, | [K:C treble] CDEFGAB | cdefgab |
    c'd'e'f'g'a'b' | [K:C treble^8] c''d''e''f''g''a''b'' | c''' |]
</div
L:1/4 K:C [K:C bass_8] A,,,,B,,,, | C,,,D,,,E,,,F,,,G,,,A,,,B,,, | [K:C bass] C,,D,,E,,F,,G,,A,,B,, | C,D,E,F,G,A,B, | [K:C treble] CDEFGAB | cdefgab | c'd'e'f'g'a'b' | [K:C treble^8] c''d''e''f''g''a''b'' | c''' |]

Les altérations

Pour altérer une note on ajoute devant la note :

<div class="abc-score">
    __C _C =C ^C ^^C | __D _D =D ^D ^^D |
    __E _E =E ^E ^^E | __F _F =F ^F ^^F |
    __G _G =G ^G ^^G | __A _A =A ^A ^^A |
    __B _B =B ^B ^^B |]
</div
__C _C =C ^C ^^C | __D _D =D ^D ^^D | __E _E =E ^E ^^E | __F _F =F ^F ^^F | __G _G =G ^G ^^G | __A _A =A ^A ^^A | __B _B =B ^B ^^B |]

Les barres et les répétitions

Pour ajouter des barres on utilise ces caractères :

<div class="abc-score">
    C/ |: D | E :| F || G | :A |1 B :|2 c/ |]
</div
Q:1/1=80 C/|:D|E:|F||G|:A|1B:|2c/|]

La durée des mesures

Pour indiquer le temps des mesures à la clef on ajoute M:

<div class="abc-score">
    L:1/4
    [M:1/1] C4 | [M:1/2] D2 | [M:1/4] E | [M:1/8] F/ |
    [M:2/1] C4D4 | [M:2/2] E2F2 | [M:2/4] GA | [M:2/8] B/c/ |
    [M:3/1] C4D4E4 | [M:3/2] F2G2A2 | [M:3/4] Bcd | [M:3/8] C/D/E/ |
    [M:4/1] C4D4E4F4 | [M:4/2] G2A2B2c2 | [M:4/4] CDEF | [M:4/8] C/D/E/F/ |
    [M:none] C4 | DE | F/G/A/ | [M:C] CDEF |]
</div
L:1/4 [M:1/1] C4 | [M:1/2] D2 | [M:1/4] E | [M:1/8] F/ | [M:2/1] C4D4 | [M:2/2] E2F2 | [M:2/4] GA | [M:2/8] B/c/ | [M:3/1] C4D4E4 | [M:3/2] F2G2A2 | [M:3/4] Bcd | [M:3/8] C/D/E/ | [M:4/1] C4D4E4F4 | [M:4/2] G2A2B2c2 | [M:4/4] CDEF | [M:4/8] C/D/E/F/ | [M:none] C4 | DE | F/G/A/ | [M:C] CDEF |]

Le tempo

Pour indiquer le tempo (pour l'audio) on utilise Q:

<div class="abc-score">
    L:1/4
    Q:1/4=40
    M:4/4
    CDEF | GABc |]
</div
L:1/4 Q:1/4=40 M:4/4 CDEF | GABc |]
<div class="abc-score">
    L:1/4
    Q:1/4=80
    M:4/4
    K:Cm
    CDEF | GA=Bc |]
</div
L:1/4 Q:1/4=80 M:4/4 K:Cm CDEF | GA=Bc |]

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 |]

La durée des notes

Pour la durée, on l'ajoute après la note si nécessaire, si est ne correspond pas à la durée donnée par le L:? :

la notion du L: est très importante car on écrire la même partition de plusieurs maniéres :

<div class="abc-score">
    T:A la ronde par défaut
    C/D/E/F/G/A/B/ |
</div
T:A la ronde par défaut C/D/E/F/G/A/B/ |

<div class="abc-score">
    T:A la blanche
    L:1/2
    CDEFGAB |
</div
T:A la blanche L:1/2 CDEFGAB |

<div class="abc-score">
    T:A la noire
    L:1/4
    C2D2E2F2G2A2B2 |
</div
T:A la noire L:1/4 C2D2E2F2G2A2B2 |

<div class="abc-score">
    T:Mélange
    L:1/2
    C2D3/2EF/G//A///B//// |
</div
T:Mélange L:1/2 C2D3/2EF/G//A///B//// |

Ajout de texte

Pourt ajouter du texte, devant la note on place le texte entre "". On peut avoir du texte au dessus en mettant devant un underscore : _"texte". On peut avoir du texte au dessous en mettant devant un ^ : ^"texte"/

<div class="abc-score">
    "Do"C "Ré"D "Mi"E "Fa"F "Sol"G "La"A "Si"B "Do"c |]
</div
"Do"C "Ré"D "Mi"E "Fa"F "Sol"G "La"A "Si"B "Do"c |]
<div class="abc-score">
    "_Do"C "_Ré"D "_Mi"E "_Fa"F "_Sol"G "_La"A "_Si"B "_Do"c |]
</div
"_Do"C "_Ré"D "_Mi"E "_Fa"F "_Sol"G "_La"A "_Si"B "_Do"c |]
<div class="abc-score">
    "^C""Do"C "^D""Ré"D "^E""Mi"E "^F""Fa"F "^G""Sol"G "^A""La"A "^B""Si"B "^C""Do"c |]
</div
"^C""Do"C "^D""Ré"D "^E""Mi"E "^F""Fa"F "^G""Sol"G "^A""La"A "^B""Si"B "^C""Do"c |]
<div class="abc-score">
    "Do"C "Ré"D "Mi"E "Fa"F "Sol"G "La"A "Si"B "Do"c |]
    w:C D E F G A B C
</div
"Do"C "Ré"D "Mi"E "Fa"F "Sol"G "La"A "Si"B "Do"c |] w:C D E F G A B C

Pour plus de lisibilité on peut utiliser des voix avec une voix de texte :

<div class="abc-score">
    %%score (N 1)
    [V:N] "Do"x "Ré"x "Mi"x "Fa"x "Sol"x "La"x "Si"x "Do"x |]
    [V:1] C D E F G A B c |]
    w:C D E F G A B C
</div
%%score (N 1) [N:t] "Do"x "Ré"x "Mi"x "Fa"x "Sol"x "La"x "Si"x "Do"x |] [V:1] C D E F G A B c |] w:C D E F G A B C

Les accords

Pour regrouper des notes on les mets entre crochets. Le crochet de clôture peut être suivi de la durée comme pour une note. Au lieu de [C2E2G2] on écrira [CEG]2.

<div class="abc-score">
    L:1/4
    [C2E2G2] | [CEG]2 | [CEG]-[CEG] | [C2EG][EG] | [CEG][CEG]/[CEG]/ |]
</div
L:1/4 [C2E2G2] | [CEG]2 | [CEG]-[CEG] | [C2EG][EG] | [CEG][CEG]/[CEG]/ |]

On peut ajouter une voix pour le nom des accords :

<div class="abc-score">
    K:Cm
    %%score (c 1)
    [V:c] "Cm7"x  | "DØ7"x | "Eb+M7"x | "Fm7"x | "G7"x   | "AbM7"x | "B°7"x  |]
    [V:1] [CEG=B] | [DFAc] | [EG=Bd]  | [FAce] | [G=Bdf] | [Aceg]  | [=Bdfa] |]
    w:I II bIII IV V bVI VII
</div
K:Cm %%score (c 1) [V:c] "Cm7"x | "DØ7"x | "Eb+M7"x | "Fm7"x | "G7"x | "AbM7"x | "B°7"x |] [V:1] [CEG=B] | [DFAc] | [EG=Bd] | [FAce] | [G=Bdf] | [Aceg] | [=Bdfa] |] w:I II bIII IV V bVI VII

On peut ajouter une voix pour les degrés :

<div class="abc-score">
    %%score (d c 1)
    [V:c] "Cm7"x | "Dm7"x | "Em7"x | "FM7"x | "G7"x  | "Am7"x | "BØ7"x |]
    [V:d] "I"x   | "II"x  | "III"x | "IV"x  | "V"x   | "VI"x  | "VII"x |]
    [V:1] [CEGB] | [DFAc] | [EGBd] | [FAce] | [GBdf] | [Aceg] | [Bdfa] |]
</div
%%score (d c 1) [V:c] "Cm7"x | "Dm7"x | "Em7"x | "FM7"x | "G7"x | "Am7"x | "BØ7"x |] [V:d] "I"x | "II"x | "III"x | "IV"x | "V"x | "VI"x | "VII"x |] [V:1] [CEGB] | [DFAc] | [EGBd] | [FAce] | [GBdf] | [Aceg] | [Bdfa] |]

Les notes colorées

Customisé dans la lib abc-ui-1.0.0.min.js, c'est une extention qui n'est pas dans le format abc de base.

<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

Customisé dans la lib abc-ui-1.0.0.min.js, c'est une extention qui n'est pas dans le format abc de base.

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