Practical Web Midi

I really love the possibilities of web midi and wanted to capture a few instances I use web midi for programming synths. The first iterations of it I saw were things like this drum machine, but I always felt there was room for very cool ideas. Programming complex synths has been one of my favorite uses.

What is Web Midi?

For a long time, the only way for midi based instruments to work with a computer has been with standard midi in a DAW (Digital Audio Workstation) like Ableton or Pro Tools. USB midi made this much easier for people to not need to understand midi connections and menu diving but for certain synths that have much deeper programming, web midi comes in handy.

Web Midi means you can interact with a Javascript based GUI in a browser to control your synths. In the case of my Roland D-05 I can send and recieve where my Korg Volca FM I can only recieve midi data. You can learn more about programming web midi at Smashing Magazine.

Web Midi Compatability

Web Midi only works (as of this writing) with Chrome, Opera, and Android Web View. I usually use Chrome on my Mac. You’ll also want to make sure the synth is hooked up and on before hitting the page you access, otherwise refresh the page. The first time you land you’ll be asked about permissions. Chris Wilson wrote a shim for using it in other browsers if you are planning on building something. WebMidi.js by Jean-Philippe Côté is a Javascript library that makes getting up and running for programming much easier.

Web Midi Practical Uses

When I first got my Roland D-05, it has a TON of custom sounds that are beautiful, but I eventually found myself wanting to understand how LA synthesis worked at least a bit better. The only way to edit patches on the synth is through a tiny LCD screen which means lots of menu diving.

The problem with menu diving is if you are learning a synth, it’s hard to get that stepped-back look at how things are connected together.

I did a search and found out a group called Bread and Butter Sounds had made a free editor using web midi. I liked it so much I made a video demo of using it so others could find out about it.

FM Madness

The other synth I have with a tiny LCD screen (and even fewer characters) is the Korg Volca FM. The amazing thing about this Volca is how massive the FM sounds. I think it’s easily one of the best Volcas and bang for your buck. I was using it for a long time as a e-piano synth live but recently it’s been more my bass synth as there are any number of cool bass sounds you can create.

Oscillator Sync not only has an entire series dedicated to this synth, he also uses this series to teach you FM synthesis too. He then walks you through a few patch builds. If you are looking to learn FM synthesis, this is the place to start. I found the process of building the patch very useful and informative.

On top of that, their site allows you to import some of their patches or use the editor. There’s even a random patch generator that will give you a randomized new patch that you can then tweak to your liking.

All of this web midi stuff is 100% free and for me really took some of my synths to the next level allowing me to create my own patches with ease as well as know how the synth was laid out.