lrdlg
736 lines
47 KiB
HTML
736 lines
47 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>_chordlab — manuel d'utilisation</title>
|
||
<style>
|
||
:root{
|
||
--panel:#E0D6C3;
|
||
--panel-2:#D6CBB5;
|
||
--panel-edge:#C9BCA4;
|
||
--module:#26231D;
|
||
--module-2:#332F27;
|
||
--silk:#403A2F;
|
||
--silk-light:#D8CFBB;
|
||
--lcd-bg:#141A12;
|
||
--lcd-amber:#FFB454;
|
||
--lcd-dim:#7A6A3F;
|
||
--led-on:#FFAE33;
|
||
--led-off:#4A4436;
|
||
--accent:#E5482B;
|
||
--key-w:#EFE9DB;
|
||
--key-b:#1C1A16;
|
||
--mono:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono",Menlo,Consolas,monospace;
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
html{scroll-behavior:smooth;font-size:15px}
|
||
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
|
||
body{
|
||
font-family:var(--mono);
|
||
background:#17150F;
|
||
color:var(--silk);
|
||
padding:1.4rem;
|
||
display:flex;justify-content:center;
|
||
}
|
||
.sheet{
|
||
width:100%;max-width:920px;
|
||
background:linear-gradient(178deg,var(--panel) 0%,var(--panel-2) 100%);
|
||
border:1px solid var(--panel-edge);
|
||
border-radius:14px;
|
||
box-shadow:0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5);
|
||
padding:2rem 2.2rem 2.4rem;
|
||
}
|
||
@media(max-width:640px){ body{padding:.6rem} .sheet{padding:1.2rem 1rem} }
|
||
|
||
/* ---------- en-tête ---------- */
|
||
.cover{border-bottom:3px solid var(--silk);padding-bottom:1.1rem;margin-bottom:1.2rem}
|
||
.cover .kicker{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;opacity:.6}
|
||
.cover h1{font-size:2rem;font-weight:800;letter-spacing:.03em;margin:.3rem 0 .2rem}
|
||
.cover h1 em{font-style:normal;color:var(--accent)}
|
||
.cover p{font-size:.78rem;line-height:1.65;max-width:44rem;margin-top:.5rem}
|
||
|
||
/* ---------- sommaire ---------- */
|
||
nav{
|
||
display:flex;flex-wrap:wrap;gap:.4rem;
|
||
margin-bottom:2rem;position:sticky;top:.6rem;z-index:5;
|
||
background:var(--panel);padding:.5rem;border-radius:9px;
|
||
border:1px solid var(--panel-edge);
|
||
box-shadow:0 4px 14px rgba(0,0,0,.15);
|
||
}
|
||
nav a{
|
||
font-size:.6rem;letter-spacing:.08em;text-decoration:none;
|
||
color:var(--silk-light);background:var(--module-2);
|
||
border:1px solid #4A4436;border-radius:5px;
|
||
padding:.3rem .55rem;white-space:nowrap;
|
||
}
|
||
nav a:hover,nav a:focus-visible{border-color:var(--led-on);color:var(--led-on);outline:none}
|
||
|
||
/* ---------- sections ---------- */
|
||
section{margin-bottom:3rem}
|
||
.shead{display:flex;align-items:baseline;gap:.7rem;border-bottom:2px solid var(--silk);padding-bottom:.4rem;margin-bottom:1rem}
|
||
.shead .num{
|
||
font-size:.72rem;font-weight:800;color:#FFF3E4;background:var(--accent);
|
||
border-radius:4px;padding:.15rem .45rem;letter-spacing:.05em;
|
||
}
|
||
.shead h2{font-size:1.05rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
|
||
h3{font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:1.3rem 0 .5rem}
|
||
p{font-size:.78rem;line-height:1.7;margin-bottom:.7rem;max-width:46rem}
|
||
strong{font-weight:800}
|
||
code{background:var(--module);color:var(--lcd-amber);border-radius:4px;padding:.06rem .3rem;font-size:.72rem}
|
||
|
||
/* ---------- figures (modules rendus + légendes) ---------- */
|
||
figure{
|
||
background:var(--module);
|
||
border-radius:10px;
|
||
padding:1.1rem;
|
||
margin:1rem 0;
|
||
box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.25);
|
||
position:relative;
|
||
}
|
||
figcaption{
|
||
font-size:.6rem;color:var(--silk-light);opacity:.55;
|
||
letter-spacing:.12em;text-transform:uppercase;margin-top:.8rem;
|
||
}
|
||
.legend{list-style:none;margin:.8rem 0 0;display:grid;gap:.35rem}
|
||
.legend li{font-size:.72rem;line-height:1.55;color:var(--silk-light);display:flex;gap:.5rem;align-items:baseline}
|
||
.legend li p, .legend li span.t{color:var(--silk-light)}
|
||
.dot{
|
||
flex:none;width:16px;height:16px;border-radius:50%;
|
||
background:var(--led-on);color:#26231D;
|
||
font-size:.62rem;font-weight:800;
|
||
display:inline-flex;align-items:center;justify-content:center;
|
||
box-shadow:0 0 8px rgba(255,174,51,.5);
|
||
transform:translateY(2px);
|
||
}
|
||
.dot.inplace{position:absolute;z-index:3}
|
||
|
||
/* ---------- rendus hardware réutilisables ---------- */
|
||
.hwbtn{
|
||
background:var(--module-2);border:1px solid #4A4436;border-radius:7px;
|
||
color:var(--silk-light);font-size:.68rem;font-weight:600;
|
||
padding:.55rem .2rem .45rem;
|
||
display:flex;flex-direction:column;align-items:center;gap:.32rem;
|
||
min-width:56px;
|
||
}
|
||
.led{width:7px;height:7px;border-radius:50%;background:var(--led-off);box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
|
||
.on .led{background:var(--led-on);box-shadow:0 0 8px var(--led-on)}
|
||
.btnrow{display:flex;gap:.45rem;flex-wrap:wrap}
|
||
.lcd{
|
||
background:var(--lcd-bg);border:3px solid #0B0E0A;border-radius:8px;
|
||
box-shadow:inset 0 0 24px rgba(0,0,0,.8);
|
||
padding:.6rem .9rem;display:inline-block;min-width:220px;
|
||
}
|
||
.lcd .big{font-size:1.5rem;font-weight:700;color:var(--lcd-amber);text-shadow:0 0 12px rgba(255,180,84,.45)}
|
||
.lcd .small{font-size:.62rem;color:var(--lcd-dim);letter-spacing:.1em;margin-top:.15rem}
|
||
.keycap{
|
||
display:inline-block;background:var(--panel);color:var(--silk);
|
||
border:1px solid var(--panel-edge);border-bottom-width:3px;border-radius:5px;
|
||
font-size:.66rem;font-weight:700;padding:.18rem .45rem;margin:0 .1rem;
|
||
}
|
||
.arrow{color:var(--led-on);font-weight:800}
|
||
table{border-collapse:collapse;font-size:.72rem;margin:.6rem 0;width:100%;max-width:46rem}
|
||
th,td{border:1px solid var(--panel-edge);padding:.4rem .55rem;text-align:left;line-height:1.5}
|
||
th{background:var(--module);color:var(--silk-light);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
|
||
td b{font-weight:800}
|
||
.tip{
|
||
border-left:4px solid var(--led-on);
|
||
background:rgba(255,174,51,.09);
|
||
border-radius:0 7px 7px 0;
|
||
padding:.6rem .8rem;font-size:.72rem;line-height:1.6;
|
||
margin:.8rem 0;max-width:46rem;
|
||
}
|
||
.warn{border-left-color:var(--accent);background:rgba(229,72,43,.08)}
|
||
svg text{font-family:var(--mono)}
|
||
footer{border-top:2px solid var(--silk);padding-top:.8rem;font-size:.6rem;opacity:.55;letter-spacing:.1em;text-align:right}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="sheet">
|
||
|
||
<div class="cover">
|
||
<div class="kicker">manuel d'utilisation · rev. 2.4 · <a href="tuto_en.html" style="color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent)">English version</a></div>
|
||
<h1><em>_chordlab</em></h1>
|
||
<p>Machine à accords et à progressions. Le principe tient en une phrase : <strong>vous ne jouez pas les notes d'un accord, vous le décrivez</strong> — une fondamentale, un type, des tensions — et la machine fait le reste, jusqu'à vos synthés ou votre DAW.</p>
|
||
</div>
|
||
|
||
<nav aria-label="Sommaire">
|
||
<a href="#s1">01 Interface</a>
|
||
<a href="#s2">02 Premier accord</a>
|
||
<a href="#s3">03 Tensions</a>
|
||
<a href="#s4">04 Voicing</a>
|
||
<a href="#s5">05 Key Mode</a>
|
||
<a href="#s6">06 Progression</a>
|
||
<a href="#s7">07 Performance</a>
|
||
<a href="#s8">08 MIDI live</a>
|
||
<a href="#s9">09 Export & session</a>
|
||
<a href="#s10">10 Raccourcis</a>
|
||
</nav>
|
||
|
||
<!-- ============ 01 INTERFACE ============ -->
|
||
<section id="s1">
|
||
<div class="shead"><span class="num">01</span><h2>La face avant</h2></div>
|
||
<p>L'écran est organisé comme le panneau d'une machine hardware. Six zones, toujours au même endroit :</p>
|
||
|
||
<figure>
|
||
<div style="display:grid;grid-template-columns:1fr;gap:.5rem;position:relative">
|
||
<div style="background:var(--lcd-bg);border-radius:6px;padding:.6rem .8rem;position:relative">
|
||
<span style="color:var(--lcd-amber);font-weight:700;font-size:.95rem">Cm7</span>
|
||
<span style="color:var(--lcd-dim);font-size:.58rem;margin-left:.8rem">C4 · D#4 · G4 · A#4</span>
|
||
<span class="dot inplace" style="top:-8px;left:-8px">1</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1.1fr 1.6fr .9fr;gap:.5rem">
|
||
<div style="background:var(--module-2);border:1px solid #4A4436;border-radius:6px;padding:.55rem;font-size:.58rem;color:var(--silk-light);position:relative;line-height:1.9">
|
||
CHORD TYPE<br>TENSIONS<br>ALTÉRATIONS
|
||
<span class="dot inplace" style="top:-8px;left:-8px">2</span>
|
||
</div>
|
||
<div style="background:var(--module-2);border:1px solid #4A4436;border-radius:6px;padding:.55rem;font-size:.58rem;color:var(--silk-light);position:relative;display:flex;align-items:center;justify-content:center">
|
||
ROOT — clavier 1 octave
|
||
<span class="dot inplace" style="top:-8px;left:-8px">3</span>
|
||
</div>
|
||
<div style="background:var(--module-2);border:1px solid #4A4436;border-radius:6px;padding:.55rem;font-size:.58rem;color:var(--silk-light);position:relative;line-height:1.9">
|
||
VOICING<br>BASS · KEY
|
||
<span class="dot inplace" style="top:-8px;left:-8px">4</span>
|
||
</div>
|
||
</div>
|
||
<div style="background:var(--module-2);border:1px solid #4A4436;border-radius:6px;padding:.55rem;font-size:.58rem;color:var(--silk-light);position:relative">
|
||
PROGRESSION — slots · ADD · PLAY · perf · BPM
|
||
<span class="dot inplace" style="top:-8px;left:-8px">5</span>
|
||
</div>
|
||
<div style="background:var(--module-2);border:1px solid #4A4436;border-radius:6px;padding:.55rem;font-size:.58rem;color:var(--silk-light);position:relative">
|
||
MIDI OUT · EXPORT .MID · SESSION
|
||
<span class="dot inplace" style="top:-8px;left:-8px">6</span>
|
||
</div>
|
||
</div>
|
||
<ul class="legend">
|
||
<li><span class="dot">1</span><span class="t"><strong>LCD</strong> — votre référence permanente : nom de l'accord, notes réelles, état des modes.</span></li>
|
||
<li><span class="dot">2</span><span class="t"><strong>Description de l'accord</strong> — type (un seul actif) + tensions et altérations (empilables).</span></li>
|
||
<li><span class="dot">3</span><span class="t"><strong>Fondamentale</strong> — la seule chose que vous « jouez ».</span></li>
|
||
<li><span class="dot">4</span><span class="t"><strong>Mise en forme</strong> — voicing, drop, basse, tonalité.</span></li>
|
||
<li><span class="dot">5</span><span class="t"><strong>Séquence</strong> — la progression et sa lecture.</span></li>
|
||
<li><span class="dot">6</span><span class="t"><strong>Entrées / sorties</strong> — le pont vers le studio.</span></li>
|
||
</ul>
|
||
<figcaption>fig. 1 — cartographie de la face avant</figcaption>
|
||
</figure>
|
||
</section>
|
||
|
||
<!-- ============ 02 PREMIER ACCORD ============ -->
|
||
<section id="s2">
|
||
<div class="shead"><span class="num">02</span><h2>Votre premier accord</h2></div>
|
||
<p>Trois gestes : choisir un <strong>type</strong>, presser une <strong>fondamentale</strong>, lire le <strong>LCD</strong>. L'accord sonne immédiatement.</p>
|
||
|
||
<figure>
|
||
<div style="display:flex;gap:1.4rem;flex-wrap:wrap;align-items:flex-start">
|
||
<div style="position:relative">
|
||
<div style="font-size:.55rem;color:var(--silk-light);opacity:.5;letter-spacing:.18em;margin-bottom:.4rem">CHORD TYPE</div>
|
||
<div class="btnrow">
|
||
<div class="hwbtn"><span class="led"></span>DIM</div>
|
||
<div class="hwbtn on"><span class="led"></span>MIN</div>
|
||
<div class="hwbtn"><span class="led"></span>MAJ</div>
|
||
<div class="hwbtn"><span class="led"></span>SUS4</div>
|
||
</div>
|
||
<span class="dot inplace" style="top:14px;left:60px">1</span>
|
||
</div>
|
||
<div style="position:relative">
|
||
<div style="font-size:.55rem;color:var(--silk-light);opacity:.5;letter-spacing:.18em;margin-bottom:.4rem">ROOT</div>
|
||
<svg width="238" height="96" viewBox="0 0 238 96" role="img" aria-label="Clavier une octave, touche C pressée">
|
||
<!-- touches blanches -->
|
||
<g stroke="#B9AE97" stroke-width="1">
|
||
<rect x="1" y="1" width="33" height="94" fill="#D9CFBA"/>
|
||
<rect x="34" y="1" width="33" height="94" fill="var(--key-w)"/>
|
||
<rect x="67" y="1" width="33" height="94" fill="var(--key-w)"/>
|
||
<rect x="100" y="1" width="33" height="94" fill="var(--key-w)"/>
|
||
<rect x="133" y="1" width="33" height="94" fill="var(--key-w)"/>
|
||
<rect x="166" y="1" width="33" height="94" fill="var(--key-w)"/>
|
||
<rect x="199" y="1" width="33" height="94" fill="var(--key-w)"/>
|
||
</g>
|
||
<!-- touches noires -->
|
||
<g fill="var(--key-b)">
|
||
<rect x="24" y="1" width="20" height="56" rx="3"/>
|
||
<rect x="57" y="1" width="20" height="56" rx="3"/>
|
||
<rect x="123" y="1" width="20" height="56" rx="3"/>
|
||
<rect x="156" y="1" width="20" height="56" rx="3"/>
|
||
<rect x="189" y="1" width="20" height="56" rx="3"/>
|
||
</g>
|
||
<text x="17" y="88" font-size="9" fill="#8A8070" text-anchor="middle">C</text>
|
||
</svg>
|
||
<span class="dot inplace" style="top:52px;left:6px">2</span>
|
||
</div>
|
||
<div style="position:relative">
|
||
<div style="font-size:.55rem;color:var(--silk-light);opacity:.5;letter-spacing:.18em;margin-bottom:.4rem">LCD</div>
|
||
<div class="lcd">
|
||
<div class="big">Cm</div>
|
||
<div class="small">C4 · D#4 · G4</div>
|
||
</div>
|
||
<span class="dot inplace" style="top:14px;left:-8px">3</span>
|
||
</div>
|
||
</div>
|
||
<ul class="legend">
|
||
<li><span class="dot">1</span><span class="t">Sélectionnez <strong>MIN</strong> — la LED s'allume, un seul type actif à la fois.</span></li>
|
||
<li><span class="dot">2</span><span class="t">Pressez <strong>C</strong> (souris, tactile, ou touche <span class="keycap">A</span> du clavier PC).</span></li>
|
||
<li><span class="dot">3</span><span class="t">Le LCD confirme : <strong>Cm</strong>, avec les notes réelles et leurs octaves.</span></li>
|
||
</ul>
|
||
<figcaption>fig. 2 — le geste fondamental : type + fondamentale → accord</figcaption>
|
||
</figure>
|
||
|
||
<h3>Les huit types</h3>
|
||
<table>
|
||
<tr><th>Bouton</th><th>Accord</th><th>Intervalles</th><th>Caractère</th></tr>
|
||
<tr><td><b>DIM</b></td><td>diminué</td><td>1 · ♭3 · ♭5</td><td>tension, passage</td></tr>
|
||
<tr><td><b>MIN</b></td><td>mineur</td><td>1 · ♭3 · 5</td><td>sombre, mélancolique</td></tr>
|
||
<tr><td><b>MAJ</b></td><td>majeur</td><td>1 · 3 · 5</td><td>stable, lumineux</td></tr>
|
||
<tr><td><b>AUG</b></td><td>augmenté</td><td>1 · 3 · ♯5</td><td>suspendu, étrange</td></tr>
|
||
<tr><td><b>SUS2</b></td><td>suspendu 2</td><td>1 · 2 · 5</td><td>ouvert, aérien</td></tr>
|
||
<tr><td><b>SUS4</b></td><td>suspendu 4</td><td>1 · 4 · 5</td><td>attente, résolution</td></tr>
|
||
<tr><td><b>5</b></td><td>power chord</td><td>1 · 5</td><td>neutre, massif</td></tr>
|
||
<tr><td><b>m♭6</b></td><td>mineur sixte bémol</td><td>1 · ♭3 · ♭6</td><td>dramatique, ciné</td></tr>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- ============ 03 TENSIONS ============ -->
|
||
<section id="s3">
|
||
<div class="shead"><span class="num">03</span><h2>Tensions & altérations</h2></div>
|
||
<p>Les deux rangées inférieures s'<strong>empilent</strong> librement sur le type : plusieurs LEDs allumées en même temps. Les <strong>tensions</strong> ajoutent des notes ; les <strong>altérations</strong> modifient ou retirent des notes existantes.</p>
|
||
|
||
<figure>
|
||
<div style="font-size:.55rem;color:var(--silk-light);opacity:.5;letter-spacing:.18em;margin-bottom:.4rem">TENSIONS — ajoutent</div>
|
||
<div class="btnrow" style="margin-bottom:.8rem">
|
||
<div class="hwbtn"><span class="led"></span>6</div>
|
||
<div class="hwbtn on"><span class="led"></span>m7</div>
|
||
<div class="hwbtn"><span class="led"></span>M7</div>
|
||
<div class="hwbtn on"><span class="led"></span>9</div>
|
||
<div class="hwbtn"><span class="led"></span>♭9</div>
|
||
<div class="hwbtn"><span class="led"></span>♯9</div>
|
||
<div class="hwbtn"><span class="led"></span>11</div>
|
||
<div class="hwbtn"><span class="led"></span>♯11</div>
|
||
</div>
|
||
<div style="font-size:.55rem;color:var(--silk-light);opacity:.5;letter-spacing:.18em;margin-bottom:.4rem">ALTÉRATIONS — modifient / retirent</div>
|
||
<div class="btnrow">
|
||
<div class="hwbtn"><span class="led"></span>13</div>
|
||
<div class="hwbtn"><span class="led"></span>♭5</div>
|
||
<div class="hwbtn"><span class="led"></span>♯5</div>
|
||
<div class="hwbtn"><span class="led"></span>no3</div>
|
||
</div>
|
||
<div style="margin-top:1rem;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap">
|
||
<span style="font-size:.68rem;color:var(--silk-light)">MIN + m7 + 9 pressés →</span>
|
||
<div class="lcd"><div class="big">Cm7(9)</div><div class="small">C4 · D#4 · G4 · A#4 · D5</div></div>
|
||
</div>
|
||
<figcaption>fig. 3 — l'empilement : le m9 des nappes deep en deux LEDs</figcaption>
|
||
</figure>
|
||
|
||
<h3>Recettes remarquables</h3>
|
||
<table>
|
||
<tr><th>Combinaison</th><th>Résultat</th><th>Pourquoi</th></tr>
|
||
<tr><td><b>DIM + 6</b></td><td>Cdim7</td><td>la sixte sur un diminué <em>est</em> la 7e diminuée</td></tr>
|
||
<tr><td><b>DIM + m7</b></td><td>Cø7</td><td>le demi-diminué, pilier du ii–V mineur</td></tr>
|
||
<tr><td><b>MAJ + m7 + ♯9</b></td><td>C7(♯9)</td><td>l'accord « Hendrix »</td></tr>
|
||
<tr><td><b>type + no3</b></td><td>accord ouvert</td><td>ni majeur ni mineur — parfait en ambient</td></tr>
|
||
<tr><td><b>m7 + M7</b></td><td>WTF?</td><td>le LCD vous prévient. Vous êtes libre.</td></tr>
|
||
</table>
|
||
<div class="tip">♭5 et ♯5 <strong>remplacent</strong> la quinte au lieu de s'ajouter : C7♭5 contient bien F♯, pas G + F♯. C'est ce qui les rend directement utilisables.</div>
|
||
</section>
|
||
|
||
<!-- ============ 04 VOICING ============ -->
|
||
<section id="s4">
|
||
<div class="shead"><span class="num">04</span><h2>Le voicing</h2></div>
|
||
<p>Le même accord peut être serré, ouvert, grave, aérien. Trois outils indépendants se cumulent — dans cet ordre : <strong>rotation → drop → basse slash</strong>.</p>
|
||
|
||
<h3>4.1 · Le knob de rotation (±8)</h3>
|
||
<p>Chaque cran fait <strong>tourner</strong> l'accord : à +1, la note la plus grave remonte d'une octave. À −1, la plus aiguë descend. Voici Cmaj7 :</p>
|
||
|
||
<figure>
|
||
<svg width="100%" viewBox="0 0 640 220" role="img" aria-label="Rotation du voicing : quatre positions de Cmaj7">
|
||
<!-- axe hauteur -->
|
||
<text x="10" y="16" font-size="10" fill="#7A6A3F">aigu ↑</text>
|
||
<text x="10" y="208" font-size="10" fill="#7A6A3F">grave ↓</text>
|
||
<!-- colonnes : chaque note = bloc. y = 200 - (midi-55)*4 -->
|
||
<!-- V0: C4 E4 G4 B4 = 60 64 67 71 -->
|
||
<g>
|
||
<text x="110" y="212" font-size="11" fill="#D8CFBB" text-anchor="middle">voicing 0</text>
|
||
<rect x="80" y="176" width="60" height="14" rx="3" fill="#FFAE33"/><text x="110" y="187" font-size="10" fill="#26231D" text-anchor="middle" font-weight="700">C4</text>
|
||
<rect x="80" y="160" width="60" height="14" rx="3" fill="#5C543F"/><text x="110" y="171" font-size="10" fill="#E0D6C3" text-anchor="middle">E4</text>
|
||
<rect x="80" y="144" width="60" height="14" rx="3" fill="#5C543F"/><text x="110" y="155" font-size="10" fill="#E0D6C3" text-anchor="middle">G4</text>
|
||
<rect x="80" y="128" width="60" height="14" rx="3" fill="#5C543F"/><text x="110" y="139" font-size="10" fill="#E0D6C3" text-anchor="middle">B4</text>
|
||
</g>
|
||
<!-- flèche : C4 saute en C5 -->
|
||
<path d="M 143 183 C 190 183 190 78 232 78" stroke="#E5482B" stroke-width="2.5" fill="none" marker-end="url(#arr)"/>
|
||
<text x="188" y="128" font-size="10" fill="#E5482B" text-anchor="middle">+12</text>
|
||
<defs><marker id="arr" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6 Z" fill="#E5482B"/></marker></defs>
|
||
<!-- V+1: E4 G4 B4 C5 -->
|
||
<g>
|
||
<text x="270" y="212" font-size="11" fill="#D8CFBB" text-anchor="middle">voicing +1</text>
|
||
<rect x="240" y="160" width="60" height="14" rx="3" fill="#5C543F"/><text x="270" y="171" font-size="10" fill="#E0D6C3" text-anchor="middle">E4</text>
|
||
<rect x="240" y="144" width="60" height="14" rx="3" fill="#5C543F"/><text x="270" y="155" font-size="10" fill="#E0D6C3" text-anchor="middle">G4</text>
|
||
<rect x="240" y="128" width="60" height="14" rx="3" fill="#5C543F"/><text x="270" y="139" font-size="10" fill="#E0D6C3" text-anchor="middle">B4</text>
|
||
<rect x="240" y="72" width="60" height="14" rx="3" fill="#FFAE33"/><text x="270" y="83" font-size="10" fill="#26231D" text-anchor="middle" font-weight="700">C5</text>
|
||
</g>
|
||
<!-- flèche E4 -> E5 -->
|
||
<path d="M 303 167 C 350 167 350 44 392 44" stroke="#E5482B" stroke-width="2.5" fill="none" marker-end="url(#arr)"/>
|
||
<text x="348" y="102" font-size="10" fill="#E5482B" text-anchor="middle">+12</text>
|
||
<!-- V+2: G4 B4 C5 E5 -->
|
||
<g>
|
||
<text x="430" y="212" font-size="11" fill="#D8CFBB" text-anchor="middle">voicing +2</text>
|
||
<rect x="400" y="144" width="60" height="14" rx="3" fill="#5C543F"/><text x="430" y="155" font-size="10" fill="#E0D6C3" text-anchor="middle">G4</text>
|
||
<rect x="400" y="128" width="60" height="14" rx="3" fill="#5C543F"/><text x="430" y="139" font-size="10" fill="#E0D6C3" text-anchor="middle">B4</text>
|
||
<rect x="400" y="72" width="60" height="14" rx="3" fill="#5C543F"/><text x="430" y="83" font-size="10" fill="#E0D6C3" text-anchor="middle">C5</text>
|
||
<rect x="400" y="38" width="60" height="14" rx="3" fill="#FFAE33"/><text x="430" y="49" font-size="10" fill="#26231D" text-anchor="middle" font-weight="700">E5</text>
|
||
</g>
|
||
<!-- V-1: B3 C4 E4 G4 -->
|
||
<g>
|
||
<text x="590" y="212" font-size="11" fill="#D8CFBB" text-anchor="middle">voicing −1</text>
|
||
<rect x="560" y="192" width="60" height="14" rx="3" fill="#FFAE33"/><text x="590" y="203" font-size="10" fill="#26231D" text-anchor="middle" font-weight="700">B3</text>
|
||
<rect x="560" y="176" width="60" height="14" rx="3" fill="#5C543F"/><text x="590" y="187" font-size="10" fill="#E0D6C3" text-anchor="middle">C4</text>
|
||
<rect x="560" y="160" width="60" height="14" rx="3" fill="#5C543F"/><text x="590" y="171" font-size="10" fill="#E0D6C3" text-anchor="middle">E4</text>
|
||
<rect x="560" y="144" width="60" height="14" rx="3" fill="#5C543F"/><text x="590" y="155" font-size="10" fill="#E0D6C3" text-anchor="middle">G4</text>
|
||
</g>
|
||
</svg>
|
||
<figcaption>fig. 4 — la rotation : la note ambre est celle qui vient de bouger d'une octave</figcaption>
|
||
</figure>
|
||
<p>Manipulation : glisser verticalement sur le knob, boutons <code>−</code> <code>0</code> <code>+</code>, flèches <span class="keycap">←</span><span class="keycap">→</span>, double-clic pour revenir à 0. Le même accord à +3 et à −2 raconte deux histoires différentes.</p>
|
||
|
||
<h3>4.2 · Drop voicings</h3>
|
||
<p>Appliqués <strong>après</strong> la rotation, ils écartent les voix comme le ferait un arrangeur :</p>
|
||
<figure>
|
||
<svg width="100%" viewBox="0 0 640 200" role="img" aria-label="Comparaison des drop voicings sur Cmaj7">
|
||
<text x="10" y="16" font-size="10" fill="#7A6A3F">aigu ↑</text>
|
||
<text x="10" y="192" font-size="10" fill="#7A6A3F">grave ↓</text>
|
||
<!-- close: 60 64 67 71 → y=180-(m-48)*5 -->
|
||
<g>
|
||
<text x="140" y="196" font-size="11" fill="#D8CFBB" text-anchor="middle">close</text>
|
||
<circle cx="140" cy="120" r="7" fill="#FFAE33"/><text x="158" y="124" font-size="10" fill="#D8CFBB">C4</text>
|
||
<circle cx="140" cy="100" r="7" fill="#FFAE33"/><text x="158" y="104" font-size="10" fill="#D8CFBB">E4</text>
|
||
<circle cx="140" cy="85" r="7" fill="#FFAE33"/><text x="158" y="89" font-size="10" fill="#D8CFBB">G4</text>
|
||
<circle cx="140" cy="65" r="7" fill="#FFAE33"/><text x="158" y="69" font-size="10" fill="#D8CFBB">B4</text>
|
||
</g>
|
||
<!-- drop2: 55 60 64 71 -->
|
||
<g>
|
||
<text x="330" y="196" font-size="11" fill="#D8CFBB" text-anchor="middle">drop 2</text>
|
||
<circle cx="330" cy="145" r="7" fill="#E5482B"/><text x="348" y="149" font-size="10" fill="#D8CFBB">G3 ↓</text>
|
||
<circle cx="330" cy="120" r="7" fill="#FFAE33"/><text x="348" y="124" font-size="10" fill="#D8CFBB">C4</text>
|
||
<circle cx="330" cy="100" r="7" fill="#FFAE33"/><text x="348" y="104" font-size="10" fill="#D8CFBB">E4</text>
|
||
<circle cx="330" cy="65" r="7" fill="#FFAE33"/><text x="348" y="69" font-size="10" fill="#D8CFBB">B4</text>
|
||
</g>
|
||
<!-- spread: 60 76 67(+? ) spread on triad 60 64 67 → 60 67 76 -->
|
||
<g>
|
||
<text x="520" y="196" font-size="11" fill="#D8CFBB" text-anchor="middle">spread</text>
|
||
<circle cx="520" cy="120" r="7" fill="#FFAE33"/><text x="538" y="124" font-size="10" fill="#D8CFBB">C4</text>
|
||
<circle cx="520" cy="85" r="7" fill="#FFAE33"/><text x="538" y="89" font-size="10" fill="#D8CFBB">G4</text>
|
||
<circle cx="520" cy="40" r="7" fill="#E5482B"/><text x="538" y="44" font-size="10" fill="#D8CFBB">E5 ↑</text>
|
||
</g>
|
||
</svg>
|
||
<ul class="legend">
|
||
<li><span class="dot" style="background:#E5482B;box-shadow:none;color:#FFF3E4">↕</span><span class="t">Les notes rouges sont celles déplacées d'une octave par le mode drop.</span></li>
|
||
</ul>
|
||
<figcaption>fig. 5 — close (serré) · drop 2 (le voicing jazz) · spread (nappe large)</figcaption>
|
||
</figure>
|
||
<table>
|
||
<tr><th>Mode</th><th>Effet</th><th>Usage</th></tr>
|
||
<tr><td><b>close</b></td><td>position serrée (rien)</td><td>défaut</td></tr>
|
||
<tr><td><b>drop 2</b></td><td>2e voix depuis le haut → −1 oct</td><td>le standard jazz</td></tr>
|
||
<tr><td><b>drop 3</b></td><td>3e voix depuis le haut → −1 oct</td><td>grands écarts, guitare</td></tr>
|
||
<tr><td><b>drop 2+4</b></td><td>deux voix descendues</td><td>très ouvert, cinématique</td></tr>
|
||
<tr><td><b>spread</b></td><td>une voix sur deux → +1 oct</td><td>nappes larges, ambient</td></tr>
|
||
</table>
|
||
|
||
<h3>4.3 · Basse et accords slash</h3>
|
||
<p>Le bouton <strong>BASS</strong> active une note tenue (−1 ou −2 octaves) sur son <strong>propre canal MIDI</strong>. Le sélecteur <strong>basse /</strong> choisit quelle note de l'accord elle joue : fondamentale, tierce, quinte ou septième — le LCD affiche alors <code>C/E</code>. La détection s'adapte au type : tierce mineure sur un accord mineur, quinte diminuée sur un ♭5.</p>
|
||
</section>
|
||
|
||
<!-- ============ 05 KEY MODE ============ -->
|
||
<section id="s5">
|
||
<div class="shead"><span class="num">05</span><h2>Key Mode — la tonalité à un doigt</h2></div>
|
||
<p>Activez <strong>KEY</strong>, choisissez une tonique et l'une des huit gammes. Chaque touche génère alors <strong>l'accord diatonique de son degré</strong> — impossible de sortir du ton.</p>
|
||
|
||
<figure>
|
||
<svg width="100%" viewBox="0 0 480 150" role="img" aria-label="Key Mode en Do majeur : touches noires grisées, accords diatoniques sous chaque touche blanche">
|
||
<g stroke="#B9AE97" stroke-width="1">
|
||
<rect x="1" y="1" width="66" height="110" fill="var(--key-w)"/>
|
||
<rect x="69" y="1" width="66" height="110" fill="var(--key-w)"/>
|
||
<rect x="137" y="1" width="66" height="110" fill="var(--key-w)"/>
|
||
<rect x="205" y="1" width="66" height="110" fill="var(--key-w)"/>
|
||
<rect x="273" y="1" width="66" height="110" fill="var(--key-w)"/>
|
||
<rect x="341" y="1" width="66" height="110" fill="var(--key-w)"/>
|
||
<rect x="409" y="1" width="66" height="110" fill="var(--key-w)"/>
|
||
</g>
|
||
<!-- noires grisées (hors tonalité en Do majeur) -->
|
||
<g fill="#4B4739" opacity=".55">
|
||
<rect x="46" y="1" width="42" height="64" rx="4"/>
|
||
<rect x="114" y="1" width="42" height="64" rx="4"/>
|
||
<rect x="250" y="1" width="42" height="64" rx="4"/>
|
||
<rect x="318" y="1" width="42" height="64" rx="4"/>
|
||
<rect x="386" y="1" width="42" height="64" rx="4"/>
|
||
</g>
|
||
<!-- accords résultants -->
|
||
<g font-size="13" fill="#403A2F" text-anchor="middle" font-weight="700">
|
||
<text x="34" y="100">C</text>
|
||
<text x="102" y="100">Dm</text>
|
||
<text x="170" y="100">Em</text>
|
||
<text x="238" y="100">F</text>
|
||
<text x="306" y="100">G</text>
|
||
<text x="374" y="100">Am</text>
|
||
<text x="442" y="100">Bdim</text>
|
||
</g>
|
||
<g font-size="10" fill="#7A6A3F" text-anchor="middle">
|
||
<text x="34" y="138">I</text>
|
||
<text x="102" y="138">ii</text>
|
||
<text x="170" y="138">iii</text>
|
||
<text x="238" y="138">IV</text>
|
||
<text x="306" y="138">V</text>
|
||
<text x="374" y="138">vi</text>
|
||
<text x="442" y="138">vii°</text>
|
||
</g>
|
||
</svg>
|
||
<figcaption>fig. 6 — Key Mode en Do majeur : chaque touche = l'accord de son degré, touches hors tonalité grisées et muettes</figcaption>
|
||
</figure>
|
||
|
||
<p>Les tensions <code>6</code> <code>m7</code> <code>M7</code> <code>9</code> <code>11</code> <code>13</code> restent actives et sont harmonisées <strong>dans la gamme</strong> : la 7e de G en Do majeur donne un vrai G7 (avec F naturel). L'astérisque dans le nom (<code>G7*</code>) signale cette harmonisation diatonique.</p>
|
||
<div class="tip">Le <strong>mineur harmonique</strong> vaut le détour : son degré V devient un véritable accord de dominante avec sensible — la cadence mineure classique, à un doigt.</div>
|
||
</section>
|
||
|
||
<!-- ============ 06 PROGRESSION ============ -->
|
||
<section id="s6">
|
||
<div class="shead"><span class="num">06</span><h2>Construire une progression</h2></div>
|
||
<p>Jouez un accord, puis <strong>ADD</strong> (ou <span class="keycap">espace</span>) : il devient un slot dans la séquence. Anatomie d'un slot :</p>
|
||
|
||
<figure>
|
||
<div style="display:flex;justify-content:center;padding:1.4rem 0 .6rem">
|
||
<div style="position:relative;background:var(--module-2);border:1px solid #4A4436;border-radius:7px;padding:.5rem .7rem .4rem;min-width:150px;color:var(--silk-light);font-size:.72rem">
|
||
<span style="position:absolute;top:2px;right:6px;opacity:.5">×</span>
|
||
<div style="font-weight:700;color:var(--lcd-amber);font-size:.9rem">Fm7</div>
|
||
<div style="opacity:.55;font-size:.56rem;margin-top:.15rem">F G# C D# +B</div>
|
||
<div style="display:flex;gap:.35rem;margin-top:.35rem;align-items:center">
|
||
<span style="opacity:.5">‹</span>
|
||
<span style="opacity:.7">−</span>
|
||
<span style="background:#1E1B15;border:1px solid #4A4436;border-radius:4px;font-size:.55rem;padding:.1rem .3rem">3♩</span>
|
||
<span style="opacity:.7">+</span>
|
||
<span style="opacity:.5">›</span>
|
||
</div>
|
||
<span class="dot inplace" style="top:-10px;right:-4px;left:auto">1</span>
|
||
<span class="dot inplace" style="top:16px;left:-10px">2</span>
|
||
<span class="dot inplace" style="bottom:26px;left:-10px;top:auto">3</span>
|
||
<span class="dot inplace" style="bottom:-6px;left:64px;top:auto">4</span>
|
||
<span class="dot inplace" style="bottom:-6px;right:-4px;left:auto;top:auto">5</span>
|
||
</div>
|
||
</div>
|
||
<ul class="legend">
|
||
<li><span class="dot">1</span><span class="t"><strong>×</strong> — supprimer le slot.</span></li>
|
||
<li><span class="dot">2</span><span class="t">Nom, notes, et <code>+B</code> si la basse est active.</span></li>
|
||
<li><span class="dot">3</span><span class="t"><strong>Clic sur le slot</strong> — l'auditionner seul.</span></li>
|
||
<li><span class="dot">4</span><span class="t"><strong>− / +</strong> — durée de <strong>1 à 16 temps</strong>, au pas de 1. Un accord de 3, 5 ou 7 temps tient dans un seul slot.</span></li>
|
||
<li><span class="dot">5</span><span class="t"><strong>‹ ›</strong> — déplacer le slot dans la séquence.</span></li>
|
||
</ul>
|
||
<figcaption>fig. 7 — anatomie d'un slot de progression</figcaption>
|
||
</figure>
|
||
|
||
<h3>Trois façons de remplir la séquence</h3>
|
||
<table>
|
||
<tr><th>Méthode</th><th>Geste</th><th>Quand</th></tr>
|
||
<tr><td><b>Manuelle</b></td><td>jouer + ADD</td><td>vous savez où vous allez</td></tr>
|
||
<tr><td><b>Presets</b></td><td>choisir une cadence + charger</td><td>base instantanée dans votre tonalité (I–V–vi–IV, ii–V–I, cycle des quintes…)</td></tr>
|
||
<tr><td><b>✦ suggérer</b></td><td>un clic = un accord proposé</td><td>laisser la machine dériver par harmonie fonctionnelle, reprendre la main quand c'est intéressant</td></tr>
|
||
</table>
|
||
|
||
<h3>Le voice-leading</h3>
|
||
<p>Deux enchaînements de la même progression :</p>
|
||
<figure>
|
||
<svg width="100%" viewBox="0 0 640 170" role="img" aria-label="Comparaison sans et avec voice-leading">
|
||
<text x="150" y="16" font-size="11" fill="#D8CFBB" text-anchor="middle">sans VL — les voix sautent</text>
|
||
<g stroke="#E5482B" stroke-width="2" opacity=".85">
|
||
<line x1="70" y1="120" x2="150" y2="60"/><line x1="150" y1="60" x2="230" y2="130"/>
|
||
<line x1="70" y1="100" x2="150" y2="40"/><line x1="150" y1="40" x2="230" y2="110"/>
|
||
<line x1="70" y1="85" x2="150" y2="25"/><line x1="150" y1="25" x2="230" y2="90"/>
|
||
</g>
|
||
<g fill="#FFAE33">
|
||
<circle cx="70" cy="120" r="6"/><circle cx="70" cy="100" r="6"/><circle cx="70" cy="85" r="6"/>
|
||
<circle cx="150" cy="60" r="6"/><circle cx="150" cy="40" r="6"/><circle cx="150" cy="25" r="6"/>
|
||
<circle cx="230" cy="130" r="6"/><circle cx="230" cy="110" r="6"/><circle cx="230" cy="90" r="6"/>
|
||
</g>
|
||
<g font-size="10" fill="#7A6A3F" text-anchor="middle">
|
||
<text x="70" y="155">C</text><text x="150" y="155">F</text><text x="230" y="155">G</text>
|
||
</g>
|
||
<text x="490" y="16" font-size="11" fill="#D8CFBB" text-anchor="middle">avec VL — les voix glissent</text>
|
||
<g stroke="#8BC34A" stroke-width="2" opacity=".9">
|
||
<line x1="410" y1="120" x2="490" y2="112"/><line x1="490" y1="112" x2="570" y2="118"/>
|
||
<line x1="410" y1="100" x2="490" y2="95"/><line x1="490" y1="95" x2="570" y2="102"/>
|
||
<line x1="410" y1="85" x2="490" y2="78"/><line x1="490" y1="78" x2="570" y2="84"/>
|
||
</g>
|
||
<g fill="#FFAE33">
|
||
<circle cx="410" cy="120" r="6"/><circle cx="410" cy="100" r="6"/><circle cx="410" cy="85" r="6"/>
|
||
<circle cx="490" cy="112" r="6"/><circle cx="490" cy="95" r="6"/><circle cx="490" cy="78" r="6"/>
|
||
<circle cx="570" cy="118" r="6"/><circle cx="570" cy="102" r="6"/><circle cx="570" cy="84" r="6"/>
|
||
</g>
|
||
<g font-size="10" fill="#7A6A3F" text-anchor="middle">
|
||
<text x="410" y="155">C</text><text x="490" y="155">F</text><text x="570" y="155">G</text>
|
||
</g>
|
||
</svg>
|
||
<figcaption>fig. 8 — le voice-leading choisit le voicing qui minimise le mouvement des voix</figcaption>
|
||
</figure>
|
||
<p><strong>VL AUTO</strong> (dans le transport) applique ce calcul à chaque ADD ; <strong>⇄ voice-leading</strong> optimise d'un coup toute la progression existante. À essayer juste après un chargement de preset : la différence s'entend immédiatement.</p>
|
||
</section>
|
||
|
||
<!-- ============ 07 PERFORMANCE ============ -->
|
||
<section id="s7">
|
||
<div class="shead"><span class="num">07</span><h2>Lecture & modes de performance</h2></div>
|
||
<p><strong>PLAY</strong> lance la progression au BPM affiché, <strong>LOOP</strong> la boucle. Le sélecteur <strong>perf</strong> transforme la restitution de chaque accord — partout : audition, MIDI live, et export <code>.mid</code>.</p>
|
||
|
||
<figure>
|
||
<svg width="100%" viewBox="0 0 640 240" role="img" aria-label="Trois modes de performance en piano-roll : block, strum, arpège">
|
||
<!-- BLOCK -->
|
||
<text x="60" y="22" font-size="11" fill="#D8CFBB">block</text>
|
||
<g fill="#FFAE33">
|
||
<rect x="120" y="10" width="440" height="10" rx="2"/>
|
||
<rect x="120" y="26" width="440" height="10" rx="2"/>
|
||
<rect x="120" y="42" width="440" height="10" rx="2"/>
|
||
</g>
|
||
<!-- STRUM -->
|
||
<text x="60" y="102" font-size="11" fill="#D8CFBB">strum ↑</text>
|
||
<g fill="#FFAE33">
|
||
<rect x="120" y="106" width="440" height="10" rx="2"/>
|
||
<rect x="150" y="90" width="410" height="10" rx="2"/>
|
||
<rect x="180" y="74" width="380" height="10" rx="2"/>
|
||
</g>
|
||
<!-- ARP -->
|
||
<text x="60" y="182" font-size="11" fill="#D8CFBB">arp ↑ 1/16</text>
|
||
<g fill="#FFAE33">
|
||
<rect x="120" y="200" width="42" height="10" rx="2"/>
|
||
<rect x="175" y="184" width="42" height="10" rx="2"/>
|
||
<rect x="230" y="168" width="42" height="10" rx="2"/>
|
||
<rect x="285" y="200" width="42" height="10" rx="2"/>
|
||
<rect x="340" y="184" width="42" height="10" rx="2"/>
|
||
<rect x="395" y="168" width="42" height="10" rx="2"/>
|
||
<rect x="450" y="200" width="42" height="10" rx="2"/>
|
||
<rect x="505" y="184" width="42" height="10" rx="2"/>
|
||
</g>
|
||
<line x1="120" y1="228" x2="560" y2="228" stroke="#4A4436" stroke-width="1"/>
|
||
<text x="120" y="240" font-size="9" fill="#7A6A3F">t = 0</text>
|
||
<text x="560" y="240" font-size="9" fill="#7A6A3F" text-anchor="end">durée du slot →</text>
|
||
</svg>
|
||
<figcaption>fig. 9 — la même triade en block (plaquée), strum (égrenée) et arp (séquencée)</figcaption>
|
||
</figure>
|
||
|
||
<table>
|
||
<tr><th>Mode</th><th>Rendu</th></tr>
|
||
<tr><td><b>block</b></td><td>accord plaqué</td></tr>
|
||
<tr><td><b>strum ↑ / ↓</b></td><td>notes égrenées vers le haut / le bas, façon guitare</td></tr>
|
||
<tr><td><b>harp</b></td><td>balayage rapide (glissando)</td></tr>
|
||
<tr><td><b>arp ↑ / ↓ / ↕ / rnd</b></td><td>arpège à la vitesse du sélecteur <b>rate</b> (1/8 · 1/16 · 1/32)</td></tr>
|
||
</table>
|
||
<p><strong>HUM</strong> humanise vélocités (±10) et timing (±15 ms) — les strums et les arps respirent.</p>
|
||
</section>
|
||
|
||
<!-- ============ 08 MIDI LIVE ============ -->
|
||
<section id="s8">
|
||
<div class="shead"><span class="num">08</span><h2>MIDI live vers le studio</h2></div>
|
||
<p>Chaque accord cliqué, chaque slot auditionné et la lecture complète partent en MIDI, sur <strong>deux canaux séparés</strong> — accords et basse pilotent deux machines différentes en même temps.</p>
|
||
|
||
<figure>
|
||
<svg width="100%" viewBox="0 0 640 190" role="img" aria-label="Routage MIDI : chordlab vers l'interface USB puis Pro-800 canal 3 et TD-3 canal 5">
|
||
<rect x="20" y="65" width="140" height="60" rx="8" fill="#332F27" stroke="#4A4436"/>
|
||
<text x="90" y="92" font-size="12" fill="#FFB454" text-anchor="middle" font-weight="700">_chordlab</text>
|
||
<text x="90" y="110" font-size="9" fill="#7A6A3F" text-anchor="middle">navigateur (https)</text>
|
||
|
||
<line x1="160" y1="95" x2="240" y2="95" stroke="#FFAE33" stroke-width="2.5" marker-end="url(#arr2)"/>
|
||
<text x="200" y="86" font-size="9" fill="#D8CFBB" text-anchor="middle">Web MIDI</text>
|
||
|
||
<rect x="240" y="65" width="130" height="60" rx="8" fill="#332F27" stroke="#4A4436"/>
|
||
<text x="305" y="92" font-size="11" fill="#D8CFBB" text-anchor="middle" font-weight="700">interface</text>
|
||
<text x="305" y="108" font-size="9" fill="#7A6A3F" text-anchor="middle">USB-MIDI</text>
|
||
|
||
<path d="M 370 82 C 420 82 420 40 468 40" stroke="#FFAE33" stroke-width="2.5" fill="none" marker-end="url(#arr2)"/>
|
||
<text x="418" y="48" font-size="10" fill="#FFAE33" text-anchor="middle" font-weight="700">ch 3</text>
|
||
<path d="M 370 108 C 420 108 420 150 468 150" stroke="#E5482B" stroke-width="2.5" fill="none" marker-end="url(#arr3)"/>
|
||
<text x="418" y="142" font-size="10" fill="#E5482B" text-anchor="middle" font-weight="700">ch 5</text>
|
||
|
||
<rect x="470" y="14" width="150" height="52" rx="8" fill="#332F27" stroke="#4A4436"/>
|
||
<text x="545" y="36" font-size="11" fill="#D8CFBB" text-anchor="middle" font-weight="700">Pro-800</text>
|
||
<text x="545" y="52" font-size="9" fill="#7A6A3F" text-anchor="middle">accords / nappes</text>
|
||
|
||
<rect x="470" y="124" width="150" height="52" rx="8" fill="#332F27" stroke="#4A4436"/>
|
||
<text x="545" y="146" font-size="11" fill="#D8CFBB" text-anchor="middle" font-weight="700">TD-3 + K-2</text>
|
||
<text x="545" y="162" font-size="9" fill="#7A6A3F" text-anchor="middle">basse (unisson)</text>
|
||
|
||
<defs>
|
||
<marker id="arr2" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6 Z" fill="#FFAE33"/></marker>
|
||
<marker id="arr3" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6 Z" fill="#E5482B"/></marker>
|
||
</defs>
|
||
</svg>
|
||
<figcaption>fig. 10 — routage par défaut : accords ch3, basse ch5 (modifiable dans le panneau MIDI)</figcaption>
|
||
</figure>
|
||
|
||
<p>Mise en route : <strong>①</strong> brancher l'interface avant d'ouvrir la page (ou recharger), <strong>②</strong> autoriser l'accès MIDI demandé par le navigateur, <strong>③</strong> sélectionner le périphérique dans le panneau <strong>MIDI out (live)</strong>. Le LCD affiche <code>MIDI ON</code>.</p>
|
||
<div class="tip warn"><strong>Web MIDI exige HTTPS</strong> (ou localhost). En <code>file://</code>, l'audio et l'export fonctionnent, mais pas la sortie MIDI live — c'est la raison d'être de l'hébergement sur <code>chordlab.ghostinthemachine.fr</code>. Safari ne supporte pas Web MIDI : utilisez Chrome, Edge ou Firefox. Note bloquée sur une machine ? <strong>STOP</strong> envoie un All Notes Off sur les 16 canaux.</div>
|
||
</section>
|
||
|
||
<!-- ============ 09 EXPORT ============ -->
|
||
<section id="s9">
|
||
<div class="shead"><span class="num">09</span><h2>Export & session</h2></div>
|
||
|
||
<figure>
|
||
<svg width="100%" viewBox="0 0 640 120" role="img" aria-label="Flux d'export : progression vers fichier .mid vers DAW ou Tracker">
|
||
<rect x="20" y="35" width="150" height="50" rx="8" fill="#332F27" stroke="#4A4436"/>
|
||
<text x="95" y="57" font-size="11" fill="#D8CFBB" text-anchor="middle" font-weight="700">progression</text>
|
||
<text x="95" y="72" font-size="9" fill="#7A6A3F" text-anchor="middle">slots + durées</text>
|
||
<line x1="170" y1="60" x2="240" y2="60" stroke="#FFAE33" stroke-width="2.5" marker-end="url(#arr4)"/>
|
||
<rect x="242" y="35" width="130" height="50" rx="8" fill="#332F27" stroke="#4A4436"/>
|
||
<text x="307" y="57" font-size="11" fill="#FFB454" text-anchor="middle" font-weight="700">.mid</text>
|
||
<text x="307" y="72" font-size="9" fill="#7A6A3F" text-anchor="middle">format 1 · PPQ 480 · tempo</text>
|
||
<path d="M 372 50 C 410 50 410 30 448 30" stroke="#FFAE33" stroke-width="2" fill="none" marker-end="url(#arr4)"/>
|
||
<path d="M 372 70 C 410 70 410 92 448 92" stroke="#FFAE33" stroke-width="2" fill="none" marker-end="url(#arr4)"/>
|
||
<text x="530" y="34" font-size="11" fill="#D8CFBB" font-weight="700">DAW (glisser-déposer)</text>
|
||
<text x="530" y="96" font-size="11" fill="#D8CFBB" font-weight="700">Tracker Mini (carte SD)</text>
|
||
<defs><marker id="arr4" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6 Z" fill="#FFAE33"/></marker></defs>
|
||
</svg>
|
||
<figcaption>fig. 11 — un fichier, deux destinations</figcaption>
|
||
</figure>
|
||
|
||
<table>
|
||
<tr><th>Option d'export</th><th>Choix</th></tr>
|
||
<tr><td><b>pistes</b></td><td>accords + basse (2 pistes, chacune sur son canal) · ou accords seuls</td></tr>
|
||
<tr><td><b>perf rendue</b></td><td><b>oui</b> : les strums/arps sont écrits note par note dans le fichier · <b>non</b> : accords plaqués (préférable si vous arpégez ensuite dans le DAW ou le Tracker)</td></tr>
|
||
</table>
|
||
|
||
<h3>Sessions</h3>
|
||
<p><strong>↓ sauver la session</strong> génère un <code>.json</code> avec tous les réglages et la progression complète ; <strong>↑ charger</strong> restaure tout. Rien n'est stocké dans le navigateur : le fichier est l'unique persistance — versionnez vos sessions dans Gitea comme n'importe quel fichier de projet.</p>
|
||
</section>
|
||
|
||
<!-- ============ 10 RACCOURCIS ============ -->
|
||
<section id="s10">
|
||
<div class="shead"><span class="num">10</span><h2>Raccourcis clavier</h2></div>
|
||
<p>Les lettres suivent la disposition d'un clavier de piano. Un sélecteur <strong>QWERTY / AZERTY</strong> se trouve sous le clavier de l'application : il n'y a que deux touches de différence, mais ce sont le Do et le Do dièse, donc le bon réglage change tout. L'application choisit une disposition au démarrage d'après la langue du navigateur — corrigez-la d'un clic si besoin, le choix est conservé dans les sessions <code>.json</code>.</p>
|
||
|
||
<figure>
|
||
<div style="text-align:center;padding:.4rem 0 .2rem">
|
||
<div style="margin-bottom:.5rem">
|
||
<span style="font-size:.55rem;color:var(--silk-light);opacity:.5;letter-spacing:.16em;display:block;margin-bottom:.25rem">QWERTY</span>
|
||
<span class="keycap">A</span><span class="keycap">W</span><span class="keycap">S</span><span class="keycap">E</span><span class="keycap">D</span><span class="keycap">F</span><span class="keycap">T</span><span class="keycap">G</span><span class="keycap">Y</span><span class="keycap">H</span><span class="keycap">U</span><span class="keycap">J</span>
|
||
</div>
|
||
<div style="margin-bottom:.7rem">
|
||
<span style="font-size:.55rem;color:var(--silk-light);opacity:.5;letter-spacing:.16em;display:block;margin-bottom:.25rem">AZERTY</span>
|
||
<span class="keycap" style="border-color:var(--accent)">Q</span><span class="keycap" style="border-color:var(--accent)">Z</span><span class="keycap">S</span><span class="keycap">E</span><span class="keycap">D</span><span class="keycap">F</span><span class="keycap">T</span><span class="keycap">G</span><span class="keycap">Y</span><span class="keycap">H</span><span class="keycap">U</span><span class="keycap">J</span>
|
||
<span style="font-size:.68rem;color:var(--silk-light);margin-left:.6rem">= C → B</span>
|
||
</div>
|
||
<div>
|
||
<span class="keycap" style="padding:.18rem 2.2rem">espace</span>
|
||
<span style="font-size:.68rem;color:var(--silk-light);margin:0 1rem 0 .4rem">ADD</span>
|
||
<span class="keycap">←</span><span class="keycap">→</span>
|
||
<span style="font-size:.68rem;color:var(--silk-light);margin-left:.4rem">voicing −1 / +1</span>
|
||
</div>
|
||
</div>
|
||
<figcaption>fig. 12 — seules les deux premières touches changent entre les dispositions</figcaption>
|
||
</figure>
|
||
|
||
<h3>Deux workflows de référence</h3>
|
||
<table>
|
||
<tr><th>Dawless (session hardware)</th><th>DAW / Tracker (composition)</th></tr>
|
||
<tr>
|
||
<td>KEY ON → preset ou ✦ suggérer → ⇄ voice-leading → MIDI live (Pro-800 + TD-3) → LOOP pendant que vous sculptez les sons et enregistrez sur le L-12 → session .json</td>
|
||
<td>KEY OFF, recherche libre de couleurs (types + tensions + drops) → VL AUTO → export .mid <b>perf : non</b> → import DAW ou Tracker Mini → arpégiation et sound design dans la machine de destination</td>
|
||
</tr>
|
||
</table>
|
||
</section>
|
||
|
||
<footer>_chordlab · manuel rev. 2.4 · underscorelab / leradiologue</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|