Season 9 · Article 03

Audio-Reactive Visuals

AnalyserNode gives FFT output. Feed amplitude into scale. Feed bass into shader uniform. Sync visuals to the music.

1. AnalyserNode

const analyser = ctx.createAnalyser();
analyser.fftSize = 512;         // 256 bins
analyser.smoothingTimeConstant = 0.8;

source.connect(analyser);
analyser.connect(ctx.destination);

// Each frame:
const freqData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(freqData);
// freqData[0] = DC, freqData[1] = low bass, etc.
// 0-255 normalized.

2. Time-domain vs frequency-domain

• getByteTimeDomainData: raw waveform (for oscilloscope display).
• getByteFrequencyData: FFT magnitude per bin (for spectrum + beat detection).

3. Band extraction

const bass = averageRange(freqData, 0, 20);      // 0-~500Hz
const mid  = averageRange(freqData, 20, 80);     // ~500-3kHz
const hi   = averageRange(freqData, 80, 200);    // ~3-15kHz

function averageRange(data, lo, hi) {
  let sum = 0;
  for (let i = lo; i < hi; i++) sum += data[i];
  return sum / (hi - lo) / 255;
}

4. Drive visuals

sphere.scale.setScalar(1 + bass * 0.8);
material.color.setHSL(hi, 0.8, 0.5 + mid * 0.2);
shader.uniforms.uGlow.value = bass * 3;

5. Beat detection (simple)

let bassHistory = [];
function isBeat(bass) {
  bassHistory.push(bass);
  if (bassHistory.length > 43) bassHistory.shift();  // ~1s at 60fps
  const avg = bassHistory.reduce((a,b) => a + b, 0) / bassHistory.length;
  return bass > avg * 1.4;  // 40% above average = beat
}

On beat: trigger flash, particle burst, camera shake. The music-games pattern.

6. Live demo — reactive sphere + bars

7. Shader uniforms from audio

// Each frame
shader.uniforms.uBass.value = bass;
shader.uniforms.uMid.value = mid;
shader.uniforms.uHi.value = hi;

// In fragment shader
vec3 color = mix(lowColor, highColor, uHi);
float glow = uBass * 5.0;
gl_FragColor = vec4(color + glow, 1.0);

8. Use cases

• Music visualizers (Monstercat, Trap Nation aesthetic).
• DJ/VJ performance tools.
• Rhythm games.
• Synesthetic demos.
• Accessibility: visualize audio for deaf users.

9. Takeaways

• AnalyserNode → FFT bins per frame.
• Average bass/mid/hi bands.
• Feed amplitude → scale, color, uniforms.
• Beat detection: energy spike over rolling average.
• Shader uniforms update each frame for music-reactive materials.