$INTERVALS_UI


This JavaScript module handles musical intervals for html pages.

Files to include in HTML file header
<script src="libs/harmony-1.0.0.min.js"></script>
<script src="libs/intervals-ui-1.0.0.min.js"></script>

$INTERVALS_UI Methods

Method Description
init() Initializes the library to setup language.
buildPentacord() Shows a pentacord.
buildTetracord() Shows a tretacord.
buildModeSteps() Shows degrees of choosen mode.
buildModeSteps2() Shows degrees of choosen mode.
buildChordComposition() Shows chord's notes.
buildIntervals() Shows intervals selector.
buildInterval() shows interval with note or degree.
buildIntervalsFromTone() Shows intervals from a tone.
buildSimpleFifthCircle() Shows simple fifth cycle.
buildFifthCircle() Shows full fifth cycle.

Examples

$INTERVALS_UI.init()

$INTERVALS_UI.init(options);

init() function is used to setup the language.

Example

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


$INTERVALS_UI.buildPentacord()

$INTERVALS_UI.buildPentacord(id, mode, tone, bStep);

buildPentacord() shows pentacord.

Examples

HTML
<div id="pentacord1"></div>
<div id="pentacord2"></div>

JavaScript
$INTERVALS_UI.buildPentacord('pentacord1', 0, 'C', false);
$INTERVALS_UI.buildPentacord('pentacord2', 0, 'C', true);

pentacord1
pentacord2

Pentacord list

mode = 0, major pentacord

mode = 5, minor pentacord

mode = 18, harmonic pentacord

mode = 2, phrygian pentacord

mode = 3, lydian pentacord

mode = 19, hungarian pentacord

mode =17, minor-lydian pentacord

mode = 9, augmented pentacord

mode = 6, locrian pentacord

mode =20, minor-locrian pentacord

$INTERVALS_UI.buildTetracord()

$INTERVALS_UI.buildTetracord(id, mode, tone, bStep);

buildTetracord() shows tetrachord.

Examples

HTML
<div id="tetracord1"></div> <div id="tetracord2"></div>

JavaScript
$INTERVALS_UI.buildTetracord('tetracord1', 0, 'C', false);
$INTERVALS_UI.buildTetracord('tetracord2', 0, 'C', true);

tetracord1
tetracord2

Tetrachord list

mode = 0, major tetrachord
mode = 1, minor tetrachord

mode = 18, harmonic tetrachord

mode = 2, phrygian tetrachord

mode = 3, lydian tetrachord

mode = 20, diminished tetrachord

$INTERVALS_UI.buildModeSteps()

$INTERVALS_UI.buildModeSteps(id, mode, tone, pentacord, tetracord);

buildModeSteps() shows degrees of seven-tone musical scale with steps in half tone at bottom.

Examples

HTML
<div id="major"></div>
<div id="natural"></div>
<div id="harmonic"></div>
<div id="melodic"></div>

JavaScript
$INTERVALS_UI.buildModeSteps('major', 0, 'C', 'major', 'major');
$INTERVALS_UI.buildModeSteps('natural', 21, 'A');
$INTERVALS_UI.buildModeSteps('harmonic', 14, 'Eb');
$INTERVALS_UI.buildModeSteps('melodic', 7, 'I', 'minor', 'major');










$INTERVALS_UI.buildModeSteps2()

$INTERVALS_UI.buildModeSteps2(id, mode, tone, pentacord, tetracord);

buildModeSteps2() shows degrees of seven-tone musical scale with steps in half tone on top.

Examples

HTML
<div id="major2"></div>
<div id="natural2"></div>
<div id="harmonic2"></div>
<div id="melodic2"></div>

JavaScript
$INTERVALS_UI.buildModeSteps2('major2', 0, 'C', 'major', 'major');
$INTERVALS_UI.buildModeSteps2('natural2', 21, 'A');
$INTERVALS_UI.buildModeSteps2('harmonic2', 14, 'Eb');
$INTERVALS_UI.buildModeSteps2('melodic2', 7, 'I', 'minor', 'major');










$INTERVALS_UI.buildChordComposition()

$INTERVALS_UI.buildChordComposition(id, chord);

buildChordComposition() shows list of notes and intervals for a chord.

Example

HTML
<div id="chord1"></div>
<div id="chord2"></div>
<div id="chord3"></div>

JavaScript
$INTERVALS_UI.buildChordComposition('chord1', 'Am');
$INTERVALS_UI.buildChordComposition('chord2', 'CM7');
$INTERVALS_UI.buildChordComposition('chord3', 'F#°7');

Am chord:



CM7 chord:



F#°7 chord:

$INTERVALS_UI.buildIntervals()

$INTERVALS_UI.buildIntervals(id, selection, cb_update);

buildIntervals() shows intervals selector.

Example

HTML
<div align="center" id="intervalSelector"></div>
<p>Selected interval is: <b><span id="selectedInterval"></span></b>.</p>

JavaScript
function _updateInterval(interval) {
    document.querySelector("#selectedInterval").innerHTML = interval;
}
$INTERVALS_UI.buildIntervals('intervalSelector', 'P4', _updateInterval);

Selected interval is: .

$INTERVALS_UI.buildInterval()

$INTERVALS_UI.buildInterval(id, tone, interval);

buildInterval() shows interval with note or degree.

Examples

HTML
<div id="interval1"></div>
<div id="interval2"></div>
<div id="interval3"></div>
<div id="interval4"></div>

JavaScript
$INTERVALS_UI.buildInterval('interval1', 'I', 'M3');
$INTERVALS_UI.buildInterval('interval2', 'C', 'P5');
$INTERVALS_UI.buildInterval('interval3', 'C', 'd7');
$INTERVALS_UI.buildInterval('interval3', 'F#', 'm7');










$INTERVALS_UI.buildIntervalsFromTone()

$INTERVALS_UI.buildIntervalsFromTone(id, tone);

buildIntervalsFromTone() shows intervals with notes or degrees.

Example

HTML
<div id="intervals1"></div>
<div id="intervals2"></div>
<div id="intervals3"></div>

JavaScript
$INTERVALS_UI.buildIntervalsFromTone('intervals1', 'I');
$INTERVALS_UI.buildIntervalsFromTone('intervals2', 'C');
$INTERVALS_UI.buildIntervalsFromTone('intervals3', 'Eb');







$INTERVALS_UI.buildSimpleFifthCircle()

$INTERVALS_UI.buildSimpleFifthCircle(id, tone);

buildSimpleFifthCircle() shows simple fifth circle.

Examples

HTML
<div id="circle1"></div>
<div id="circle2"></div>
<div id="circle3"></div>

JavaScript
$INTERVALS_UI.buildSimpleFifthCircle("circle1", "C");
$INTERVALS_UI.buildSimpleFifthCircle("circle2", "B");
$INTERVALS_UI.buildSimpleFifthCircle("circle3", "Bb");

circle1
circle2
circle3

$INTERVALS_UI.buildFifthCircle()

$INTERVALS_UI.buildFifthCircle(id, tone);

buildFifthCircle() shows full fifth circle.

Example

HTML
<div id="circle4"></div>

JavaScript
$INTERVALS_UI.buildFifthCircle("circle4", "A");

circle4