Mobile WebAudio Synth

Created 2020-01-20 / Edited 2020-01-20

I got a Pocket Operator PO-33 a while back, and find it super fun -- it is minimalist and usable. It inspires me to play around with beats and tunes ... and it also inspires me to work on my own samplers, sequencers, and synths.

Let's see what we can do with Web Audio these days! Starting with a basic VueJS app, I googled lots of stuff. Somewhat randomly, I wanted a Wicki-Hayden hexagon style keyboard, so had to find some CSS that makes hex-buttons. I'll probably switch to this Hexi-Flexi-Grid at some point, to make dynamically sized hexagons easier, but these work.

Combine that with a simple synth, and now we have a playable thing. I had to make some tweaks to get it to work tolerably on my phone -- fix the layout size, use touch events. Unfortunately it isn't very usable at this point due to a sizeable delay between pushing a button and the sound. I'm going to write a pure-JS snippet to eliminate any overhead from VueJS, and if that is also slow then I'm not sure what I'll do. It's kinda cool that I can use Web Audio ... and I'd sure like to keep using it. We'll see!

Other ideas ... so many. I want to give it access to your microphone so you can record a live sample. The PO-33 then lets you pitch the sample (by speeding it up and slowing it down) and maps it to the keys. I'd like to do that, as well as try a pitch change while keeping the duration. Probably after that is doing some sequencing and/or looping. The PO-33 also has one-shot mode for drums, so might do that. So many things!

Check out the Demo Build and the Github Repo.