Chapter 07 / Sound

The web can make noise.

Synthesizers, drum machines and generative music written by Claude with the Web Audio API. Spatial and audio-reactive 3D with three.js. Voices and sound design generated with Higgsfield. Turn your volume up and click.

Demos

Polyphonic synthesizer

Oscillators, a resonant filter, ADSR envelopes and a feedback delay, drawn live on an oscilloscope. Your computer keyboard plays it too.

  • Web Audio
  • Synthesis
Click keys or type A to K

Generative ambient

An endless piece that never repeats: random pentatonic notes, slow pads and a reverb built from synthesized noise.

  • Web Audio
  • Algorithmic music

Drum machine

A 16-step sequencer with kick, snare, hats, clap and bass. Every drum is synthesized from oscillators and noise, and scheduled ahead on the audio clock for tight timing.

  • Web Audio
  • Look-ahead scheduler

Audio-reactive 3D

An AnalyserNode feeds frequency data into a shader. Bass swells the core, highs ripple the surface, and 64 bars ring the orb like a spectrum.

  • Shader uniforms
  • AnalyserNode
  • Voice

Spatial audio

Three tones placed in 3D with HRTF panning. Drag them around your head and hear them move.

  • Scene
  • PannerNode HRTF
Headphones. Drag the orbs

Narration with live captions

A Higgsfield voiceover with word-by-word captions. Claude found the pauses in the audio to sync each phrase, and drew a seekable waveform.

  • Voice
  • Captions
  • Waveform

Press play to hear the tour.

0:00 / 0:23

Talking mascot

Generated character, generated voice. The avatar pulses and the ring glows with the loudness of each syllable.

  • Image
  • Voice
  • Amplitude tracking
Pip the studio fox
Tap the button and I'll introduce myself.

Video with generated sound design

The robot photo animated by Seedance, which also composed the servo whirs and beeps in the same pass.

  • Video
  • Audio

Interface sound kit

Nine product sounds synthesized on demand, no audio files. The speaker icon in the menu turns subtle hover and click sounds on for the whole page.

  • Web Audio
  • Sound design

Live spectrogram

Your microphone as a scrolling spectrogram. Whistle, hum or talk to paint it.

  • getUserMedia
  • FFT
Audio stays in your browser