All projects · UI Components & Interactions
SoundForge: Interactive Sound Effects Studio
A procedural UI sound effects studio and multi-layer synthesizer built purely with the browser's Web Audio API and OfflineAudioContext — zero…
A procedural UI sound effects studio and multi-layer synthesizer built purely with the browser's Web Audio API and OfflineAudioContext — zero audio files or external runtime dependencies. Designers and developers can sculpt, layer, preview, randomise, arrange on a 5-lane timeline, test on interactive website buttons, and export pleasant interface sounds as 16-bit PCM WAV files or self-contained JavaScript snippets.
- Unified Web Audio synthesis engine driving both real-time playback and OfflineAudioContext buffer rendering across Sine, Square, Triangle, Sawtooth, and seeded white-noise layers
- 8 curated, pleasant UI sound recipes (Button Click, Hover, Notification, Success, Error, Alert, UI Transition, Whoosh) with instant preview and one-click preset reset
- Multi-layer architecture (up to 6 simultaneous layers) with per-layer frequency sweeps, detune, gain, offset, length, mute, duplicate, and delete controls
- Click-free ADSR envelope generator with live canvas curve preview plus shared BiquadFilter (lowpass/highpass/bandpass with automated sweep), stereo ConvolverNode reverb, and feedback delay
- Real rendered waveform visualizer with purple-to-blue gradient peak bars, dynamic time ruler, and animated playback playhead
- 44.1 kHz 16-bit mono PCM WAV encoder normalized to -1 dBFS alongside a syntax-highlighted, zero-dependency Web Audio JavaScript code generator
- Bonus 2-octave C4–E5 piano keyboard with scale highlighting and computer key mapping, 5-lane draggable 3.0 s timeline with WAV mixdown export, and a Live Preview UI strip
Built with: Web Audio API, OfflineAudioContext, ConvolverNode reverb, WAV PCM encoder, Canvas waveform, Vanilla JavaScript