$ABC_UI

abc format score editor

This JavaScript module handles abc format scores in html pages.

• Module file is: abc-ui-1.0.0.min.js.

This module handles:

• Transposable scores (with audio and chords).
• Visual appearance with magnification factor.
• Audio rendered based on soundfont of MIDI instruments.
• Colored notes to highlight specific note like the sensible.
• Multiple voices.
• Harmonic degrees for harmonic analysis.
• Chord's name (transposable).
• Colored arrows to highlight forced movements.

<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

Links on tests using $ABC_UI

$ABC_UI.init(options)

init builds all abc scores found in html file.

• options.instruments MIDI instruments list to load.
• options.tonality selected tonality to apply for transposable scores.
• options.lang selected language for score player, can be "fr", by default "en".
• options.bMajorOrMinor true to support scores with class major and minor, false otherwise.

Examples

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

$ABC_UI.init();

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

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

$ABC_UI.updateTonality(tonality, bMajorOrMinor);

updateTonality updates all transposable abc scores in a given tonality.

• tonality the selected tonality for update.
• bMajorOrMinor true to support scores with class major and minor, false otherwise.

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.

• id unique identificator of abc score.
• abcContent abc score content in string.
• options.zoom: real with value by default 1.0
• options.pagewidth: real in cm by default 16

1 - Score with abc text between div in html page

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

$ABC_UI.init();

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

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

• 12, first class attribut after abc-source is the score's length in cm, default value is 16cm.
• 0.9, second class attribut after abc-source is the zoom, default value is 1.
• in div use align="center" to center score horizontally.

$ABC_UI.init();

3 - Score with abc text in a JavaScript string variable

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.

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

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();

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

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

• 12, first class attribut after abc-source is the score's length in cm, default value is 16cm.
• 0.9, second class attribut after abc-source is the zoom, default value is 1.

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

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

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

• 17, first class attribut after abc-source is the score's length in cm.
• 1.2, second class attribut after abc-source is the zoom.
• Gb between div is the requested tonality (for abc written with C tone).

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

6 - Score with colored notes

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

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

$ABC_UI.init();

6 - Score with colored movements

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

$ABC_UI.init();

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>

8 - Illustration with a real score

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