Show HN: Web Audio Studio – A Visual Debugger for Web Audio API Graphs

Source: Hacker News

Overview

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.

Features

• 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
• Insert an AnalyserNode between any two nodes to inspect the signal at that exact point in the chain.
• 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.
• Runs fully locally in the browser — no signup, no backend.

Motivation

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.

Status

This is an early alpha and desktop‑only for now.

Feedback

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: (Points: 14)