CHORD CHART
Tutoriel
Application en ligne
par Yann Ics
2015 – 2024
Chord Chart est une application en ligne dans le cadre du logiciel libre proposant une possibilité de réaliser des grilles d'accords concises et de façon intuitive, répondant ainsi à un besoin que la plupart des logiciels de gravure musicale ne développent pas ou trop peu. Le principe est de coder selon une syntaxe spécifique qui est exposée ici et qui peut être modulée dans certains cas avec du code HTML.
À toutes fins utiles, le code source est disponible sur le gestionnaire GitHub.
Merci pour toutes contributions et soutiens.
Syntaxe [↑]
Le principe repose sur la création d'un tableau HTML avec pour taille des cellules – par défaut – le width et le height du formulaire. La hauteur ne concerne que les cases de la grille et s'adapte dans les autres cas en fonction du contenu.Les grilles d'accords [↑]
⤍ La première ligne est dédiée à l'indication de mesure (code tableau 1) et au tempo (code tableau 2).
Tableau 1: indication de mesure.
| \44 | | \44d | |
| \22 | | \22d | |
| \34 | | \68 | |
| \32 | | \64 | |
| \24 | | \18 | |
| \128 | | \38 | |
Tableau 2: indication de tempo (exemple pour un tempo de 60 à la noire, coder "tempo=4,=60").
| 1 |  | 1d |  |
| 2 |  | 2d |  |
| 4 |  | 4d |  |
| 8 |  | 8d |  |
⤍ Chaque mesure – ou temps – compris dans une case est délimitée par une paire de "|" avec un premier argument renvoyant au type de case désiré (voir tableau 3).
Tableau 3: dénominations des cases.
| \a |  | \la |  | \fa |  | \ra |  |
| \b |  | \lb |  | \fb |  | \rb |  |
| \c |  | \lc |  | \fc |  | \rc |  |
| \d |  | \ld |  | \fd |  | \rd |  |
| \e |  | \le |  | \fe |  | \re |  |
| \f |  | \lf |  | \ff |  | \rf |  |
| \g |  | \lg |  | \fg |  | \rg |  |
| \cl |  | \cr |  | \ct |  | \cb |  |
⤍ Les lignes de reprise alternatives numérotées sont codées de la façon suivante: "rep=1@" pour la première reprise et "rep=2@" pour la deuxième reprise.
⤍ Il est possible d'utiliser la syntaxe HTML (comme "<sup></sup>" pour exposant et "<sub></sub>" pour indice), notamment pour qualifier certains accords.
⤍ Pour ajuster les accords dans les cases, utiliser le symbol "_" – qui est l'équivalent de l'entité HTML " ".
⤍ Chaque ligne est délimitée par un retour à la ligne.
⤍ Pour annoter les cases, écrire le code au-dessus ou au-dessous de la case suivant la syntaxe suivante:
"|!" début de l'annotation (pour une police de type monospace de taille fixe utiliser "|?");
"2>" nombre de cases à fusionner (correspondant dans ce cas à l'attribut HTML "colspan=2");
⤍ Le texte à insérer (possibilité d'utiliser la syntaxe HTML);
⤍ Il est possible d'insérer des lignes de type crescendo (exemple "cres=100px") et decrescendo (exemple "dim=200px") dont la longueur est exprimée en nombre de pixels;
"+" délimitation des cases;
"!|" fin de l'annotation.
⤍ Il est possible d'insérer un symbole séparateur de section en codant sur une ligne "|//|".
Tableau 4: correspondance des symboles musicaux (class="Chord4tab").
| 1 | 1 | 2 | 2 | 3 | 3 | ||
| 4 | 4 | 5 | 5 | 6 | 6 | ||
| 7 | 7 | 8 | 8 | 9 | 9 | ||
| w | w | A | A | s | s | ||
| W | W | B | B | t | t | ||
| # | # | C | C | U | U | ||
| X | X | D | D | z | z | ||
| n | n | E | E | y | y | ||
| v | v | F | F | Z | Z | ||
| o | o | G | G | Y | Y | ||
| % | % | a | a | u | u | ||
| p | p | b | b | P | P | ||
| h | h | c | c | H | H | ||
| i | i | d | d | I | I | ||
| j | j | e | e | J | J | ||
| k | k | f | f | K | K | ||
| l | l | g | g | L | L | ||
| O | O | Q | Q | S | S |
Les diagrammes d'accords (pour guitare) [↑]
⤍ Le diagramme est définit par un système de coordonnées et de mots clefs à l'intérieur d'un champ délimité par des accolades.
⤍ Le système de coordonnées indique la position des points – position-sur-le-manche+numéro-de-la-corde – ou la position d'un barré – I+nombre-de-cordes-barrées+position-sur-le-manche – selon le schéma ci-dessous.
1 2 3 4 5 6
+---+---+---+---+---+
| | | | | |
A | | | | | | A
| | | | | |
+---+---+---+---+---+
| | | | | |
B | | | | | | B
| | | | | |
+---+---+---+---+---+
| | | | | |
C | | | | | | C
| | | | | |
+---+---+---+---+---+
| | | | | |
D | | | | | | D
| | | | | |
+---+---+---+---+---+
1 2 3 4 5 6
⤍ Les mots clefs définissent une des particularités suivantes:
⤍ la position de l'accord sur le manche peut être précisé en ajoutant entre parenthèses le numéro de la frette sur le manche suivi de la position dans le diagramme;
⤍ les cordes à vides sont définit par O+numéro-de-la-corde (la position d'un éventuel capodastre peut être définit par le numéro de la frette sur le manche entre crochet);
⤍ les cordes non jouées sont définit par X+numéro-de-la-corde;
⤍ LS = position « paysage » (la position « portrait » est définit par défaut).
⤍ Le nom de l'accord peut être ajouté en tapant ":" après les accolades suivi de la dénomination de l'accord selon les symboles définit au tableau 4 (à l'exception du symbole de séparation "/" qui doit être remplacer par ",").
Attention, le nom de l'accord du diagramme ne supporte pas la syntaxe HTML.
Note : pour nommer les accords de guitare à partir de la position des doigts sur le manche, j'ai relevé deux sites proposant de le faire en ligne: zikinf.com et boiteachansons.net.
Diwar Les Coet [↑]
Illustration des possibilités qu'offrent l'application Chord Chart sur l'une de mes compositions.Résultat
Codage
-✂---------------
\24 tempo=2, ca 63
|! 1> !|
|\la Gm||\a %||\a Ew||\a Gm||\a Ew||\a D||\a Ew rep=1@||\ra D|
|\cl ||\x ||\x ||\x ||\x ||\x ||\a D rep=2@||\a Gm|
|\la D||\a %||\a Gm||\ra %|
|\a Ew||\a %||\a Gm||\a %||\a Ew||\a D||\a Gm||\fa %|
|! 1> _ !|
|//|
|? 4>_VAR. 1!|
|! 1> {LS (3 B) I6B D2 D3}:Gm + 1> {LS (6 B) I6B X1 I4D}:Ew + 1> {LS (5 B) I6B X1 I4D}:D + 1> {LS (3 B) I6B X1 D3 D4 C5}:Cm + 1> {LS (9 C) X1 X6 C2 D3 B4 D5}:F#Y7 + 1> {LS (3 C) X1 C2 D3 B4 D5}:CY7 + 1> {LS (5 D) X1 D2 D3 B4 D5}:Gm6 + 1> {LS (10 B) B1 X2 B3 C4 C5 X6}:D7#5 !|
|! 1> _ !|
|\la Gm||\a %||\a Ew||\a Gm||\a Ew||\a D||\a Cm rep=1@||\ra D|
|\cl ||\x ||\x ||\x ||\x ||\x ||\a F#Y7 rep=2@||\a Gm|
|! 2> __tremolo + 2> __sim. !|
|\la CY7||\a %||\a Gm6||\ra %|
|! 2> __cres=75px _dim=75px + 2> __cres=75px _dim=75px !|
|! 1> !|
|\a Ew||\a %||\a Gm||\a %||\a Ew||\a D7#5||\a Gm||\fa h|
|! 1> _ !|
|//|
|? 4>_VAR. 2!|
|! 1> {LS (3 B) B1 D2 D3 X4 X5 X6}:G(m) + 1> {LS (3 A) X6 X5 X4 A1 D2 C3}:Ew,g + 1> {LS (5 C) C1 D2 B3 X4 X5 X6}:AY + 1> {LS (5 C) C1 C2 B3 X4 X5 X6}:D,a + 1> {LS (5 D) D1 B2 C3 X4 X5 X6}:AY + 1> {LS (6 C) C1 B2 B3 X4 X5 X6}:Gm,bw + 1> {LS (6 B) X1 X6 I6B I4D}:Ew + 1> {LS (3 B) I6B D2 D3}:Gm !|
|! 1> _ !|
|\la G(m)||\a %||\a Ew/g||\a %||\a %||\a AY||\a % rep=1@||\ra D/a|
|\cl ||\x ||\x ||\x ||\x ||\x ||\a AY rep=2@||\a h|
|\la AY||\a %||\a Gm/bw||\ra %|
|\a Ew||\a h||\a Gm||\a h||\a Gm/bw||\a %||\a %||\fa %|
|! 4> + 4> __p cres=295px fff !|
|! 1> _ !|
|//|
|? 4>_VAR. 3!|
|! 4> _Capodastre 5e case !|
|! 1> {X1 LS X2 O3 (7 B) [5] B4 C5 A6}:Gm + 1> {LS (7 B) X1 X2 O3 [5] C4 C5 O6}:Ew(7)w5 + 1> {LS (7 B) [5] X1 O2 I4B}:D(6) + 1> {LS (7 B) [5] X1 X2 O3 O4 C5 C6}:Cm + 1> {LS (7 B) [5] X1 O2 B3 C4 B5 C6}:AY7,d + 1> {LS (12 D) [5] X1 O2 D3 D4 C5 B6}:Gm + 1> {LS (12 D) [5] X1 X2 O3 D4 C5 C6}:Ew + 1> {LS (12 D) [5] X1 X2 O3 D4 C5 B6}:Gm !|
|! 1> _ !|
|\la Gm||\a %||\a Ew(7)w5||\a Gm||\a Ew(7)w5||\a D(6)||\a Cm rep=1@||\ra D(6)|
|\cl ||\x ||\x ||\x ||\x ||\x ||\a D(6) rep=2@||\a Gm|
|\la AY7/d||\a %||\a Gm||\ra %|
|\a Ew||\a %||\a Gm||\a %||\a Ew(7)w5||\a D(6)||\a Gm||\fa %|
|! 1> _ !|
|//|
|? 4>_VAR. 4!|
|! 4> _Capodastre 3e case !|
|! 1> {LS (5 B) [3] O1 B2 B3 O4 O5 O6}:Gm + 1> {LS (7 C) [3] O1 B2 D3 D4 O5 O6}:Ew7M,g + 1> {LS (5 B) [3] B2 D3 D4 O5 O6}:Ds4 + 1> {LS (5 B) [3] X1 O2 B3 B4 O5 O6}:Cs2 + 1> {LS (7 B) [3] C1 D2 B3 B4 O5 O6}:D7U11 + 1> {LS (5 B) [3] C2 D3 D4 O5 O6}:Am7w5 + 1> {LS (5 B) [3] B1 B2 D3 D4 O5 O6}:Ds4,a + 1> {LS (12 D) [3] O1 D2 D3 C4 O5 O6}:D,g !|
|! 1> _ !|
|\la Gm||\a %||\a Ew7M/g||\a Gm||\a Ew7M/g||\a Ds4 rep=1@||\a Cs2||\ra D7U11|
|\cl ||\x ||\x ||\x ||\x ||\a Am7w5 rep=2@||\a Ds4/a||\a Gm|
|\la D/g||\a %||\a G(m)||\ra %|
|\a Ew7M/g||\a %||\a G(m)||\a %||\a Ew7M/g||\a Gm/d5||\a Gm||\fa G(m)|
|! 2> _ + 1> {LS (12 D) [3] O1 B2 D3 D4 O5 O6}:G(m) + 2> _ + 1> {LS (12 D) [3] B1 D2 D3 O4 O5 O6}:Gm,d5 !|
-✂---------------
Liste d'accords [↑]
Cette liste d'accords a été réalisé sur l'initiative de Vincent Gay. Il est à noter que la dénomination est de l'ordre du conventionnelle et peut varier suivant les habitudes de chacun (par exemple ∆ versus M7, ø versus m7b5, ° versus dim, etc...).Les triades
-✂--------------- |! 1> + 4> __Les plus courantes !| |\x ||\a C ||\a Cm ||\a C° ||\a C<sup>s4</sup> | |! 1> Nom + 1> <center>Do</center> + 1> <center>Do mineur</center> + 1> <center>Do diminué</center> + 1> <center>Do sus4</center> !| |? 1> Notes + 1> <center>C E G</center> + 1> <center>C Eb G </center> + 1> <center>C Eb Gb</center> + 1> <center>C F G</center> !| |? 1> ChordChart + 1> <center>C</center> + 1> <center>Cm</center> + 1> <center>C°</center> + 1> <center>C<sup\>s4\</sup\></center> !| |! 1> _ !| |! 1> + 1> __Autres... !| |\x ||\a C+||\a C<sup>w5</sup>||\a Cm+||\a C<sup>s2</sup> | |! 1> Nom + 1> <center>Do augmenté</center> + 1> <center>Do 5<sup>b</sup></center> + 1> <center>Do mineur aug.</center> + 1> <center>Do sus2</center> !| |? 1> Notes + 1> <center>C E G#</center> + 1> <center>C E Gb </center> + 1> <center>C Eb G#</center> + 1> <center>C D G</center> !| |? 1> ChordChart + 1> <center>C+</center> + 1> <center>C<sup\>w5\</sup\></center> + 1> <center>Cm+</center> + 1> <center>C<sup\>s2\</sup\></center> !| -✂---------------
Les accords majeur sixième
-✂--------------- |\x ||\a C6 ||\a C6<sup>9</sup> | |! 1> Nom||! 1> <center>Do 6</center> + 1> <center>Do 6/9</center> !| |? 1> Notes + 1> <center>C E G A</center> + 1> <center>C E G A D </center> !| |? 1> ChordChart + 1> <center>C6</center> + 1> <center>C6<sup\>9\</sup\></center> !| -✂---------------
Les accords majeur septième
-✂--------------- |! 1> + 4> __Les plus courants</ br> !| |\x ||\a Cv ||\a Cv<sup>9</sup> ||\a Cv<sup>#11</sup> ||\a Cv<sup>13</sup> | |! 1> Nom + 1> <center>Do majeur 7</center> + 1> <center>Do majeur 9</center> + 1> <center>Do majeur #11</center> + 1> <center>Do majeur 13</center> !| |? 1> Notes + 1> <center>C E G B</center> + 1> <center>C E G B D</center> + 1> <center>C E G B D F#</center> ||? 1> <center>C E G B D A</center> !| |? 1> ChordChart + 1> <center>Cv</center> + 1> <center>Cv<sup\>9\</sup\></center> + 1> <center>Cv<sup\>#11\</sup\></center> + 1> <center>Cv<sup\>13\</sup\></center> !| -✂---------------
Les accords septième de dominante
-✂--------------- |! 1> + 4> __Les plus courants !| |\x ||\a C7 ||\a C9 ||\a C7<sup>w9</sup> ||\a C7<sup>s4</sup> | |! 1> Nom + 1> <center>Do 7</center> + 1> <center>Do 9</center> + 1> <center>Do 7 b9</center> + 1> <center>Do 7 sus4</center> !| |? 1> Notes + 1> <center>C E G Bb</center> + 1> <center>C E G Bb D</center> + 1> <center>C E G Bb Db</center> + 1> <center>C F G Bb</center> !| |? 1> ChordChart + 1> <center>C7</center> + 1> <center>C9</center> + 1> <center>C7<sup\>w9\</sup\></center> + 1> <center>C7<sup\>s4\</sup\></center> !| |! 1> _ !| |! 1> + 4> __Quelques autres !| |\x ||\a C7<sup>#9</sup> ||\a C7<sup>#11</sup> ||\a C7<sup>w13</sup> ||\a C7<sup>#9w13</sup> | |! 1> Nom + 1> <center>Do 7 #9</center> + 1> <center>Do 7 #11</center> + 1> <center>Do 7 b13</center> + 1> <center>Do 7 #9b13</center> !| |? 1> Notes + 1> <center>C E G Bb D#</center> + 1> <center>C E G Bb D F#</center> + 1> <center>C E G Bb D Ab</center> + 1> <center>C E G Bb D# Ab</center> !| |? 1> ChordChart + 1> <center>C7<sup\>#9\</sup\></center> + 1> <center>C7<sup\>#11\</sup\></center> + 1> <center>C7<sup\>w13\</sup\></center> + 1> <center>C7<sup\>#9w13\</sup\></center> !| -✂---------------
Les accords diminués et augmentés
-✂--------------- |! 1> + 4> __Les plus courants !| |\x ||\a C°<sup>7</sup> ||\a Co ||\a C7+ ||\a C7<sup>t</sup> | |! 1> Nom + 1> <center>Do diminué</center> + 1> <center>Do demi-diminué</center> + 1> <center>Do 7 augmenté</center> + 1> <center>Do 7 altéré</center> !| |? 1> Notes + 1> <center>C Eb Gb Bbb (A)</center> + 1> <center>C Eb Gb Bb</center> + 1> <center>C E G# Bb</center> + 1> <center>C E Gb Bb Db Ab</center> !| |? 1> ChordChart + 1> <center>C°<sup\>7\</sup\></center> + 1> <center>Co</center> + 1> <center>C7+</center> + 1> <center>C7<sup\>t\</sup\></center> !| -✂---------------