This JavaScript module handles musical intervals for html pages.
<script src="libs/harmony-1.0.0.min.js"></script>
<script src="libs/intervals-ui-1.0.0.min.js"></script>
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. |
init() function is used to setup the language.
$INTERVALS_UI.init({'lang':'en'});
buildPentacord() shows pentacord.
<div id="pentacord1"></div>
<div id="pentacord2"></div>
$INTERVALS_UI.buildPentacord('pentacord1', 0, 'C', false);
$INTERVALS_UI.buildPentacord('pentacord2', 0, 'C', true);
buildTetracord() shows tetrachord.
<div id="tetracord1"></div> <div id="tetracord2"></div>
$INTERVALS_UI.buildTetracord('tetracord1', 0, 'C', false);
$INTERVALS_UI.buildTetracord('tetracord2', 0, 'C', true);
tetracord1 | tetracord2 |
mode = 0, major tetrachord |
mode = 1, minor tetrachord |
mode = 18, harmonic tetrachord |
mode = 2, phrygian tetrachord |
mode = 3, lydian tetrachord |
mode = 20, diminished tetrachord |
buildModeSteps() shows degrees of seven-tone musical scale with steps in half tone at bottom.
<div id="major"></div>
<div id="natural"></div>
<div id="harmonic"></div>
<div id="melodic"></div>
$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');
buildModeSteps2() shows degrees of seven-tone musical scale with steps in half tone on top.
<div id="major2"></div>
<div id="natural2"></div>
<div id="harmonic2"></div>
<div id="melodic2"></div>
$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');
buildChordComposition() shows list of notes and intervals for a chord.
<div id="chord1"></div>
<div id="chord2"></div>
<div id="chord3"></div>
$INTERVALS_UI.buildChordComposition('chord1', 'Am');
$INTERVALS_UI.buildChordComposition('chord2', 'CM7');
$INTERVALS_UI.buildChordComposition('chord3', 'F#°7');
buildIntervals() shows intervals selector.
<div align="center" id="intervalSelector"></div>
<p>Selected interval is: <b><span id="selectedInterval"></span></b>.</p>
function _updateInterval(interval) {
document.querySelector("#selectedInterval").innerHTML = interval;
}
$INTERVALS_UI.buildIntervals('intervalSelector', 'P4', _updateInterval);
Selected interval is: .
buildInterval() shows interval with note or degree.
<div id="interval1"></div>
<div id="interval2"></div>
<div id="interval3"></div>
<div id="interval4"></div>
$INTERVALS_UI.buildInterval('interval1', 'I', 'M3');
$INTERVALS_UI.buildInterval('interval2', 'C', 'P5');
$INTERVALS_UI.buildInterval('interval3', 'C', 'd7');
$INTERVALS_UI.buildInterval('interval3', 'F#', 'm7');
buildIntervalsFromTone() shows intervals with notes or degrees.
<div id="intervals1"></div>
<div id="intervals2"></div>
<div id="intervals3"></div>
$INTERVALS_UI.buildIntervalsFromTone('intervals1', 'I');
$INTERVALS_UI.buildIntervalsFromTone('intervals2', 'C');
$INTERVALS_UI.buildIntervalsFromTone('intervals3', 'Eb');
buildSimpleFifthCircle() shows simple fifth circle.
<div id="circle1"></div>
<div id="circle2"></div>
<div id="circle3"></div>
$INTERVALS_UI.buildSimpleFifthCircle("circle1", "C");
$INTERVALS_UI.buildSimpleFifthCircle("circle2", "B");
$INTERVALS_UI.buildSimpleFifthCircle("circle3", "Bb");
circle1 | circle2 | circle3 |
buildFifthCircle() shows full fifth circle.
<div id="circle4"></div>
$INTERVALS_UI.buildFifthCircle("circle4", "A");