EZ Web Audio

Appearance

Effects Chain ​

Chain delay, reverb, compressor, and EQ effects. Toggle each on/off, adjust parameters in real time, reorder them to hear the sonic difference, and switch between an oscillator and an audio file source.

Build, reorder, and hear an effects chain.

Source:
Plucked synth arpeggio at 120 BPM through the effect chain below
EQ
0.0dB
0.0dB
0.0dB
Compressor
-24dB
4.0:1
30dB
3ms
250ms
Delay
0.20s
25%
30%
Reverb
1.5s
30%
35%
Click Play to start

How It Works ​

Audio flows through the effects in a fixed signal path:

Source → Effect 1 → Effect 2 → Effect 3 → Effect 4 → Output

Each effect is inserted using addEffects(), which wires the effects into the audio graph in order. Reordering the effects changes the signal path -- putting compression before reverb sounds different from reverb before compression.

Building a Chain ​

typescript
import {
  createCompressor,
  createDelay,
  createEQ,
  createOscillator,
  createReverb,
} from 'ez-web-audio'

const source = await createOscillator({ frequency: 440, type: 'sawtooth' })

const delay = createDelay({ time: 0.3, feedback: 0.4, mix: 0.3 })
const reverb = createReverb({ decay: 2.5, wet: 0.35 })
const compressor = createCompressor({ threshold: -24, ratio: 4 })
const eq = createEQ({ low: 0, mid: 0, high: 2 })

// Effects are connected in array order
source.addEffects([delay, reverb, compressor, eq])
source.play()

Bypassing an Effect ​

typescript
delay.bypass = true // Dry signal passes through unaffected
delay.bypass = false // Effect re-enters the signal chain

Reordering Effects ​

Reorder by removing and re-adding effects in the new order:

typescript
// Move compressor before reverb
source.removeEffect(reverb)
source.removeEffect(compressor)
source.addEffects([compressor, reverb])

Cleanup ​

typescript
source.stop()
source.dispose() // Disconnects all effects and releases audio nodes

Effect Parameters ​

EffectKey ParametersNotes
Delaytime (0-1s), feedback (0-1), mix (0-1)Higher feedback = longer echo tail
Reverbdecay (seconds), wet (0-1)Simulates room reflections
Compressorthreshold (dBFS), ratio (N:1)Reduces dynamic range
EQlow, mid, high (dB gain)Three-band shelving/peak EQ

Further Reading ​