The Visual Way to Learn Web Audio API

Write JavaScript — see the audio graph it creates. Understand signal flow, tweak parameters in real time, and share your patch with a link.

Runs entirely in your browser. No account required.

Launch Studio

Code → Graph in one click

Write Web Audio API code in the editor, hit Run, and instantly see a live, interactive node graph on the canvas. Every node from the spec is supported.

Tweak parameters in real time

Every AudioParam is a knob you can grab and turn. Hear the result immediately — no need to re-run your code.

Inspect signals anywhere in the chain

Click any connection to insert an analyser. See the waveform or frequency spectrum at any point in your audio graph.

Visualize modulation and control flow

Modulation connections are shown as dashed lines. Each knob displays its modulation range — see exactly how an LFO shapes your sound.

20+ templates from basics to 3D audio

Full synthesis patches — FM synth, arpeggiator, kick from white noise — ready to play. Plus dedicated examples for every node type, so you always have a reference when you need one.

Audio Worklets

Audio Worklets are a way to run JavaScript code in a Web Worker, allowing you to create custom audio processing nodes.

Who is this for

const audience = [
  'Web developers learning the Web Audio API for the first time',
  'Audio programmers who want to see their signal chains visually',
  'Students and educators in DSP and sound design courses',
  'Anyone curious about how sound works in the browser'
];

Frequently asked questions

Everything you might want to know before launching the Studio.

01 What is Web Audio Studio?

Web Audio Studio is a free, browser-based interactive playground for learning the Web Audio API. You write JavaScript on the left, the audio graph it creates builds itself on the right, and you hear the result in real time. Every AudioParam in the graph becomes a draggable knob or selector you can tweak while the sound plays. It runs entirely in your browser and requires no account.

02 How is it different from MDN docs, CodePen, or a regular sandbox?

MDN explains the Web Audio API in text. CodePen runs your code but shows you nothing about the audio graph it creates. Web Audio Studio takes your Web Audio API JavaScript code and renders the resulting audio graph live next to the editor — with every AudioParam exposed as a real-time knob, and signal inspection on any connection. The code is the source of truth; the graph is a live visualization of what your code actually built.

03 Do I need to install anything or create an account?

No. The app runs at app.webaudio.studio in any modern browser. There is no install, no account, and no signup. All audio processing happens client-side in your browser. Nothing is sent to a server unless you choose to share a patch.

04 Which Web Audio API nodes are supported?

Every node defined in the Web Audio API specification is supported, including OscillatorNode, GainNode, BiquadFilterNode, IIRFilterNode, DelayNode, ConvolverNode, DynamicsCompressorNode, WaveShaperNode, AnalyserNode, AudioBufferSourceNode, ConstantSourceNode, StereoPannerNode, PannerNode (3D / HRTF), ChannelSplitterNode, ChannelMergerNode, MediaElementAudioSourceNode, MediaStreamAudioSourceNode, MediaStreamAudioDestinationNode, and custom AudioWorkletNode processors.

05 Can I use Audio Worklets?

Yes. You can write a custom AudioWorkletProcessor directly in the editor. The editor supports multiple files — your main patch and separate AudioWorklet files each get their own tab. The processor is registered, instantiated, and appears in the graph as a regular node, with its AudioParams exposed as draggable knobs.

06 Do you have examples to get started?

Yes. The editor ships with around 25 ready-made templates covering FM synthesis, AM synthesis, additive synthesis, convolver reverb, waveshaper distortion, LFO modulation, 3D panner, delay feedback, dynamics compression, microphone input, AudioWorklet processors, and more. Pick any template from the template selector to load it instantly.

07 Can I inspect the audio signal on a connection?

Yes. Click any connection in the graph to insert a live analyser on that edge. You will see the waveform and frequency spectrum for the signal flowing through that connection in real time.

08 Can I temporarily disable a node without rewriting code?

Yes. Every node in the graph has a bypass toggle. Bypassing a node routes the signal around it so you can A/B compare the effect without changing your code.

09 Can I share my patch with someone else?

Yes. Click Share to save your patch — the code is stored on our server and you get a short URL to send to anyone.

10 Who is Web Audio Studio for?

Web developers learning the Web Audio API for the first time, audio programmers who want to see their signal chains visually, students and educators in DSP and sound design courses, and anyone curious about how sound works in the browser.

11 How do I get help if I get stuck?

If you get stuck, try searching the blog for solutions or ask in the Discord server. If you need personal help, email [email protected].

12 Who built Web Audio Studio?

Web Audio Studio was built by Alex Griss. You can find more information about me and my work at alexgriss.tech.

From the Blog

All articles →

Tutorials and deep dives into the Web Audio API