A UI for generating WebAudio code
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


WebAudio Generator

A UI for generating linear WebAudio code (https://webaudio.simmsreeve.com/)


A screenshot of WebAudio Generator


This tool was written to be used as an educational aid in a talk at London Audio Developers Meetup.

Video available here: An image of the WebAudio Talk


  • To add a node, click on an arrow
  • To "inspect" a node, click the node


  • Inputs
    • Microphone
    • File
    • Oscillator
  • "Modifier" Nodes
    • WebAssembly CustomWorklet
    • Gain
    • Delay
    • BiquadFilter
    • Analyser
  • Outputs
    • Speaker


The code was never supposed to be nice, but things got a bit out of hand...

Most of the code pretends to be immutable, but there are various places this pattern is un-expectedly broken. I foresee various painful bugs being introduced if development were to continue.

Also, I cringe at the method used to generate code. It's disgusting and you should definitely not try it at home.

Future (See GH Issues)

  • Support non-linear WebAudio graphs (probably using Cytoscape) - Would require a re-write
  • Improve UI & UX
  • Output to file


  1. Don't
  2. You'll need the following:
> brew install fswatch
> npm i -g browserify less

> npm i
> ./build.sh
> ./watch.sh

Useful Links

AudioWorklet + WebAssembly