$ABC_UI


abc format
score editor

This JavaScript module handles abc format scores in html pages.

This module handles:

Files to include in HTML file header
<link rel="stylesheet" href="css/music.min.css" />
<script src="js/abc-ui-1.0.0.min.js"></script>

To add an abc score in html page, simply use the div tag with the abc-score class:

<div class="abc-source">
    put abc text here
</div>

You can also have abc score text in a JavaScript string variable and use:

<div id="js_variable_name" class="abc-source"><div>

$ABC_UI Methods

Method Description
init() Builds all scores found in html file.
updateTonality() Updates all transposable scores in a given tonality.
buildScore() Render a dynamic abc score.

Links on tests using $ABC_UI

$ABC_UI.init(options)

init builds all abc scores found in html file.

Parameter Values

Examples

HTML
<div class="abc-source">
    Q:1/1=60
    "C"[CEG]|"Dm"[DFA]|"Em"[EGB]|"F"[FAc]|"G"[GBd]|"Am"[Ace]|"B°"[Bdf]|]
    w:I II III IV V VI VII
</div>

JavaScript
$ABC_UI.init();

Result
Q:1/1=60 "C"[CEG] | "Dm"[DFA] | "Em"[EGB] | "F"[FAc] | "G"[GBd] | "Am"[Ace] | "B°"[Bdf] |] w:I II III IV V VI VII

HTML
<div class="abc-source transposable">
    Q:1/1=60
    "C"[CEG]|"Dm"[DFA]|"Em"[EGB]|"F"[FAc]|"G"[GBd]|"Am"[Ace]|"B°"[Bdf]|]
    w:I II III IV V VI VII
</div>

JavaScript
$ABC_UI.init({"tonality": "MEb"});

Result
Q:1/1=60 "C"[CEG] | "Dm"[DFA] | "Em"[EGB] | "F"[FAc] | "G"[GBd] | "Am"[Ace] | "B°"[Bdf] |] w:I II III IV V VI VII

$ABC_UI.updateTonality(tonality, bMajorOrMinor);

updateTonality updates all transposable abc scores in a given tonality.

Transposable scores are html elements with:

<div class="abc-source transposable">...</div>
<div class="abc-source transposable major">...</div>
<div class="abc-source transposable minor">...</div>



$ABC_UI.buildScore(id, abcContent, options)

buildScore render a dynamic abc score.

Parameter Values


1 - Score with abc text between div in html page

HTML
<div class="abc-source">
    Q:1/1=60
    "C"[CEG]|"Dm"[DFA]|"Em"[EGB]|"F"[FAc]|"G"[GBd]|"Am"[Ace]|"B°"[Bdf]|]
    w:I II III IV V VI VII
</div>

JavaScript
$ABC_UI.init();

Result
Q:1/1=60 "C"[CEG] | "Dm"[DFA] | "Em"[EGB] | "F"[FAc] | "G"[GBd] | "Am"[Ace] | "B°"[Bdf] |] w:I II III IV V VI VII

2 - Score with abc text between div in html page, customised visual

HTML
<div class="abc-source 12 0.9" align="center">
    T:Harmonic minor scale
    Q:1/1=70
    K:Cm
    "C"[CEG]|"Dm"[DFA]|"Em"[EGB]|"F"[FAc]|"G"[GBd]|"Am"[Ace]|"B°"[Bdf]|]
    w: I II bIII IV V bVI VII
</div>

JavaScript
$ABC_UI.init();

Result
T:Harmonic minor scale Q:1/1=70 K:Cm "Cm"[CEG] | "D°"[DFA] | "Eb+5"[EG=B] | "Fm"[FAc] | "G"[G=Bd] | "Ab"[Ace] | "B°"[=Bdf] |] w: I II bIII IV V bVI VII

3 - Score with abc text in a JavaScript string variable

score_1.abc
X:1
L:1/1
Q:1/1=60
K:C
"notes"x"C"C"D"D"E"E"F"F"G"G"A"A"B"B"C"c|]

In <div class="abc-source"> add the id of the name of the string used in JavaScript.

HTML
<div id="score_1" class="abc-source"><div>

JavaScript
var score_1='X:1\nL:1/1\nQ:1/1=60\nK:C\n\
"notes"x"C"C"D"D"E"E"F"F"G"G"A"A"B"B"C"c|]\n';
$ABC_UI.init();

Result

4 - Score with abc text in a JavaScript string, customised visual

HTML
<div id="score_2" class="abc-source 12 0.9" align="right"></div>

JavaScript
var score_2 = score_1;
$ABC_UI.init();

Result

5 - Score with abc text in a JavaScript, static transposition

HTML
<div id="score_3" class="abc-source 17 1.2">Gb</div>

JavaScript
var score_3 = score_1;
$ABC_UI.init();

Result
Gb

6 - Score with colored notes

Use a abc decoration before the note with that given list of color only: !color!note

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

JavaScript
$ABC_UI.init();

Result
L:1/4 "!red!"!red!A "!brown!"!brown!A "!peru!"!peru!A "!coral!"!coral!A "!orange!"!orange!A "!khaki!"!khaki!A "!gold!"!gold!A "!yellow!"!yellow!A | "!lime!"!lime!A "!green!"!green!A "!teal!"!teal!A "!cyan!"!cyan!A "!blue!"!blue!A "!navy!"!navy!A "!indigo!"!indigo!A | "!purple!"!purple!A "!orchid!"!orchid!A "!plum!"!plum!A "!pink!"!pink!A "!tan!"!tan!A "!gray!"!gray!A "no color"A|]

6 - Score with colored movements

HTML
<div class="abc-source">
    %%no_player
    %%score {(1 2) | (3 4)}
    V:1 clef=treble
    V:2 clef=treble
    V:3 clef=bass
    V:4 clef=bass
    [V:1] d/d/           | d/!o>(!!orange!f/ | !o>)!e |]
    [V:2] !g>(!!green!^F | !g>)!G            | G      |]
    [V:3] !blue!!b>(!C   | !b>)!!r>(!!red!B, | !r>)!C |]
    [V:4] D,             | G,                | C,     |]
</div>

JavaScript
$ABC_UI.init();

Result
%%no_player %%score {(1 2) | (3 4)} V:1 clef=treble V:2 clef=treble V:3 clef=bass V:4 clef=bass [V:1] d/d/ | d/!o>(!!orange!f/ | !o>)!e |] [V:2] !g>(!!green!^F | !g>)!G | G |] [V:3] !blue!!b>(!C | !b>)!!r>(!!red!B, | !r>)!C |] [V:4] D, | G, | C, |]

We can write simplest (but non standard abc), using ABC-UI macros:

<div class="abc-source">
    %%piano2+2CD
    [V:C] "D7"x          | "G7"x             | "C"x   |]
    [V:D] "V7/V"x        | "V7"x             | "I"x   |]
    [V:S] d/d/           | d/!o>(!!orange!f/ | !o>)!e |]
    [V:A] !g>(!!green!^F | !g>)!G            | G      |]
    [V:T] !blue!!b>(!C   | !b>)!!r>(!!red!B, | !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] d/d/ | d/!o>(!!orange!f/ | !o>)!e |] [V:A] !g>(!!green!^F | !g>)!G | G |] [V:T] !blue!!b>(!C | !b>)!!r>(!!red!B, | !r>)!C |] [V:B] D, | G, | C, |]

8 - Illustration with a real score

HTML
<div id="chopin" class="abc-source 17 0.8"></div>

File chopin.abc.