Zupiter: a Web-Based Modular Synthesizer
When I was a kid, I thought I didn’t like music, other people really enjoyed it, but I just didn’t get it. This all changed when I was 12, and I first saw the movie “Hackers”. You can think whatever you want of that movie, whether you think it’s a classic or everything that’s wrong with Hollywood, it had a mind-blowing soundtrack featuring several pioneering electronic music artists such as The Prodigy, Orbital and Underworld. Ever since I was exposed to this, I’ve been in love with electronic music.
In my mid-twenties, after I’d learned how to program, I started to wonder if there was a way that I could combine my passion for programming with my love of electronic music. I started reading books about sound synthesis, composition, etc. I wrote a web-based music app, MusicToy, back in 2012. This app originally used the Mozilla Audio Data API (this was before the Web Audio API was made available). The app is super simple, but that was the point, I wanted to create something that was beginner-friendly, and could allow anyone to create a fun pattern, without having any knowledge of music theory.
Today, I’d like to present to you Zupiter, a browser-based web app I’ve working on in my spare time for the past 8 months. It’s a modular synthesizer that runs in a web browser. You can use it to build a custom synthesizer using a visual programming language inspired by Pure Data and Max/MSP.
The app is written entirely in JavaScript and makes use of both the web audio and web MIDI APIs. You can play notes using your computer keyboard (A to L keys), using a built in sequencer node, or you can connect an external MIDI keyboard or sequencer to your computer and use that to play a synthesizer you created in Zupiter. The app also makes it possible to map physical knobs on an external MIDI controller to virtual knobs in the app, just by double-clicking on a virtual knob and then wiggling the knob you want to map on your device.
I created the app because I wanted to have a powerful tool that would allow me to experiment and understand exactly how specific sounds are made. I also created it because, to my knowledge, there is nothing else quite like it. Yes, there are already other browser-based music apps, but to my knowledge, at this time, no other browser-based music app offers this degree of flexibility and power.
Using Zupiter, you can build your own synth from your browser, without spending any money or installing any software. You can then share what you just created with friends instantly, by going to the Share tab. Your friends can then hear what you just made, modify it, and share a new version of it, also without installing any software on their machine. My hope is that Zupiter will lower the bar to entry, and get more people excited about making music.
If you’re curious about trying Zupiter, but a little confused about how it works, here are some examples to get you started:
- Triple-oscillator synth with overdrive (press Play, then hit A-L keys to make sound, responds to MIDI sustain pedal)
- Techno sequencer patterns with delay
- My attempt at emulating a 303-like acid sound
- Drm – cute wind-like path by pfig
- Most basic example using MIDI input (also playable with A-L keys)
Zupiter isn’t perfect, it’s only been tested in Chrome and Firefox, and it’s very possible you may encounter some bugs, but I’m really excited and curious to see what you can make with it, and I encourage you to share what you create. If you’re confused as to how it works, there is a Help tab in the app with some basic examples and instructions, and I’ve created a subreddit where you can ask any questions. Your feedback is more than welcome!
Trackbacks & Pingbacks
- New top story on Hacker News: Zupiter: A Web-Based Modular Synthesizer – Latest news
- Modular Music Synthesis On The Web | Crafts & HandyCraft store
- Java Weekly, Issue 302 | Baeldung
- Balancing Fun, Stress and Profit | Pointers Gone Wild
- Zupiter: Incredible Modular Synthesizer! - Midi Player Tool Kit
- NoiseCraft: a Browser-Based Visual Programming Language for Sound & Music | Pointers Gone Wild
Pointers Gone Wild 
Interesting project (how do you find time to eat sleep and work as well….!). Managed to play the rookies ‘When the Saints go Marching in’ using A to L keys – Fun sounds!
Might be there if I dig deeper (?) but would be nice to be able to enter ‘sequences’ notes/chords in a more classical music or chord bar/fake sheet style as well as the MonSeq control but guess can use the MIDI input
Note:
Did try in Edge – dies a death (but what doesn’t….) works great in Chrome.
Yeah. There are just so many directions I could take this, so many features I could add, it becomes hard to choose what to do next. I do have plans for an improved version that could actually be polyphonic. It would make sense to have a piano roll for that. For now MIDI input makes the most sense. I had a musician friend play it using a MIDI keyboard, and I was pretty impressed at the sounds we could make.
Hi Maxime,
I read your next post about how to make money with the stuff you create. I cannot answer, it’s not my domain of expertise. The only thing I can say is that Zupiter offered me quite exactly what I was looking for : a concrete/abstract way to produce what I call semi-algorithmic music.
Many years ago I used Autogam (http://autogam.free.fr) on my PC, that was quite good for producing “semi-algorithmic” midi scores that could be used in other programs for better output (a rude example here : https://soundcloud.com/a-or-not-b/jupiter-for-you-2006). I then bought a mac, and didn’t took the time to install a virtual PC on it to use the program again, and when back to my guitar…
What I wanted to suggest you that way is (if you find time and inspiration) to add Markov transition matrices to Zupiter (as you can see it on the example on the home page of Autogam) that allows to put a bit of random in the music process (x% of chances to use that sequencer, y% to use that one, etc.), just an idea.
I had a look at Pure Data, to do things like this, but the learning curve was too long. Your program is at the right level for beginners and allows to manage small projects in “few” hours of work. I showed my “simulation” of IN C from Terry Riley to the music teacher of my high school (I teach philosophy…) and he was an enthusiast about the opportunity to use your program with scholars in optional classes. Perhaps I way you can imagine selling the thing ?
So, as I believe you understand a bit French too I want to add :
Merci d’avoir pris le temps de réaliser un projet comme celui-ci. Il lui faut peut-être encore un peu de temps pour trouver plus d’utilisateurs. Je m’emploie pour ma part à en diffuser l’existence autour de moi. J’espère que mon retour aura au moins comme effet de vous avoir fait sourire, ce qui dans certaines circonstances vaut tout autant que de l’argent.
Bien à vous,
Thank you,
Niklaus V.
Thank you very much for the encouragement Niklaus. That’s the idea I had for Zupiter, to create something simpler and more intuitive than other options out there.
At the moment I don’t really have time for major upgrades for Zupiter because I’m pretty busy with work, but I will eventually try to design a more powerful tool that will be able to accomodate features like the one you requested.
I’m happy to hear you’re spreading the word. If people use Zupiter in a teaching context that makes me really happy, and it can remain free to use for that purpose. C’est sûr que ça me fait sourire des commentaires comme ça :)
Have a nice day,
– Maxime
Hello Maxime
Incredible app ! I thought that was not possible to create a modular synthesizer with a web based application … and you do it. Bravo. That will be precious for me for my own development (Unity based). Finally I will not buy a Moog ;-)
As say Niklaus, I can confirm that Markov algo is very useful for generative music. The algo is not so complex, I’m the developer of Autogam (twenty years ago!!). I could send you the source code if you want but it could be more quick for you to develop from ground this algo.
I know, it’s not the goal of your app to build generative music, but have a look to the Korg wavestate. It’s a synthesizer of course but with some capabilities to generate music.
Merci pour votre incroyable Zupiter. Mon week end va être bien occupé !
Thierry
Thank you Thierry for a very kind comment :)
I like Zupiter a lot for what it offers as a functional browser-based music app. However I think there are some things that would be pretty neat to implement if you’re still putting any more work into it…
Node grouping. I think it’d be as simple as being able to draw boxes (which can be labeled) in the layout space and then being able to pin the other nodes to them. Then if a box were moved around, the other nodes would drag along with it. Such would also be great to combine with some kind of copy-paste functionality.
Next would be a routing node. Equivalent to using an add node to add zero, but collapses to a single spot in the UI. Just gives the user an option to move patches off to the side, so they can make arrangements more circuit-like rather than overlapping spaghetti. If implemented to combine and work with that grouping thing, routing nodes would also be great for adding multiple patch points to what is effectively a user created module block.
Some way of dragging a node block over a patch line and having it automatically hook up. Probably require a key to be pressed during the drag, to ensure it’s done intentionally. I figure that’d be more difficult to do programming-wise, but it’d improve convenience in building things where adding more stuff happens as an afterthought.
Logic test nodes. Just your basic boolean conditions for returning 1 or 0 as an output, depending on the “, =, ≠” operators with two inputs. Then it’d be a lot easier to build selectors or toggles, or sequentially fire off impulses with an LFO or other triggering condition, or try to make some user-created filters.
A node that measures amplitude (if possible? not sure if latency problems limit such), I could picture that being used to make limiters or do some more user created envelope-like effects.
Being able to hold down some key to drag-navigate around the working area. On a desktop browser, having to use the scroll-bars gets old quicker than you’d think. Would say space bar like the grab tool in Photoshop, but I see that’s already being used for the play/stop toggle.
Not sure if all those suggestions make sense, but I thought I’d put them out there. At least it seems to me just a few of them would make Zupiter feel more feature-complete.
I generally agree with you. It’s been obvious for a long time that grouping and also the ability to copy and paste would be needed to really take Zupiter to the next level. The problem is that, unfortunately my day job as a software engineer is pretty demanding. To really improve Zupiter would take a major refactoring, and this is a big project, and at this time, I feel like I need to de-stress when I come home from work, because I was getting close to burnout. Sad but true reality when it comes to side-projects and open source software.