Un synthé d’accords à deux mains devant la webcam : la main gauche choisit l’accord, la main droite règle volume, tonalité, voicing et octave.
Vue d’ensemble
Synth move transforme les deux mains, filmées par la webcam, en un instrument de musique complet : la forme des doigts de la main gauche choisit le degré de l’accord joué (de I à VII, majeur ou mineur), pendant que la main droite pilote en direct le volume (hauteur de la main), la tonalité du filtre (inclinaison du poignet), le voicing de l’accord (nombre de doigts levés) et une bascule d’octave (côté du pouce). Le résultat est un pad synthétique qui change de couleur et d’accord au fil du geste, sans clavier ni contrôleur physique.
C’est une réinterprétation originale d’un principe de synthé gestuel, redessinée avec l’identité visuelle néon/glassmorphism du site et enrichie de conventions reprises des applis sœurs : bascule plein écran, curseur qui s’efface automatiquement, mise en sourdine et un panneau d’aide affichant le guide des gestes.
Fonctionnalités
- Accord à la main gauche — la forme des doigts choisit le degré (I à VII), le côté du pouce et l’orientation du poignet déterminent majeur/mineur.
- Expression à la main droite — hauteur de la main pour le volume, inclinaison du poignet pour la tonalité du filtre, nombre de doigts levés pour le voicing, pouce pour l’octave.
- Stabilisation du geste — l’accord affiché et joué n’est validé qu’après un court temps de tenue, pour éviter le scintillement d’une détection bruitée.
- Synthèse par voix multiples — chaque note de l’accord est jouée par deux oscillateurs légèrement désaccordés avec sa propre enveloppe, pour un son plus riche qu’une simple onde brute.
- Delay d’ambiance — une reprise filtrée et discrète prolonge le son après le lâcher de la main, plutôt que de couper net.
- HUD complet — sélecteur de tonalité, VU-mètre de volume, lecture de la tonalité du filtre et grand affichage de l’accord détecté, coloré dynamiquement selon l’accord joué.
Sous le capot
La détection des mains repose sur MediaPipe (HandLandmarker) qui suit 21 points par main à chaque frame de webcam, redessinée en miroir pour un effet « selfie » naturel. Un seul signal — la position horizontale du poignet par rapport à la jointure du majeur — détermine à la fois la lettre affichée à l’écran (majuscule ou minuscule) et la tierce réellement jouée, pour garantir que ce qu’on voit corresponde toujours à ce qu’on entend. Le degré, la qualité et l’octave stabilisés sont ensuite traduits en un jeu de fréquences (fondamentale, tierce, quinte, octave, parfois septième) que le moteur audio transforme en accord.
Côté son, chaque changement d’accord fait fondre en douceur les voix sortantes vers le silence avant d’arrêter leurs oscillateurs, et chaque nouvelle voix monte en deux temps — un pic percussif suivi d’une redescente vers son niveau tenu — pour qu’un changement d’accord s’entende comme un vrai geste musical plutôt que comme un fondu continu. Un waveshaper applique une vraie saturation douce (et non un simple readout cosmétique) au-delà d’un certain seuil d’inclinaison du poignet, avec un compresseur en sortie pour éviter tout écrêtage brutal.
Stack technique
- Vanilla JS, zéro framework
- MediaPipe Tasks Vision (HandLandmarker) — suivi des deux mains en 21 points, accélération GPU
- Web Audio API — synthèse par oscillateurs, filtre, waveshaper, delay et compresseur, sans librairie
- getUserMedia — capture webcam en temps réel
Cas d’usage
Un instrument sans contact pour improviser des nappes d’accords à la webcam, une démo portfolio de suivi de mains en temps réel, ou simplement un jouet musical à essayer devant l’écran, mains levées.
Une main choisit l’accord, l’autre lui donne du corps — l’air devient clavier.
