Hacker News
Show HN: Web Audio Studio – A Visual Debugger for Web Audio API Graphs
Hacker News · Mar 2, 2026 · Collected from RSS
Summary
Hi HN, I’ve been working on a browser-based tool for exploring and debugging Web Audio API graphs. Web Audio Studio lets you write real Web Audio API code, run it, and see the runtime graph it produces as an interactive visual representation. Instead of mentally tracking connect() calls, you can inspect the actual structure of the graph, follow signal flow, and tweak parameters while the audio is playing. It includes built-in visualizations for common node types — waveforms, filter responses, analyser time and frequency views, compressor transfer curves, waveshaper distortion, spatial positioning, delay timing, and more — so you can better understand what each part of the graph is doing. You can also insert an AnalyserNode between any two nodes to inspect the signal at that exact point in the chain. There are around 20 templates (basic oscillator setups, FM/AM synthesis, convolution reverb, IIR filters, spatial audio, etc.), so you can start from working examples and modify them instead of building everything from scratch. Everything runs fully locally in the browser — no signup, no backend. The motivation came from working with non-trivial Web Audio graphs and finding it increasingly difficult to reason about structure and signal flow once things grow beyond simple examples. Most tutorials show small snippets, but real projects quickly become harder to inspect. I wanted something that stays close to the native Web Audio API while making the runtime graph visible and inspectable. This is an early alpha and desktop-only for now. I’d really appreciate feedback — especially from people who have used Web Audio API in production or built audio tools. You can leave comments here, or use the feedback button inside the app. https://webaudio.studio Comments URL: https://news.ycombinator.com/item?id=47216773 Points: 12 # Comments: 1
Full Article
Visualize and debug Web Audio graphs Write Web Audio API code and instantly see the graph it creates. Inspect signal flow, tweak parameters, and hear every change in real time.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. 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 Start with a sine wave or jump into FM synthesis, convolution reverb, or HRTF spatialization. Each template is a working example you can explore and modify. 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' ]; Alpha · Desktop only Actively developed. New builds released regularly. Stay in the loop Get notified when new features drop — no spam, only updates. You can unsubscribe anytime. For more details, review our Privacy Policy.
Share this story