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
Please check out the wiki
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!
You can check out The Roadmap!
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!
git clone [email protected]:ericyd/loop-supreme
cd loop-supreme
npm i
npm start
npm run build- 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/
- 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
- 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 ([email protected]) and copyright (c) 2011 Alejandro Paul ([email protected])
- MDN, what would we do without you