Un instrument à deux mains face à la webcam : une main déclenche des samples au nombre de doigts levés, l’autre module le son en l’air — pitch ou filtre, selon sa hauteur.
Vue d’ensemble
Air Music est un instrument gestuel : la webcam suit les deux mains via MediaPipe Hands, et chacune a un rôle distinct. La première main détectée déclenche des échantillons audio selon son nombre de doigts levés (1 à 5), un poing fermé coupant tout instantanément. La seconde main module le son joué en direct — sa position verticale contrôle soit la hauteur (pitch), soit la fréquence de coupure d’un filtre, le mode se changeant en maintenant cinq doigts stables.
Le tout se joue sur fond de sept calques de visuels plein écran empilés — spectre, forme d’onde, particules, grille 3D, traînées de mains, glitch — qui réagissent en direct à l’analyse audio, avec plusieurs thèmes de couleur et des banques de samples interchangeables.
Fonctionnalités
- Détection de deux mains en direct — MediaPipe Hands compte les doigts levés et distingue main 1 (déclenchement de samples) et main 2 (contrôle).
- Debounce anti-tremblement — un nombre de doigts doit rester stable plusieurs frames avant de déclencher un son, pour ignorer les faux positifs de la détection.
- Modulation en l’air — la hauteur de la main 2 pilote le pitch (vitesse de lecture) ou la coupure d’un filtre passe-bas, selon le mode actif.
- Banques de samples — jusqu’à cinq sons par banque (un par doigt), avec bascule rapide entre banques au clavier.
- Chaîne d’effets — reverb, delay, distorsion, chorus et filtre passe-bas, activables en direct sans jamais recâbler le graphe audio.
- Sept visualiseurs plein écran — spectre, forme d’onde, particules, grille 3D, traînées de mains et glitch, tous nourris par la même analyse audio.
- Interfaces adaptatives — panneaux dédiés desktop, mobile paysage et portrait, synchronisés en permanence.
Sous le capot
Un seul AudioContext porte tout le moteur : chaque voix de sample est routée vers un bus commun (fxBus) qui alimente en parallèle les sends d’effets (reverb, delay, distorsion, chorus) et une chaîne de filtres en série, avant de passer par le gain maître et l’analyseur qui nourrit tous les visualiseurs. Les effets s’activent en modulant le gain de leurs sends, jamais en reconnectant le graphe — celui-ci est construit une seule fois et ne bouge plus.
Le cœur de l’application est le callback de détection de mains : à chaque frame, il compte les doigts levés par géométrie des points de repère, assigne la première main détectée aux samples et la seconde au contrôle. Un nombre de doigts doit rester stable plusieurs frames avant de déclencher un son — un anti-rebond qui absorbe le tremblement naturel de la détection — pendant qu’un poing fermé coupe tout instantanément. L’ensemble du callback est protégé par un try/catch, pour qu’une erreur de rendu ponctuelle ne casse jamais la boucle MediaPipe.
Contrôles
| Touche | Action |
|---|---|
| H | Affiche / masque les panneaux |
| V | Réduit / agrandit le panneau vidéo |
| F | Plein écran |
| C | Change de thème de couleur |
| L | Active / désactive la boucle |
| S | Stoppe tous les sons |
| M | Change le mode de la main 2 (pitch / cutoff) |
| B | Banque de samples suivante |
| R | Effet Reverb on/off |
| D | Effet Delay on/off |
| X | Effet Distorsion on/off |
| P | Filtre passe-bas on/off |
| O | Effet Chorus on/off |
Stack technique
- MediaPipe Hands — détection et suivi des deux mains via webcam
- Web Audio API — moteur audio, chaîne d’effets, filtrage en temps réel
- Canvas 2D — les sept calques de visualisation plein écran
- Vanilla JS — zéro framework, zéro build
Cas d’usage
Pensé comme un instrument de démonstration portfolio et un jouet de performance live : jouer des samples à mains nues devant la caméra, moduler le son en l’air, et laisser les visuels réagir en direct — sans clavier ni contrôleur physique.
Compter sur ses doigts n’a jamais aussi bien porté son nom.
