Musings from my desk

New project: building a web-based audio looper!

2022-11-03 19:52:07 +0000 UTC

This is part 1 in a series about building a browser-based live looper

Vital stats

Summary

This is a project that I’m building in public!

I wanted to do some live looping on my (music) keyboard but wasn’t super satisfied with any of the options out there. I wanted something quick-and-dirty but made it (somewhat) easy to do a loop performance.

I’ve also been itching for a side project. Seemed like a great way to feed two birds with one scone!

Goals

  1. Build a fully client-side web app that works as a functional audio looper for live performances and recording
  2. Blog about my journey in learning the Web Audio API
  3. Do it as fast and lightweight as possible. Rough edges are OK!

Disclaimer: I don’t know if all my planned features are even possible! However, some examples online implement several of my desired features already, so I’m hopeful.

First steps

I’ve set up my repo and initialized my app with create-react-app (CRA). I really dislike all the complexities of setting up a new project, especially one that uses TypeScript, so CRA was the natural choice to simplify setup and get a working React app in almost no time.

I have been curious about using Tailwind for quite some time so I configured that as well. To get away from the default CRA styles, I grabbed an icon from iconmonstr to use as my favicon and “logo”. I’d love a bespoke logo but we’ll see.

Lastly, I wrote down my project roadmap. I considered using GitHub projects to track my progress, but with the ethos of keeping this project as lightweight as possible, I figured a simple bullet list of features would be more that sufficient. My goal is to write a blog post for every bullet, or group of bullets, that I can get done in a single working session. Setting up the repo, CRA, and Tailwind took about 30-40 minutes, and writing the project roadmap took about another 30 minutes. I fully expect some of the Web Audio API implementations to take me substantially longer since I’ve never used them before, but that is part of the fun!

Here’s a wireframe of what I’m imagining (at least right now)

loop supreme wireframe

Conclusion

Check back for more updates as I build out this project. If you haven’t seen any updates in 3 months, it probably means I abandoned it!