$MUSIC_UI


This JavaScript module handles musical selectors for html pages.

Files to include in HTML file header
<link rel="stylesheet" href="css/music.min.css" />

<script src="libs/harmony-1.0.0.min.js"></script>
<script src="libs/music-ui-1.0.0.min.js"></script>

$MUSIC_UI Methods

Method Description
buildTones() Shows a tone selector.
buildTonalities() Shows a tonality selector.
buildSignatures() Shows a chord signature selector.

a tone selector

Selected tone is: .

a tonality selector

Selected tonality is: .

a chord signature selector

Selected chord signature is: .

Exemples

$MUSIC_UI.buildTones()

$MUSIC_UI.buildTones(id, tone, cb_update);

buildTones() shows a tone selector.

buildTones calls the given cb_update callback, with the given selected tone.

Example

HTML
<div align="center">
    <div id="tones1"></div>
    <br>
    Selected tone is: <span id="result-tone1" class="big"></span>.
</div>

JavaScript
function updateTone1(tone) {
    document.querySelector('#result-tone1').innerHTML = tone;
}
$MUSIC_UI.buildTones('tones1', 'D#', updateTone1);


Selected tone is: .

$MUSIC_UI.buildTonalities()

$MUSIC_UI.buildTonalities(id, tonality, cb_update);

buildTonalities() shows a tonality selector. It allows to select a major or minor gammut tonality.

buildTones calls the given cb_update callback, with the given selected tonality.

Note the tonality encoding: mode than tone.

Example

HTML
<div align="center">
    <div id="tonalities1"></div>
    <br>
    Selected tonality is: <span id="result-tonality1"></span>.
</div>

JavaScript
function updateTonality1(tonality) {
    document.querySelector('#result-tonality1').innerHTML = tonality;
}
$MUSIC_UI.buildTonalities('tones1', 'mF#', updateTonality1);


Selected tonality is: .

$MUSIC_UI.buildSignatures()

$MUSIC_UI.buildSignatures(id, signatures, selected, cb_update);

buildSignatures() shows a chord signature selector.

buildSignatures calls the given cb_update callback, with the given selected signature.

Note that in the signture list, fi you add char '!' behind signature, it's show a line return.

Example

HTML
<div align="center">
    <div id="signatures1"></div>
    <br>
    Selected signature is: <span id="result-signature1" class="big"></span>.
</div>

JavaScript
function updateSignature1(signature) {
    document.querySelector('#result-signature1').innerHTML = signature;
}
var signatures1 = [
    'Maj', 'm', '°', 'mb5', '+5',
    '!7', 'M7', 'Δ7', 'm7', 'mM7', '°7',
    '!m7b5', 'Ø7', '7b5', '7#5', 'M7#5', 'dim7',
    '!sus2', 'sus4', '7sus4', '6', 'm6', 'add9'
];
$MUSIC_UI.buildSignatures('signatures1', signatures1, 7, updateSignature1);


Selected signature is: .