Une galerie d’animations audio-réactives extensible : branchez le micro (ou un fichier audio) et changez de visuel à la volée, en plein écran.
Vue d’ensemble
Sound animation est un lecteur d’animations audio-réactives : on choisit le microphone ou un fichier audio local comme source sonore, et l’application enchaîne une galerie de visuels plein écran qui réagissent en temps réel au son — niveau, basses, médiums, aigus et détection de battement. On navigue d’un visuel à l’autre au clavier, au tactile (balayage horizontal) ou depuis les boutons de l’interface, sans jamais quitter l’écran.
L’application est pensée pour être facilement embarquée en plein écran — elle est d’ailleurs intégrée sur le site via une iframe qui se dimensionne toute seule — et pour rester une galerie ouverte : la liste des animations disponibles n’est pas figée en dur dans le code, elle est découverte automatiquement au chargement de la page.
Fonctionnalités
- Deux sources audio — microphone en direct ou fichier audio local, interchangeables sans recharger la page.
- Galerie extensible — chaque animation est un module indépendant, découvert et chargé automatiquement au démarrage, sans liste à maintenir à la main.
- Analyse audio en temps réel — niveau global, énergie basses/médiums/aigus et détection de battement nourrissent chaque animation image par image.
- Navigation clavier et tactile — flèches gauche/droite ou balayage horizontal pour changer de visuel, sans interrompre le son.
- Plein écran et interface masquable — HUD escamotable, curseur qui s’efface automatiquement après quelques secondes d’inactivité en plein écran.
Sous le capot
Chaque animation respecte un contrat commun minimal (une fonction de rendu obligatoire, plus des méthodes optionnelles d’initialisation, de redimensionnement et de nettoyage) et reçoit à chaque frame un instantané audio partagé — niveau, bandes de fréquence, détection de battement — calculé par un moteur audio unique qui encapsule le contexte Web Audio et son analyseur. Le microphone n’est volontairement jamais connecté à la sortie audio (pour éviter le larsen), contrairement à la lecture d’un fichier qui reste audible.
La galerie n’a pas de registre d’animations codé en dur : ajouter un nouveau visuel revient à déposer un fichier dans le bon dossier, dont le nom détermine son ordre d’affichage — un chargeur dynamique les importe et vérifie qu’ils exposent bien une fonction de rendu avant de les activer. Ce mécanisme d’auto-découverte s’appuie sur un petit script serveur, ce qui distingue cette appli des autres expériences du site : elle nécessite un serveur capable d’exécuter du PHP plutôt qu’un simple serveur de fichiers statiques.
Contrôles
| Touche / geste | Action |
|---|---|
| F | Plein écran |
| H | Affiche / masque l’interface (HUD) |
| ← / → | Animation précédente / suivante |
| Tap sur l’écran | Affiche / masque l’interface (tactile) |
| Balayage horizontal | Change d’animation (tactile) |
Stack technique
- Vanilla JS (modules ES6), zéro framework
- Web Audio API — AudioContext + AnalyserNode pour l’analyse micro/fichier en temps réel
- Canvas 2D — rendu des animations
- PHP (petit script serveur) — découverte automatique des animations disponibles
Cas d’usage
Un fond visuel réactif pour écouter de la musique en direct ou depuis un fichier, une démo portfolio d’effets génératifs, ou une base de test pour prototyper rapidement de nouvelles animations audio-réactives.
Le son entre, l’écran répond — changez de visuel sans jamais couper le rythme.
