AudioContext Sandbox - Online Web Audio API Visual Programming

This is a visual programming tool for the Web Audio API. It lets you drag-and-drop audio nodes (oscillators, filters, gain, delay, analyser, etc.) onto a canvas, connect them visually, and hear the result in real-time — all in your browser. No coding required.

Click on a node's output port (green circle on the right side), then drag to another node's input port (orange circle on the left side). A curved connection line will appear. Audio flows from output → input, following the Web Audio API routing model.

Browsers require a user gesture (click, tap, or keypress) before allowing audio playback. This prevents annoying auto-playing sounds. The "Start Audio" button initializes (or resumes) the AudioContext. Once started, you can build and modify your audio graph freely.

Sources: Oscillator (sine, square, sawtooth, triangle), Microphone Input.
Processors: Gain (volume control), BiquadFilter (lowpass/highpass/bandpass), Delay (echo effect), Analyser (visualization data).
Output: Destination (your speakers/headphones).
All nodes follow the standard Web Audio API specification.

Yes! Drag the Microphone Input node onto the canvas. When prompted, allow microphone access. The audio from your mic will flow through any connected effects chain — try adding a Delay or Filter to process your voice in real-time. This uses the getUserMedia API.

Right-click on a node to delete it (and all its connections). To remove a specific connection, right-click near the connection line on the canvas. You can also use the "Clear All" button to reset the entire canvas.

Yes! All audio processing happens in real-time using your browser's native Web Audio API engine. The visual nodes directly map to real AudioNode objects. Parameter changes (frequency, gain, filter cutoff, etc.) take effect immediately with smooth, sample-accurate transitions.