$MUSIC_UI

This JavaScript module handles musical selectors for html pages.

Module file is: music-ui-1.0.0.min.js.
It has dependencies: harmony-1.0.0.min.js and music.min.css.

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
init()	Initializes the library to setup language.
buildTones()	Shows a tone selector.
buildTonalities()	Shows a tonality selector.
buildMajorTonalities()	Shows a major tonality selector.
buildMinorTonalities()	Shows a minor tonality selector.
buildSignatures()	Shows a chord signature selector.
buildModesTable()	Shows table with modes.
getSignatureClass()	Returns the class to setup background color.
getSignatureColor()	Returns the color associated to chord signature.
getSignatureNotation()	Returns the notation associated to chord signature.
getSignatureHtmlFormat()	Returns the notation in html format for chord signature.
getChordHtmlFormat()	Returns the chord notation in html format.
getChordHtmlFormatFromChord()	Returns the chord notation in html format.
getDegreeHtmlFormat()	Returns the degree notation in html format.
getFunctionAttributes()	Returns the attributes of a harmonic function.

Examples

Tonalities

Scale's tables

Chords tranposition

Transposable harmonic analysis

$MUSIC_UI.init()

$MUSIC_UI.init(options);

init() Initializes the library to setup language.

options { 'lang': value }, value is 'en' for english or 'fr' for french.

Example

JavaScript

$MUSIC_UI.init({'lang':'en'});

$MUSIC_UI.buildTones()

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

buildTones() shows a tone selector.

id unique identificator of the selector.
tone the tone to initialize the selector.
cb_update a callback invoked when selection change.

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

Example

HTML

<div align="center">a tone selector
    <div id="tonesSelector"></div>
    <br>Selected tone is: <span id="selectedTone" class="big"></span>.
</div>

JavaScript

function updateTone(tone) {
    document.querySelector('#selectedTone').innerHTML = tone;
}
$MUSIC_UI.buildTones('tonesSelector', 'E', updateTone);

a tone selector

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 scale tonality.

id unique identificator of the selector.
tonality the tonality to initialize the selector.
cb_update a callback invoked when selection change.

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

Note the tonality encoding: mode than tone.

mode: 'M' for major and 'm' for minor.
tone: note with English notation, C, Cb, C#.

Example

HTML

<div align="center">a tonality selector
    <div id="tonalitiesSelector"></div>
    <br>Selected tonality is: <span id="selectedTonality"></span>.
</div>

JavaScript

function updateTonality(tonality) {
    document.querySelector('#selectedTonality').innerHTML = tonality;
}
$MUSIC_UI.buildTonalities('tonalitiesSelector', 'mF#', updateTonality);

a tonality selector

Selected tonality is: .

$MUSIC_UI.buildMajorTonalities()

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

buildMajorTonalities() shows a major tonality selector. It allows to select a major scale tonality.

id unique identificator of the selector.
tonality the tonality to initialize the selector.
cb_update a callback invoked when selection change.

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

Note the tonality encoding: mode than tone.

mode: 'M' for major.
tone: note with English notation, C, Cb, C#.

Example

HTML

<div align="center">a major tonality selector
    <div id="majorTonalitiesSelector"></div>
    <br>Selected tonality is: <span id="selectedMajorTonality"></span>.
</div>

JavaScript

function updateMajorTonality(tonality) {
    document.querySelector('#selectedMajorTonality').innerHTML = tonality;
}
$MUSIC_UI.buildMajorTonalities('majorTonalitiesSelector', 'MD', updateMajorTonality);

a major tonality selector

Selected tonality is: .

$MUSIC_UI.buildMinorTonalities()

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

buildMinorTonalities() shows a minor tonality selector. It allows to select a minor scale tonality.

id unique identificator of the selector.
tonality the tonality to initialize the selector.
cb_update a callback invoked when selection change.

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

Note the tonality encoding: mode than tone.

mode: 'm' for minor.
tone: note with English notation, C, Cb, C#.

Example

HTML

<div align="center">a minor tonality selector
    <div id="minorTonalitiesSelector"></div>
    <br>Selected tonality is: <span id="selectedMinorTonality"></span>.
</div>

JavaScript

function updateMinorTonality(tonality) {
    document.querySelector('#selectedMinorTonality').innerHTML = tonality;
}
$MUSIC_UI.buildMinorTonalities('minorTonalitiesSelector', 'mA', updateMinorTonality);

a minor tonality selector

Selected tonality is: .

$MUSIC_UI.buildSignatures()

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

buildSignatures() shows a chord signature selector.

id unique identificator of the selector.
signatures the list of signatures for the selection. Signatures are string.
selected index of the signature list for selector.
cb_update a callback invoked when selection change.

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">a chord signature selector
    <div id="signaturesSelector"></div>
    <br>Selected signature is: <span id="selectedSignature" class="big"></span>.
</div>

JavaScript

function updateSignature(signature) {
    document.querySelector('#selectedSignature').innerHTML = signature;
}
var signatures = [
    'Maj', 'm', '°', 'mb5', '+5',
    '!7', 'M7', 'Δ', 'm7', 'mM7', '°7',
    '!m7b5', 'Ø', '7b5', '7#5', 'M7#5', 'dim7',
    '!sus2', 'sus4', '7sus4', '6', 'm6', 'add9'
];
$MUSIC_UI.buildSignatures('signaturesSelector', signatures, 0, updateSignature);

a chord signature selector

Selected signature is: .

$MUSIC_UI.buildModesTable()

$MUSIC_UI.buildModesTable(id, mode, bSeven, tone);

buildModesTable() shows table of chord for each scales of mode.

id unique identificator table.
mode the mode number.
bSeven true for tetrads, false for triads.
tone the selected tone, see with ligthgrey in background.

Example

HTML

<div id="modes-table"></div>

JavaScript

$MUSIC_UI.buildModesTable('modes-table', 14, true, 'E');

$MUSIC_UI.getSignatureClass()

$MUSIC_UI.getSignatureClass(signature);

getSignatureClass() returns the class from music.css to setup background color from chord signature.

signature chord signature in list ['', 'Maj', '+', '+5', '#5', 'm', '°', 'M7', 'M7+5', '+M7', '7', '7sus4', 'm7', 'mM7', 'dim', 'dim7', '°7', 'Ø', 'Ø7', '6', 'm6'].

$MUSIC_UI.getSignatureClass('M7') returns 'sig-majorM7'

List of possible returned value:

sig-major, sig-major6, sig-majorM7, sig-major7
sig-augmented, sig-augmentedM7
sig-minor, sig-minor6, sig-minor7, sig-minorM7, sig-minor7b5
sig-diminished, sig-diminished7
sig-suspended4

$MUSIC_UI.getSignatureColor()

$MUSIC_UI.getSignatureColor(signature);

getSignatureColor() returns the color associated to chord signature.

signature chord signature in list ['', 'Maj', '+', '+5', '#5', 'm', '°', 'M7', 'M7+5', '+M7', '7', '7sus4', 'm7', 'mM7', 'dim', 'dim7', '°7', 'Ø', 'Ø7', '6', 'm6'].

$MUSIC_UI.getSignatureClass('M7') returns '#008040'

$MUSIC_UI.getSignatureNotation()

$MUSIC_UI.getSignatureNotation(signature);

getSignatureNotation() returns the notation associated to chord signature.

signature chord signature.

$MUSIC_UI.getSignatureNotation('') returns 'Maj'.

$MUSIC_UI.getSignatureHtmlFormat()

$MUSIC_UI.getSignatureHtmlFormat(signature);

getSignatureHtmlFormat() .

signature chord signature.

$MUSIC_UI.getSignatureHtmlFormat('m7b5')
returns 'm7b5' seen as m7b5

$MUSIC_UI.getChordHtmlFormat()

$MUSIC_UI.getChordHtmlFormat(fundamental, signature, bass);

getChordHtmlFormat() returns the chord notation in html format.

fundamental fundamental of the chord.
signature chord signature.
bass bass of the chord if it's not the fundamental.

$MUSIC_UI.getChordHtmlFormat('G#', '7b9')
returns 'G#7b9' seen as G#7b9.

$MUSIC_UI.getChordHtmlFormat('G#', '7b9', 'D#')
returns 'G#7b9/D#'
seen as G#7b9/D#.

$MUSIC_UI.getChordHtmlFormatFromChord()

$MUSIC_UI.getChordHtmlFormatFromChord(chord);

getChordHtmlFormatFromChord() returns the chord notation in html format.

chord full chord name.

$MUSIC_UI.getChordHtmlFormatFromChord('EbM7,9')
returns 'EbM7,9' seen as EbM7,9

$MUSIC_UI.getChordHtmlFormatFromChord('Gb7#9/Db')
returns 'Gb7#9/Db'
seen as Gb7#9/Db.

$MUSIC_UI.getDegreeHtmlFormat()

$MUSIC_UI.getDegreeHtmlFormat(degree);

getDegreeHtmlFormat() returns the degree notation in html format.

degree the harmonic degree.

$MUSIC_UI.getDegreeHtmlFormat('bII=N6') returns 'bII=N6' seen as bII=N6.

$MUSIC_UI.getDegreeHtmlFormat('+6') returns '+6' seen as +6.

$MUSIC_UI.getDegreeHtmlFormat('It+6')
returns 'It+6' seen as It+6.

$MUSIC_UI.getDegreeHtmlFormat('Fr+6')
returns 'Fr+6' seen as Fr+6.

$MUSIC_UI.getDegreeHtmlFormat('Ger+6')
returns 'Ger+6' seen as Ger+6.

$MUSIC_UI.getDegreeHtmlFormat('IV7')
returns 'VI7' seen as VI7.

$MUSIC_UI.getFunctionAttributes()

$MUSIC_UI.getFunctionAttributes(fn);

getFunctionAttributes() Returns the attributes (name, color and background) of a harmonic function.

fn the harmonic function in ['T', 'Ts', 't', 'ts', 'd', 'D', 'Dst', 'D2', 'D2st', 'SD', 'SD2'].

$MUSIC_UI.getFunctionAttributes('D2') returns
{
name:'D²',
background:'#92D050',
color:'white'
}