[{"data":1,"prerenderedAt":108},["ShallowReactive",2],{"\u002Ftlt-2020.01.19-mobile-webaudio-synth":3},{"id":4,"title":5,"body":6,"createdAt":93,"description":94,"draft":95,"extension":96,"image":97,"mastodonThread":98,"meta":99,"navigation":100,"path":101,"seo":102,"stem":103,"tags":104,"updatedAt":106,"__hash__":107},"content\u002FTLT - 2020.01.19 - Mobile WebAudio Synth.md","Mobile WebAudio Synth",{"type":7,"value":8,"toc":89},"minimark",[9,24,58,71,74],[10,11,12,17,18,23],"p",{},[13,14],"img",{"src":15,"align":16},"\u002Fimg\u002FPO33.jpg","right"," I got a ",[19,20,22],"a",{"href":21},"\u002Fpocket-operator-po-33","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.",[10,25,26,27,33,34,39,40,45,46,51,52,57],{},"Let's see what we can do with ",[19,28,32],{"href":29,"rel":30},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FWeb_Audio_API",[31],"nofollow","Web Audio"," these days! Starting with a basic ",[19,35,38],{"href":36,"rel":37},"https:\u002F\u002Fvuejs.org\u002F",[31],"VueJS app",", I googled lots of stuff. Somewhat randomly, I wanted a ",[19,41,44],{"href":42,"rel":43},"https:\u002F\u002Fen.m.wikipedia.org\u002Fwiki\u002FWicki-Hayden_note_layout",[31],"Wicki-Hayden hexagon style keyboard",", so had to find some ",[19,47,50],{"href":48,"rel":49},"https:\u002F\u002Fwww.codesmite.com\u002Farticle\u002Fhow-to-create-pure-css-hexagonal-grids",[31],"CSS that makes hex-buttons",". I'll probably switch to this ",[19,53,56],{"href":54,"rel":55},"https:\u002F\u002Fvmcreative.github.io\u002FHexi-Flexi-Grid\u002F",[31],"Hexi-Flexi-Grid"," at some point, to make dynamically sized hexagons easier, but these work.",[10,59,60,64,65,70],{},[13,61],{"src":62,"align":63},"\u002Fimg\u002Fsample_mob_screenshot1.png","left"," Combine that with a ",[19,66,69],{"href":67,"rel":68},"https:\u002F\u002Fodino.org\u002Femit-a-beeping-sound-with-javascript\u002F",[31],"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!",[10,72,73],{},"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\u002For looping. The PO-33 also has one-shot mode for drums, so might do that. So many things!",[10,75,76,77,82,83,88],{},"Check out the ",[19,78,81],{"href":79,"rel":80},"https:\u002F\u002Fawwaiid.github.io\u002Fsample-mob-web\u002F",[31],"Demo Build"," and the ",[19,84,87],{"href":85,"rel":86},"https:\u002F\u002Fgithub.com\u002Fawwaiid\u002Fsample-mob",[31],"Github Repo",".",{"title":90,"searchDepth":91,"depth":91,"links":92},"",2,[],"2020-01-20T14:06-05:00"," 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.",false,"md","img\u002Fsample_mob_screenshot1.png",null,{},true,"\u002Ftlt-2020.01.19-mobile-webaudio-synth",{"title":5,"description":94},"TLT - 2020.01.19 - Mobile WebAudio Synth",[105],"blog","2020-01-20T14:14-05:00","J3UaREITUO_K9k7OYM5mmnaxdc6hN9648vuXblLyDj0",1778988314667]