Browser-based live looper for music performance and audio fun!

• How to use
• Motivation
• What features does this have?
• Where can I read more?
• Building / running locally
• Useful resources in my Web Audio journey
• Acknowledgements

How to use

Please check out the wiki

Motivation

I wanted to do some live looping on my 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!

What features does this have?

You can check out The Roadmap!

Where can I read more?

I blogged about this as I made it

• Part 12: v1.0 release, and project retro
• Part 11: Exporting stems and changing inputs
• Part 10: Keyboard bindings
• Part 9: Visualizing the waveform
• Part 8: Building and hosting
• Part 7: Latency and adding Track functionality
• Part 6: Workers and AudioWorklets
• Part 5: Record and loop a track
• Part 4: Adding a Scene
• Part 3: Metronome click
• Part 2: Adding a Metronome
• Part 1: New project: building a web-based audio looper!

Building / running locally

git clone git@github.com:ericyd/loop-supreme
cd loop-supreme
npm i
npm start
npm run build

Useful resources in my Web Audio journey

• https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
• https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Simple_synth: great example of building a simple OscillatorNode!
• https://github.com/mdn/webaudio-examples
• https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques#playing_the_audio_in_time
• https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API
• https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API
• https://www.1001freefonts.com/chicle.font (used in the logo)
• synchronization and timing
  • https://web.dev/audio-output-latency/
  • https://blog.paul.cx/post/audio-video-synchronization-with-the-web-audio-api/
    • https://blog.paul.cx/post/metronome/
    • https://meowni.ca/posts/metronomes/
    • https://web.dev/audio-scheduling/
  • Audio Worklet
    • https://developer.chrome.com/blog/audio-worklet/
    • https://googlechromelabs.github.io/web-audio-samples/audio-worklet/
    • https://developer.chrome.com/blog/audio-worklet-design-pattern/
    • https://github.com/GoogleChromeLabs/web-audio-samples/tree/main/src/audio-worklet/migration/worklet-recorder
• inspiration
  • https://github.com/pkalogiros/AudioMass/

Acknowledgements

• Metronome by ChangHoon Baek from Noun Project
• Cloudflare Pages has an amazing free hosting tier, and great admin and tooling
• create-react-app is still going strong and super useful
• Chicle font used in the logo, copyright (c) 2011 Angel Koziupa (sudtipos@sudtipos.com) and copyright (c) 2011 Alejandro Paul (sudtipos@sudtipos.com)
• MDN, what would we do without you