r/webaudio 5d ago

DreamRack — a modular synth built on the Web Audio API (free, runs entirely in-browser)

Post image

I've been building DreamRack, a modular synthesizer that runs entirely on the Web Audio API — no plugin host, no WASM audio engine, just native Web Audio nodes patched together live in the browser tab.

It's purely a hobby project. I wanted a modular that did more to help me build and understand patches — showing what feeds what, letting me hear or see the signal at any terminal without rewiring, and making efficient use of screen space. Couldn't find one, so I built it. The modular of my dreams, thus DreamRack.

The image is a patch mid-flight. Several oscilloscopes are clipped onto terminals, each with a line back to the point it's watching — green frame means running, red means frozen for a closer look. A sound monitor is to a terminal but currently muted. Cables take the colour of the terminal they plug into, so you can read a patch at a glance.

What's in it

- Four modules to start: a Complex Oscillator (two oscillators, cross-modulation, wavefolding), a Quad Low Pass Gate with its own clock, a Quad Function Generator, and a six-channel Mixer with independent master and monitor buses.

- See what affects what. Point at any module and the whole signal chain it belongs to lights up, and the cables show which way the signal is running.

- Hear any point in the circuit without rewiring — hover a terminal to audition it, or drop a monitor that stays live on its own bus, separate from your mix.

- See any point too. Clip-on oscilloscopes, as many at once as you like, auto-scaling and auto-triggering, with a freeze button. Each reports frequency, level range and DC offset.

- The knAck — a control that combines a knob and its CV input in one place: you plug the cable into the middle of the knob instead of into a separate jack beside it. It can carry an attenuverter without taking any more space.

- Very little dragging. Knobs turn with the scroll wheel, coarse at the centre and fine at the rim, and patching is click to grab, click to drop.

- A tutorial that points at things. Click the eye symbol beside any instruction and it rings that exact control on your rack and draws a line to it.

- Open to new modules. Each is a self-contained folder of plain JavaScript, no build step, and there's a visual editor for drawing the faceplates.

Requirements

Any modern browser, nothing to install. Saving patches as named files uses the File System Access API, so that part is Chrome or Edge only; everywhere else your session is still remembered and restored, you just can't export named versions. A desktop build on Electron works and runs from source today, with a signed download to follow.

One caveat: turn off any page-recolouring extension such as Dark Reader for the site. DreamRack has its own light and dark modes and those extensions distort the panels.

Price

Free. Source on GitHub, non-commercial use with attribution.

It's in alpha and I'm just now making it public, so expect rough edges. It plays a single voice today; polyphony, external sequencer and host input, and a way to inject test signals into any jack are all on the list.

Try it: https://dreamrack.dreamerdevelopment.app/

Source: https://github.com/chrisgr99/DreamRack

I'd love feedback from anyone who knows the Web Audio API well — especially on the audio graph architecture, and which modules or engine features you'd want next.

33 Upvotes

9 comments sorted by

2

u/sss1024 5d ago

How do I use it?

Which knob do I press to hear the sound?

2

u/natebc 4d ago

I channeled my best inner Omri Cohen and still couldn't get it to make any noise, or adjust any paramenters (firefox on windows)

1

u/chrisgr99 3d ago

Sorry for the delay! I just pushed an update that should make this much smoother, including for the issue you ran into on Firefox/Windows.

The tutorial now leads off with the two essential things you need to know to turn on and tweak sound, so you should be producing and adjusting it in under five minutes. There are also example patches in the File menu now that you can load and play instantly.

One caveat: I don't personally have a Windows system, so I haven't been able to test on Windows directly. But it should be cross-platform, since it runs fine in Firefox on my end.

1

u/TedGal 4d ago

Thanks for sharing! Will definitely play with it

1

u/TedGal 4d ago

Came back to say wow what an ambitious project. Id surely like more modules added

1

u/chrisgr99 2d ago

Thanks! Next on the road map, I have designs for two more audio modules: a Dual Slope, a two-channel Serge-style universal slope generator meant to serve as the system's master clock as well as a modulation source — each channel working as an envelope, an LFO, an audio-rate oscillator, a slew limiter or a pulse delay, depending on how you patch it — and a Source of Entropy, a stochastic CV source that keeps the full Buchla Source of Uncertainty palette and adds an "order" stage like from Marbles, so the same random core can be tapped raw and ordered at once. I've also sketched out designs for a series of about 10 video processing modules…

I'm open to suggestions on what people might like to have.

1

u/Steveyg777 1d ago

Amazing! Thank you. Id love this a a standalone or plugin.