Modulator

A graphical modular synthesizer, using the
Web Audio API.

Modulator is a totally static HTML/JS app. It requires a modern browser such as Chrome,
FireFox or Safari, but has no server-side code.

Usage

- Click any synth node from the palette at the right to add it to the canvas
- Use regular drag & drop to move audio nodes around in the canvas
- To connect two nodes:
- Place the mouse pointer over the source node
- Press the shift key
- Move the mouse pointer to the destination node
(but don't press the mouse button or you will start dragging the node)
- Release the shift key to make the connection
- To disconnect two nodes, simply make the same connection again,
and this time it will be removed
- Use the keyboard to play notes: note C3 is in Z, note C4 is in Q.

You can directly try it out here.

Contributing

Contributions are welcome. You can reach me via @lcrespom
on Twitter, or directly within GitHub.

- Instruments: please share your synth designs if you want them to be featured
in the presets section. Just open an issue with the synth's JSON and I will
evaluate it for inclusion.
- Themes: feel free to modify the main.css file to change the look & feel as
much as you like. The app is especially in need of a dark theme. I will
eventually add a theme selector option so the user can switch among a set of
available themes.
- Mobile version: Modulator works only partially in mobile, and is
designed and tested for the desktop browser only. For example, there is no way
to connect, disconnect or remove modules on a mobile or tablet.
A mobile-specific component layout and UX could be designed indepently, and
I would take charge of fitting the current components in it.
- Code: There are plenty of ways to improve and expand this application,
just check out the ToDo list below. The code is in TypeScript, but ES6/ES2015 and
plain old JavaScript are compatible with it.

ToDo

Check the ToDo list
for pending bugs, new features, UI improvements, and more.

SynthLib

The sound generation code of the application is also available as a UI-independent
JavaScript library called
SynthLib.
With it, you can load instruments that have
been previously designed with Modulator and play notes on them.

Browser limitations

1. Modulator has been tested to work in Chrome, FireFox and Safari.
Although Web Audio is available in most mobile platforms, only the desktop
version has been tested. Node drag & drop and connection will probably not work
in the mobile browsers.

2. The Line In node is not supported in Safari. Chrome should work, but if
fails, try with FireFox.

3. FireFox consumes a huge amount of CPU when Modulator is running. It is probably
a consequence of how Web Audio is implemented in FF.

References

- Chris Lowis (@chrislowis)
- His blog and web audio weekly newsletter
- His talk about synth history and web audio
- His github repo
- Synthesising Drum Sounds with the Web Audio API
- Chris Wilson (@cwilso) from Google
- His talk about web audio
- His github repo
- Midi synth
- Web audio playground
- Stuart memo (@stuartmemo)
- His web audio talk
- His fancy website with lots of small webaudio tools
- Steve Kinney
- His talk about web audio
- Great idea on emulating restartable oscillator by setting gain to 0 to stop and 1 to
play again
- Soledad Penades
- Hands On Web Audio presentation

Acknowledgements

The Modulator logo and application favicon are a design by
Marta Quer Bach