La lib est utilisable directement dans une page html. Elle étend le format abc :
X:1 L:1/1 K:CSi l'on veut changer de timing de base il faut alors mettre L:?, pour changer la clef de Do il faut ajouter K:?.
<!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.
Le nom des notes est celui de la notation anglaise : C Do, D Ré, E Mi, F Fa, G Sol, A La, B Si.
Par exemple pour avoir la gamme du Do majeur avec abc-ui :
<div class="abc-score">CDEFGABc</div>
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>
K: définit l'armure à la clef :
<div class="abc-score"> L:1/4 K:Am A,B,CDEF^GA </div
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
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
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
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
Pour ajouter des barres on utilise ces caractères :
<div class="abc-score"> C/ |: D | E :| F || G | :A |1 B :|2 c/ |] </div
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
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
<div class="abc-score"> L:1/4 Q:1/4=80 M:4/4 K:Cm CDEF | GA=Bc |] </div
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
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
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
<div class="abc-score"> T:A la blanche L:1/2 CDEFGAB | </div
<div class="abc-score"> T:A la noire L:1/4 C2D2E2F2G2A2B2 | </div
<div class="abc-score"> T:Mélange L:1/2 C2D3/2EF/G//A///B//// | </div
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
<div class="abc-score"> "_Do"C "_Ré"D "_Mi"E "_Fa"F "_Sol"G "_La"A "_Si"B "_Do"c |] </div
<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
<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
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
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
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
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
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
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>