Interactive Audio Playground
A digital signal processing (DSP) workbench built with p5.js. It visualizes the impact of serial effects chains—Low Pass Filter, Distortion, Dynamic Compressor, and Reverb—on the frequency spectrum in real-time.
Initialization • Click 'Start Audio Engine' to load the audio sample • Click the play button to start/stop playback Manual Control • Use the sliders to adjust Filter Cutoff, Resonance, Distortion, and Reverb in real-time Quick Presets • Click Clean, Cyberpunk, Underwater, or Glitch for instant effect chains
Need DSP Engineering?
From prototypes to production-grade systems.
Seeing Sound
This workbench reveals the invisible physics of audio engineering. It visualizes how mathematical operations transform raw sound waves in real-time.
The Signal Chain
- Low Pass Filter (Subtractive): Like placing a hand over your mouth. It removes high frequencies, visible as the spectrum bars on the right disappearing. The sound becomes “warmer” or muffled.
- Distortion (Additive): Adds “grit” by mathematically treating the wave. Visually, you’ll see new frequency spikes appear that weren’t in the original signal—adding richness and aggression.
- Reverb (Time): Simulates a physical space (like a cathedral). Watch the spectrum bars fall slowly instead of instantly—that “tail” is the acoustic memory of the room.
How to Read the Analyzer
- Green (Input): The raw, untouched audio signal.
- Magenta (Output): The signal after passing through your effect chain.
By comparing the gap between Green and Magenta, you can see exactly what the algorithms are adding or taking away.
References
[1] p5.js. (n.d.). “Reference.” Retrieved from https://p5js.org/reference/ (Core graphics and interaction library).
[2] p5.sound. (n.d.). “p5.sound Reference.” Retrieved from https://p5js.org/reference/#/libraries/p5.sound (Web Audio API wrapper for the effects chain).