-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfeatures_doc.html
More file actions
184 lines (171 loc) · 9.62 KB
/
Copy pathfeatures_doc.html
File metadata and controls
184 lines (171 loc) · 9.62 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<style>
@page {
size: A4;
margin: 20mm 18mm;
@bottom-center { content: counter(page) " / " counter(pages); font-size: 9px; color: #8b93a7; }
}
* { box-sizing: border-box; }
body { font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; color: #1c2230; font-size: 11px; line-height: 1.5; }
h1 { font-size: 26px; margin: 0 0 2px; color: #12161f; }
.sub { color: #4c8dff; font-weight: 600; font-size: 13px; margin: 0 0 4px; }
.meta { color: #8b93a7; font-size: 10px; margin-bottom: 18px; }
h2 { font-size: 15px; color: #12161f; border-bottom: 2px solid #4c8dff; padding-bottom: 3px; margin: 22px 0 8px; }
h3 { font-size: 12px; color: #2a3550; margin: 14px 0 4px; }
p { margin: 4px 0; }
ul { margin: 4px 0 8px; padding-left: 18px; }
li { margin: 2px 0; }
kbd { background: #eef1f7; border: 1px solid #c9d0de; border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; font-family: "SF Mono", Consolas, monospace; font-size: 9.5px; color: #2a3550; }
table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
th, td { border: 1px solid #d6dbe6; padding: 4px 7px; text-align: left; vertical-align: top; }
th { background: #eef2fb; color: #2a3550; font-size: 10px; }
td { font-size: 10.5px; }
.lead { background: #f4f7fd; border-left: 3px solid #4c8dff; padding: 8px 12px; margin: 10px 0 16px; border-radius: 0 6px 6px 0; }
.tag { display: inline-block; background: #4c8dff; color: #fff; font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 10px; vertical-align: middle; }
.cols { display: table; width: 100%; border-spacing: 14px 0; }
.cols > div { display: table-cell; width: 50%; vertical-align: top; }
.note { color: #6b7385; font-size: 10px; font-style: italic; }
code { background: #eef1f7; padding: 0 3px; border-radius: 3px; font-family: Consolas, monospace; font-size: 10px; }
.grid2 > span { display: inline-block; width: 48%; margin: 1px 0; }
</style>
</head>
<body>
<h1>🎹 Piano au clavier d'ordinateur</h1>
<p class="sub">Guide des fonctionnalités</p>
<p class="meta">Application web autonome (fichier unique <code>piano.html</code>) — Document généré le 22 juillet 2026</p>
<div class="lead">
Application <strong>100 % autonome</strong> tenant dans un seul fichier HTML : elle transforme le clavier
d'un ordinateur en piano, affiche une partition, et fait travailler un morceau en jugeant chaque note
jouée en temps réel. Aucune installation, aucun serveur et aucune connexion internet ne sont
nécessaires — les sons du piano (échantillons d'un vrai Steinway) et la bibliothèque de partition
sont intégrés directement dans le fichier.
</div>
<h2>1. Principe : jouer au clavier comme sur un piano</h2>
<p>
Le clavier de l'ordinateur est découpé <strong>horizontalement</strong> comme un vrai piano
(graves à gauche, aigus à droite) :
</p>
<div class="cols">
<div>
<h3>Main gauche</h3>
<ul>
<li>Blanches : <kbd>Q</kbd> <kbd>S</kbd> <kbd>D</kbd> <kbd>F</kbd> <kbd>G</kbd> (rangée du milieu, à gauche)</li>
<li>Dièses : <kbd>Z</kbd> <kbd>E</kbd> <kbd>R</kbd> <kbd>T</kbd> (rangée du dessus)</li>
</ul>
</div>
<div>
<h3>Main droite</h3>
<ul>
<li>Blanches : <kbd>H</kbd> <kbd>J</kbd> <kbd>K</kbd> <kbd>L</kbd> <kbd>M</kbd> <kbd>ù</kbd></li>
<li>Dièses : <kbd>Y</kbd> <kbd>U</kbd> <kbd>I</kbd> <kbd>O</kbd> <kbd>P</kbd> (rangée du dessus)</li>
</ul>
</div>
</div>
<p>
<strong>Clavier adaptatif :</strong> à chaque nouveau morceau, l'application recale automatiquement les
touches sur les notes réellement utilisées par chaque main, en conservant l'écartement des doigts
d'un vrai piano. Les <strong>étiquettes affichées sur chaque touche s'adaptent</strong> au morceau.
Support des dispositions <span class="tag">AZERTY</span> <span class="tag">QWERTY</span>.
</p>
<p class="note">Un piano visuel en SVG est affiché à l'écran : il surligne la touche jouée (« active ») et la prochaine touche à jouer (« cible »), avec une teinte différente pour chaque main.</p>
<h2>2. Le répertoire de morceaux</h2>
<div class="cols">
<div>
<h3>10 morceaux intégrés</h3>
<div class="grid2">
<span>• Ode à la joie</span>
<span>• Frère Jacques</span>
<span>• Au clair de la lune</span>
<span>• Ah vous dirai-je maman</span>
<span>• Mary Had a Little Lamb</span>
<span>• Hot Cross Buns</span>
<span>• Old MacDonald</span>
<span>• London Bridge</span>
<span>• Jingle Bells (refrain)</span>
<span>• Gamme Do–La (2 mains)</span>
</div>
</div>
<div>
<h3>30 exercices progressifs</h3>
<p>Une série d'exercices classés par difficulté : main droite seule, main gauche seule,
notes répétées, tierces brisées, croches, extensions, coordination des deux mains…</p>
</div>
</div>
<h3>Générateur automatique <span class="tag">🎲 Générer</span></h3>
<p>
L'application génère des morceaux inédits sur <strong>5 niveaux de difficulté</strong>. Plus le niveau
monte, plus le rythme se densifie ; à partir du niveau 3, la mélodie peut passer à la main gauche.
Un morceau généré qui plaît peut être conservé (<span class="tag">💾 Garder</span>).
</p>
<h3>Import de partitions <span class="tag">➕ Notation ABC</span></h3>
<ul>
<li>Coller une notation <strong>ABC</strong> libre de droit (ex. depuis <em>abcnotation.com</em>) ou ouvrir un fichier <code>.abc</code>.</li>
<li>Titre, mesure et tempo lus automatiquement.</li>
<li>Les morceaux importés sont <strong>mémorisés dans le navigateur</strong> et supprimables individuellement.</li>
</ul>
<h2>3. Les 4 axes de réglage de la partition</h2>
<p>Chaque axe se règle par un bouton ou une touche numérique dédiée ; les réglages sont mémorisés.</p>
<table>
<tr><th>Touche</th><th>Axe</th><th>Options</th></tr>
<tr><td><kbd>0</kbd></td><td>Niveau généré</td><td>1 · 2 · 3 · 4 · 5</td></tr>
<tr><td><kbd>1</kbd></td><td>Validation</td><td>Notes + rythme · Rythme seul (n'importe quelle touche de la bonne main)</td></tr>
<tr><td><kbd>2</kbd></td><td>Anticipation</td><td>Tout visible · Cacher la mesure en cours · Cacher la ligne en cours</td></tr>
<tr><td><kbd>3</kbd></td><td>Mains</td><td>Main gauche · Deux mains · Main droite</td></tr>
</table>
<h2>4. Écoute et jeu</h2>
<ul>
<li><span class="tag">🔊 Démo</span> — écouter le morceau joué automatiquement (touche <kbd>C</kbd>).</li>
<li><span class="tag">▶ Jouer</span> — se lancer soi-même, avec décompte (« count-in ») avant le départ (touche <kbd>Espace</kbd>).</li>
<li><strong>Métronome</strong> activable, avec accent sur le premier temps.</li>
<li><strong>Tempo réglable</strong> de 40 à 180 BPM (boutons ▲/▼ ou flèches <kbd>↑</kbd> <kbd>↓</kbd>, pas de ±5 BPM).</li>
<li>La partition <strong>défile automatiquement</strong> et masque au besoin les mesures déjà passées.</li>
</ul>
<h2>5. Notation en temps réel de la performance</h2>
<p>
Chaque note jouée est jugée sur sa <strong>justesse rythmique</strong> par rapport au temps attendu.
En fin de morceau, une <strong>restitution visuelle</strong> code par couleur chaque note :
</p>
<table>
<tr><th>Verdict</th><th>Signification</th></tr>
<tr><td><strong>Parfait</strong></td><td>note dans une fenêtre de ± 90 ms</td></tr>
<tr><td><strong>Bien</strong></td><td>note dans une fenêtre de ± 180 ms</td></tr>
<tr><td><strong>En avance</strong></td><td>jouée trop tôt</td></tr>
<tr><td><strong>En retard</strong></td><td>jouée trop tard</td></tr>
<tr><td><strong>Non jouée</strong></td><td>note manquée</td></tr>
</table>
<p>Des <strong>statistiques</strong> et le dernier verdict sont affichés. Une option
« <strong>Arrêter si niveau insuffisant</strong> » interrompt le jeu quand la performance décroche.</p>
<h2>6. Mode « travailler le passage » <span class="tag">V</span></h2>
<p>
Fonction d'entraînement ciblé : l'application isole un <strong>passage difficile</strong> et le fait
répéter jusqu'à réussite propre, en gérant une <strong>progression par paliers de tempo</strong>
(le tempo accélère quand le passage est réussi plusieurs fois d'affilée, ralentit en cas d'échec).
Un système de <strong>séries (streak)</strong> matérialise les réussites consécutives requises.
</p>
<h2>7. Raccourcis clavier</h2>
<div class="grid2">
<span><kbd>Espace</kbd> jouer / arrêter</span>
<span><kbd>B</kbd> afficher les réglages</span>
<span><kbd>C</kbd> écouter (démo)</span>
<span><kbd>Maj</kbd>+<kbd>N</kbd> nouvelle partition</span>
<span><kbd>0</kbd> niveau · <kbd>1</kbd> validation</span>
<span><kbd>2</kbd> anticipation · <kbd>3</kbd> mains</span>
<span><kbd>Maj</kbd>+<kbd>W</kbd> travailler le passage</span>
<span><kbd>Entrée</kbd> valider l'action proposée</span>
<span><kbd>↑</kbd> <kbd>↓</kbd> tempo (± 5 BPM)</span>
<span><kbd>→</kbd> passage suivant</span>
<span><kbd>Échap</kbd> quitter le travail</span>
</div>
<h2>8. Points forts techniques</h2>
<ul>
<li><strong>Fichier unique portable</strong> — s'envoie par mail et s'ouvre d'un double-clic, sans internet.</li>
<li><strong>Sons de piano réels intégrés</strong> — 88 échantillons (une note par touche) encodés dans le fichier, moteur audio Web Audio.</li>
<li><strong>Partition professionnelle</strong> — rendu de la portée via la bibliothèque abcjs, elle aussi intégrée.</li>
<li><strong>Préférences persistantes</strong> — réglages et morceaux importés mémorisés dans le navigateur.</li>
<li><strong>Interface épurée</strong> — les réglages se replient pendant le jeu pour se concentrer sur la partition.</li>
</ul>
</body>
</html>