展示 HN:Web Audio Studio – Web Audio API 图形的可视化调试器
Show HN: Web Audio Studio – A Visual Debugger for Web Audio API Graphs

原始链接: https://webaudio.studio/

## Web Audio Studio:可视化与调试你的音频 Web Audio Studio 是一款基于浏览器的工具,用于可视化和调试 Web Audio API 代码。它允许用户通过单击即可立即查看代码创建的节点图,提供实时交互和音频反馈。 主要功能包括:通过屏幕上的旋钮进行交互式参数调整,通过波形/频谱分析检查信号流,以及清晰地可视化调制连接。该工作室提供了 20 个预构建模板,从基本声音到复杂的 3D 音频效果,使其非常适合学习和实验。 Web Audio Studio 专为网页开发者、音频程序员、学生以及任何对基于浏览器的音频感兴趣的人士设计。目前处于 Alpha 阶段,并积极开发桌面版本。用户可以注册以获取新功能和更新的通知。

## Web Audio Studio:Web Audio API 的可视化调试器 Alexgriss 发布了 Web Audio Studio (webaudio.studio),这是一款基于浏览器的工具,旨在简化 Web Audio API 图的调试和理解。该工具允许开发者编写和运行 Web Audio 代码,然后以交互式图形的方式可视化生成的信号流。 用户无需追踪 `connect()` 调用,即可检查图形结构,实时调整参数,并利用内置的可视化工具来处理诸如振荡器、滤波器和压缩器等节点。它包含 20 个常见音频设置的启动模板,有助于实验和学习。 重要的是,Web Audio Studio 完全在本地运行 – 无需账户或后端。它旨在解决大型 Web Audio 项目的复杂性问题,弥合简单教程与实际应用之间的差距。目前处于早期 alpha 阶段且仅支持桌面端,开发者正在积极寻求反馈,特别是来自经验丰富的 Web Audio API 用户。
相关文章

原文

Web Audio Studio

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.

联系我们 contact @ memedata.com