Comment j’ai ressuscité l’esprit de Winamp pour mon groupe Wattson.

Récemment, avec mon groupe de musique Wattson nous avons eu la chance de fouler une scène équipée d’un dispositif de vidéoprojection complet. Au-delà de la simple diffusion d’un logo statique, j’ai tout de suite vu l’opportunité de créer une véritable expérience immersive pour notre public.

C’est alors qu’une bouffée de nostalgie m’a frappé : je me suis revu, adolescent, fasciné par les visualisations psychédéliques de l’inoxydable Winamp, ce lecteur audio culte qui transformait chaque morceau en une explosion de fractales et de couleurs. Je me suis dit : “Et si on projetait ce chaos organisé derrière nous, en plein set ?”

Le défi technique : du WebAssembly à la scène

Le déclic est venu lorsque je suis tombé sur Butter Churn. Un développeur talentueux (jberg) a réussi l’exploit de porter ces visualisations légendaires en WebAssembly, les rendant accessibles via les technologies web modernes. Son projet GitHub était la brique de base parfaite, mais il restait à en faire un outil de scène performant.

Ni une ni deux, je me suis retroussé les manches pour concevoir une application dédiée. L’objectif était clair :

• Analyse temps réel : Le logiciel, installé sur un laptop en bord de scène, capte le flux audio brut du groupe via le micro ou la console.
• Dynamisme automatique : Les visuels réagissent instantanément aux fréquences et au rythme de notre musique, évoluant de manière organique sans intervention humaine.
• Identité visuelle : J’ai intégré une couche de personnalisation pour que notre logo reste présent au cœur de cette tornade visuelle.

Découvrez Psychodrop

Le résultat de ce travail acharné s’appelle Psychodrop. C’est un pont entre l’esthétique “Legacy” des années 2000 et l’énergie brute d’un concert de rock. Le rendu est hypnotique, dynamique, et apporte une dimension supplémentaire à nos morceaux.

Curieux de voir ce que ça donne ? Vous pouvez tester l’expérience interactive directement sur la demo ici

Comment ça marche sous le capot

ButterChurn : WebAudio + WebGL

ButterChurn est le cœur du réacteur. Il s’appuie sur deux API navigateur :

1. WebAudio API - AnalyserNode exécute une FFT (Fast Fourier Transform) sur le flux audio en temps réel, découpant le son en 512 bandes de fréquences
2. WebGL 2.0 - chaque frame est un maillage 3D texturé et animé via des shaders GLSL, le tout à 60 fps

Le pipeline audio :

Flux audio → AnalyserNode (FFT) → tableau de fréquences → ButterChurn → rendu WebGL

Construire depuis les sources

git clone https://github.com/jberg/butterchurn
cd butterchurn
npm install
npm run build

Pour intégrer dans votre projet :

import butterchurn from 'butterchurn';
import butterchurnPresets from 'butterchurn-presets';

const audioContext = new AudioContext();
const analyser = audioContext.createAnalyser();
const source = audioContext.createMediaElementSource(audioElement);
source.connect(analyser);

const visualizer = butterchurn.createVisualizer(audioContext, canvas, {
  width: 1920,
  height: 1080,
  meshWidth: 64,
  meshHeight: 48,
});

const presets = butterchurnPresets.getPresets();
visualizer.loadPreset(presets['Flexi - matrix'], 0.0);
visualizer.connectAudio(analyser);

function render() {
  visualizer.render();
  requestAnimationFrame(render);
}
render();

Ajouter des presets personnalisés

Les presets sont des objets JSON qui définissent les paramètres des shaders. Inspirez-vous des presets existants :

const monPreset = {
  name: "Mon custom",
  preset: {
    waveform: { ... },
    shapes: { ... },
    blur: { enabled: true, ... },
  }
};
visualizer.loadPreset(monPreset, 2.0); // 2s de transition

Intégration OBS pour le streaming

Utilisez OBS Studio avec une capture de fenêtre pointant sur Psychodrop. Pour un setup avancé :

1. Lancez Psychodrop en mode plein écran sur un second écran
2. Dans OBS, ajoutez une source Capture de fenêtre (Windows/Linux) ou Capture d’écran
3. Ajoutez votre logo, le nom du morceau, et autres overlays par-dessus
4. Utilisez le Mode Studio pour transitionner entre scènes pendant le concert

Adapter à votre setup

Psychodrop est conçu pour accepter n’importe quelle source audio :