Project 36, Media and real-time

Music Visualizer

Play the built-in beat, drop in a song, or sing into your microphone. The Web Audio API splits the sound into frequencies and the canvas turns them into motion.

Main API: Web Audio AnalyserNode
Drawing: Canvas 2D
Dependencies: None
Your browser: Checking

Visualizer

Pick a sound source to start

Style Colors Sensitivity

How it works

Route the soundThe source (synth, file or mic) goes through an AnalyserNode on its way to the speakers.
Read frequenciesEvery frame, the analyser runs a fast Fourier transform and returns loudness for 128 frequency bands.
DrawEach band becomes a bar, a point on a wave or a spoke on the ring. The average of the lowest bands drives the beat pulse.

const ctx = new AudioContext();
const analyser = ctx.createAnalyser();
analyser.fftSize = 256;                               // 128 frequency bands
source.connect(analyser).connect(ctx.destination);

const bins = new Uint8Array(analyser.frequencyBinCount);
(function draw() {
  analyser.getByteFrequencyData(bins);                // 0 to 255 per band
  bins.forEach((v, i) => canvas.fillRect(i * w, H - v, w - 2, v));
  requestAnimationFrame(draw);
})();