Regarde le son : ta voix, ta musique ou les lignes que tu traces du doigt deviennent un paysage de couleurs qui défile en temps réel.
Vue d’ensemble
Un spectrogramme montre ce que l’oreille entend sans le voir : chaque fréquence d’un son devient une couleur, les graves en bas, les aigus en haut, et le temps défile de droite à gauche. Une voix y dessine ses harmoniques empilées comme des rubans, un sifflement trace une ligne fine, une batterie éclate en colonnes verticales.
Quatre façons de jouer. En mode Micro, tout ce que capte le micro s’affiche : parole, chant, instrument ou morceau qui passe dans la pièce. En mode Fichier, tu importes ton propre morceau (ou tu le glisses simplement sur la page) et tu regardes sa structure se dérouler. En mode Dessin, c’est l’inverse : tu traces au doigt ou à la souris, chaque trait devient un son doux dont la hauteur suit ton geste, puis réapparaît aussitôt dans le spectrogramme. Le mode Caméra fait la même chose sans rien toucher : la webcam repère le bout de ton index tendu, qui devient le crayon, et avec les deux index levés tu joues deux sons en même temps.
L’expérience reprend l’idée et l’esthétique 3D du Spectrogram de Chrome Music Lab, mais elle est pensée pour réagir aussi bien à la musique qu’à la voix.
Fonctionnalités
- Quatre modes : micro en direct, fichier audio importé, dessin à la souris ou au doigt (plusieurs doigts à la fois sur mobile), et caméra où l’index tendu sert de crayon.
- Tes propres morceaux : bouton Importer ou glisser-déposer, avec un lecteur (lecture, pause, position). Le fichier reste dans ton navigateur, il n’est envoyé nulle part.
- Deux mains, deux sons : en mode Caméra, chaque index levé joue sa propre note, avec un curseur de couleur différente par main. Replier le doigt coupe le son de cette main seulement.
- Cinq effets à empiler : filtre résonant, distorsion, chorus, écho et réverb, chacun avec ses réglages. Ils transforment le son du dessin et de la caméra (les fichiers importés sont lus tels quels), et leurs traces se voient directement dans le spectrogramme : les répétitions de l’écho, la traîne de la réverb, les harmoniques ajoutées par la distorsion.
- Réglé pour la musique : les traitements « voix » du navigateur (anti-écho, réduction de bruit, gain automatique) sont coupés, et le mode Musique rééquilibre graves et aigus pour que la basse, la voix et les cymbales soient toutes visibles.
- Gain automatique : un morceau doux comme un morceau fort remplit toute la palette, sans réglage.
- Vue 2D ou 3D : un spectrogramme plat et lisible avec ses graduations en hertz, ou un relief en perspective où chaque son forme une crête arrondie et où le silence se fond dans le noir, avec une transition animée entre les deux. Une grille de repère peut s’afficher à la demande.
- Échelle logarithmique ou linéaire : la vue log espace les notes comme sur un clavier, la vue linéaire détaille les aigus.
- Six palettes : Music Lab (celle de l’original, du violet au rouge), Magenta, Néon, Glacier, Aurore et Braise. Elles recolorent aussi l’historique déjà affiché.
- Lecture de la note : sous le pointeur, le nom de la note et sa fréquence (La3 · 440 Hz).
- Pause, sensibilité, vitesse, relief, capture PNG et plein écran, au clavier ou depuis le panneau de réglages.
Sous le capot
Le son passe par une analyse de Fourier sur 4096 échantillons, soit 2048 bandes de fréquence. À chaque image, ces bandes sont corrigées par une pente en décibels par octave (plus forte en mode Musique), puis mesurées par rapport à un niveau de référence qui suit le passage le plus fort et redescend lentement : c’est le gain automatique. Chaque nouvelle tranche est écrite comme une ligne dans une texture circulaire de 512 lignes, qui sert de mémoire au spectrogramme.
L’affichage est un seul maillage WebGL de 65 536 sommets. En 2D, il est plaqué à plat sur l’écran ; en 3D, chaque sommet lit l’intensité de sa fréquence dans la texture pour se soulever, et l’éclairage est calculé à partir de ses voisins. L’échelle, la sensibilité et la palette sont appliquées au moment du rendu, ce qui permet de les changer sans perdre l’historique.
Pour que la note jouée corresponde à la hauteur du relief sous le doigt, même quand la surface est inclinée en 3D, la projection de la caméra virtuelle est inversée mathématiquement : le programme retrouve quel point de la surface se trouve sous le curseur. En mode Caméra, un réseau de neurones de détection de mains tourne dans un thread séparé pour ne pas ralentir l’affichage ; il repère le bout de chaque index, vérifie s’il est tendu, et suit chaque main d’une image à l’autre pour qu’elle garde son propre son. Chaque doigt ou chaque main pilote son propre oscillateur, adouci par un filtre et une courte réverbération, et dont le volume baisse dans les aigus pour rester agréable.
Le son du dessin et de la caméra traverse ensuite une chaîne d’effets montée en série (filtre, distorsion, chorus, écho, réverb) puis un limiteur qui protège les oreilles, avant d’être analysé. Les effets restent branchés en permanence : les activer ou les régler ne fait que glisser des volumes, ce qui évite tout clic. Le micro n’y passe jamais, pour éviter le larsen, et les fichiers importés non plus : ils sont analysés tels qu’ils sont.
Contrôles
| Touche / geste | Action |
|---|---|
| Glisser (mode Dessin) | Joue un son dont la hauteur suit le geste |
| Index tendu (mode Caméra) | Joue un son, un par main (deux index = deux sons) ; doigt replié = simple curseur |
| Glisser-déposer un fichier | Visualise ton propre morceau |
| M | Mode suivant : micro, dessin, caméra, fichier |
| O | Importer un fichier audio |
| 1 à 5 | Active / coupe filtre, distorsion, chorus, écho, réverb |
| 0 | Coupe tous les effets |
| T | Source : voix / musique |
| V | Vue 2D / 3D |
| L | Échelle logarithmique / linéaire |
| G | Affiche / masque la grille |
| Espace | Pause (lecture / pause du morceau en mode Fichier) |
| C | Palette suivante |
| Flèches haut / bas | Sensibilité |
| Flèches gauche / droite | Vitesse de défilement |
| P | Capture PNG |
| S | Ouvre / ferme le panneau de réglages |
| H | Masque / affiche l’interface |
| F | Plein écran |
Stack technique
- Vanilla JS, aucune dépendance, aucun build
- Web Audio API : analyse FFT, oscillateurs, chaîne d’effets (filtre biquad, waveshaper, chorus à LFO, delay à réinjection, réverbération par convolution), compresseur et limiteur
- getUserMedia : capture du micro sans traitement vocal, et de la webcam
- MediaPipe Hand Landmarker dans un Web Worker : détection du bout de l’index
- WebGL : historique en texture circulaire, maillage 2D/3D déformé dans le shader de sommets
- Pointer Events : dessin multi-touch ; glisser-déposer et lecture de fichiers audio locaux
Cas d’usage
Un outil pour comprendre le son en le voyant : comparer deux voix, repérer la note d’un instrument, importer sa chanson préférée et observer comment elle se construit couche par couche. Les modes Dessin et Caméra en font aussi un jeu : écrire son prénom en sons, ou diriger la mélodie d’un doigt levé devant l’écran.
Ce que tu entends, enfin sous tes yeux.
