$SEQUENCE_UI

harmonic sequence
editor
with text format

This JavaScript module handles transposable harmonic sequences for html pages.

Module file is: sequence-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/sequence-ui-1.0.0.min.js"></script>

$SEQUENCE_UI Methods

Method	Description
init()	Builds all harmonic sequences found in html file.
updateTonality()	Updates transposable harmonic sequences with given tonality.
buildSequencesFromList()	Shows harmonic sequences from sequence list.
buildHarmonization()	Shows harmonization in a given mode.

Examples

$SEQUENCE_UI.init()

$SEQUENCE_UI.init(options);

init() Builds all harmonic sequences found in html file.

options {
    'tonality': 'MC',
    'bMajorOrMinor': true or false,
    'lang': 'en' or 'fr' for language
}

Example

JavaScript

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

$SEQUENCE_UI.updateTonality()

$SEQUENCE_UI.updateTonality(tonality, bMajorOrMinor);

updateTonality() Updates transposable harmonic sequences with given tonality.

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

$SEQUENCE_UI.buildSequencesFromList()

$SEQUENCE_UI.buildSequencesFromList(tone, list);

buildSequencesFromList() Shows harmonic sequences from sequence list.

tone selected tone.
list list of sequence to show.

$SEQUENCE_UI.buildHarmonization()

$SEQUENCE_UI.buildHarmonization(id, mode, tone, bSeven);

buildHarmonization() Shows harmonization in a given mode.

id unique identificator of sequence.
mode the seleted mode as integer.
tone the selected tone.
bSeven true to use tetrads, false to use triads.

Harmonic sequence format

It's an array of chord:

[ chord, chord, chord, ... ]

Chord format

It's an array of five fields:

[ degree, signature, notation, function, options ]

degree

The degree of chord is the degree in main tonality, "P1" stands for the fondamental.

Degree	I	#I	bII	II	#II	bbIII	bIII	III	#III	bIV	IV	#IV
Note	C	C#	Db	D	D#	Ebb	Eb	E	E#	Fb	F	F#
Code	"P1"	"A1"	"m2"	"M2"	"A2"	"d3"	"m3"	"M3"	"A3"	"d4"	"P4"	"A4"

Degree	bV	V	#V	bbVI	bVI	VI	#VI	bbVII	bVII	VII
Note	Gb	G	G#	Abb	Ab	A	A#	Bbb	Bb	B
Code	"d5"	"P5"	"A5"	"d6"	"m6"	"M6"	"A6"	"d7"	"m7"	"M7"

signature

It's the string of chord signature.

notation

This is the degree notation in roman number.

function

T		"T" Tonic degree I in fondamental state without leading-tone.
T		"Ts" Tonic degree I in fondamental state with leading-tone.
T		"t" Tonic degré I à l'état de renversement ou autre degré sans la leading-tone.
T		"ts" Tonique degré I à l'état de renversement ou autre degré avec la leading-tone.
D		"d" Dominante avec la sensible mais sans la quarte.
D		"D" Dominante avec le triton tonal donc sensible et quarte.
D		"Dst" substitution tritonique, subV7 ou bII7 avec quarte et sensible.
D²		"D2" Dominante secondaire, V7/?.
D²		"D2st" substitution tritonique de la dominante secondaire, subV7/?.
SD		"SD" Sous-dominante.
SD²		"SD2" Sous-dominante secondaire.

options

1 - Static sequence, data in div, non given tone

HTML

<div class="harmonic-sequence">
    ['P4','m','IV','SD'], ['P5','7','V7','D'], ['P1','m','I','T']
</div>

JavaScript

$SEQUENCE_UI.init({"tonality":"mG"});

['P4','m','IV','SD'], ['P5','7','V7','D'], ['P1','m','I','T']

Tone (degree I) is set by the given value in $SEQUENCE_UI.init({"tonality":"mG"}), here it's G.

2 - Static sequence, data in JavaScript variable, non given tone

HTML

<div id="sequence_1" class="harmonic-sequence"></div>

JavaScript

var sequence_1 = [['M2','m','II','SD'],['P5','','V','d'],['P1','','I','T']];
$SEQUENCE_UI.init({"tonality":"MG"});

Tone (degree I) is set by the given value in $SEQUENCE_UI.init({"tonality":"MG"}), here it's G.

3 - Static sequence, data in JavaScript variable, given tone D#

HTML

<div align="center">
    <div id="sequence_2" class="harmonic-sequence">D#</div>
</div>

JavaScript

var sequence_2 = sequence_1;
$SEQUENCE_UI.init({"tonality":"mG"});

Tone (degree I) is set by the given value in <div>tone</div>, here it's D#.

4 - Transposable sequence, data in JavaScript variable, non given tone

HTML

<div id="sequence_3" class="harmonic-sequence transposable"></div>

JavaScript

var sequence_3 = [
    ['M2','7','II/V','D2'], ['P5','7','V7','D'], ['P1','M7','I','Ts']
];
$SEQUENCE_UI.init({"tonality":"MC#"});

Tone (degree I) is initially set by the given value in $SEQUENCE_UI.init(tone), here it's C#.
It can be updated calling to $SEQUENCE_UI.updateTonality(tonality).

$SEQUENCE_UI.updateTonality("MF");

5 - Transposable sequence, data in JavaScript variable, given tone Ab

HTML

<div id="sequence_4" class="harmonic-sequence transposable">Ab</div>

JavaScript

var sequence_4 = [
    ['P5','','V','d'],['P1','','I','T'],['P4','','IV','SD'],['P1','','I','T']
];

Tone (degree I) is initially set by the given value in $SEQUENCE_UI.init(tone), here it's Ab.
Il peut être mis à jour par l'appel à $SEQUENCE_UI.updateTonality(tonality).

$SEQUENCE_UI.updateTonality("MF");

6 - Available chord notations

Triads with inversions

C ['P1','','x','t'],['P1','m','x','t'],['P1','dim','x','t'],['P1','°','x','t'],['P1','mb5','x','t'],['P1','(#5)','x','t'],['P1','+5','x','t'],['P1','#5','x','t','br'], ['P1/M3','','x','t'],['P1/m3','m','x','t'],['P1/m3','dim','x','t'],['P1/m3','°','x','t'],['P1/m3','mb5','x','t'],['P1/M3','(#5)','x','t'],['P1/M3','+5','x','t'],['P1/M3','#5','x','t','br'], ['P1/P5','','x','t'],['P1/P5','m','x','t'],['P1/d5','dim','x','t'],['P1/d5','°','x','t'],['P1/d5','mb5','x','t'],['P1/A5','(#5)','x','t'],['P1/A5','+5','x','t'],['P1/A5','#5','x','t']

Seventh chords with inversions

C ['P1','M7','x','t'],['P1','7','x','t'],['P1','m7','x','t'],['P1','mM7','x','t'],['P1','°7','x','t'],['P1','dim7','x','t'],['P1','Ø','x','t'],['P1','m7b5','x','t','br'], ['P1/M3','M7','x','t'],['P1/M3','7','x','t'],['P1/m3','m7','x','t'],['P1/m3','mM7','x','t'],['P1/m3','°7','x','t'],['P1/m3','dim7','x','t'],['P1/m3','Ø','x','t'],['P1/m3','m7b5','x','t','br'], ['P1/P5','M7','x','t'],['P1/P5','7','x','t'],['P1/P5','m7','x','t'],['P1/P5','mM7','x','t'],['P1/d5','°7','x','t'],['P1/d5','dim7','x','t'],['P1/d5','Ø','x','t'],['P1/d5','m7b5','x','t','br'], ['P1','M7','x','t'],['P1/m7','7','x','t'],['P1/m7','m7','x','t'],['P1/M7','mM7','x','t'],['P1/d7','°7','x','t'],['P1/d7','dim7','x','t'],['P1/m7','Ø','x','t'],['P1/m7','m7b5','x','t']

Jazz chords with tensions

C ['P1','6','x','t'],['P1','m6','x','t'],['P1','9','x','t'],['P1','b9','x','t'],['P1','#9','x','t'], ['P1','M9','x','t'], ['P1','11','x','t'],['P1','#11','x','t'],['P1','13','x','t'],['P1','b13','x','t'], ['P1','7alt','x','t'],['P1','7b9','x','t'],['P1','7,b9','x','t'],['P1','79','x','t'],['P1','7,9','x','t'],['P1','7#9','x','t'], ['P1','7,#9','x','t'],['P1','7,13','x','t'],['P1','7b13','x','t'],['P1','7,b13','x','t'], ['P1','7#9b13','x','t'],['P1','7,#9,b13','x','t'],['P1','79#11','x','t'],['P1','7,9,#11','x','t'],['P1','79b13','x','t'], ['P1','7,9,b13','x','t'],['P1','7,9,13','x','t'],['P1','7b9#11','x','t'], ['P1','7,b9,#11','x','t'],['P1','7b9b13','x','t'], ['P1','7,b9,b13','x','t'],['P1','7,b9,13','x','t'],['P1','7b9,13','x','t'],['P1','7+5','x','t'],['P1','7#5','x','t'], ['P1','Ø9','x','t'],['P1','Ø11','x','t'],['P1','Øb13','x','t'],['P1','7,b13','x','t'], ['P1','m7,9','x','t'],['P1','m79','x','t'],['P1','m7,11','x','t'],['P1','m7,9,13','x','t'],['P1','m7b9','x','t'],['P1','m7,b9','x','t'], ['P1','M79','x','t'],['P1','M7,9','x','t'],['P1','M7,13','x','t'],['P1','M7,9,#11','x','t'],['P1','M7,9,13','x','t'], ['P1','+M7','x','t'],['P1','M7+','x','t'],['P1','M7+5','x','t'],['P1','M7#5','x','t'], ['P1','9,11','x','t'],['P1','9#11','x','t'],['P1','9,#11','x','t'],['P1','9b13','x','t'],['P1','9,b13','x','t'],['P1','9,13','x','t'], ['P1','9,#11,13','x','t'], ['P1','sus2','x','t'],['P1','sus4','x','t'],['P1','add9','x','t'],['P1','sus4add9','x','t'], ['P1','?','x','t']

7 - Available degree notations

C ['?','?','?','?'],['P1','?','?','?'],['?','m','?','?'],['?','?','?','SD'],['?','maj','?','SD'], ['?','7','V7/?','D2']

8 - Available function notations

Tonics

Dominants

Sub-Dominants

Secondary dominants

8 - Sequence rendered modes

var mySequence = [
    ['P1','','I','T'],['P1','7','V7/IV','D2'],['P4','','IV','SD'],['P5','','V','d'],
    ['P5','7','V7','D'],['M3','m','VI','t'],['M3','7','V7/II','D2'],['M2','m','II','SD'],
    ['M7','°7','VII°7','D'],['P1','','I','T']
];

Harmonic functions only: @

<div id="mySequence" class="harmonic-sequence">@</div>

Harmonic functions with degrees: !

<div id="mySequence" class="harmonic-sequence">!</div>

Harmonic functions with colored degrees (from chord signature): !%

<div id="mySequence" class="harmonic-sequence">!%</div>

Harmonic functions with degrees and signatures: $

<div id="mySequence" class="harmonic-sequence">$</div>

Harmonic functions with degrees and colored signatures: $%

<div id="mySequence" class="harmonic-sequence">$%</div>

Harmonic functions with degrees and chords: tone

<div id="mySequence" class="harmonic-sequence">A</div>

Harmonic functions with degrees and colored chords: tone%

<div id="mySequence" class="harmonic-sequence">A%</div>