lrdlg
730 lines
46 KiB
HTML
730 lines
46 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.2</div>
|
||
<h1>_chordlab <em>ORC</em></h1>
|
||
<p>Machine à accords et à progressions, inspirée de la logique de l'Orchid ORC-1. 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>
|
||
|
||
<figure>
|
||
<div style="text-align:center;padding:.4rem 0 .2rem">
|
||
<div style="margin-bottom:.7rem">
|
||
<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>
|
||
<span style="font-size:.68rem;color:var(--silk-light);margin-left:.6rem">= C → B (les lettres suivent le clavier de piano)</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 — la main gauche joue, la droite reste sur la souris</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.2 · underscorelab / leradiologue · logique d'accords inspirée de l'Orchid ORC-1 (implémentation indépendante)</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|