Need help with WebAudioDesigner?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

129 Stars 13 Forks MIT License 77 Commits 1 Opened issues


WebAudioAPI GUI design tool

Services available


Need anything else?

Contributors list


WebAudioAPI GUI design tool

Available at :




Play Start all Oscillators and BufferSources
Graph - New Graph Clear current graph
Graph - Export as JavaScript file Export as simple JavaScript code
Graph - Link to this graph Display a URL that contain current graph
Add Node - (Node type) Add specified node
Add Knob Add knobs that controls parameter values
About Display info

Adding node

Select from menu "Add Node".

Adding knob

Select from menu "Add Knob".

Deleting node or knob

Select node/knob's pop-up menu "Delete" that will be appear when clicking node's upper left or knob's lower left corner orange square.

Make Connection

There are two types of connection, signals (green) and knob to parameter controls (light blue). Connections are made with dragging between appropreate connectors that are represented as semi-circles.

Signals : * connect "out" to "in". * or connect "out" to parameters (AudioParam) that has green connectors.

Controls : * knobs to number type parameters that has light-blue connectors.

Delete Connection

  • Click each connector, then select "Disconnection" from popup menu.
  • Click node's popup menu (orange square) and select "Disconnect". This will disconnect all connection from this node.

Sample patch





Wah with knob controls

AutoPan with knob controls

MediaElementSource and Tone Control

Vocoder voice


Licensed under MIT License except Impulse Response files (included in samples/ir folder).
Inpulse Response files are Licensed under Voxengo's license.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.