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