I love music. From doing acapella, I thought it would be good to have a tool that allows you to create some quick interpretations of music to share to others. This way, you can practice and hear pieces on your own to see how different sounds can blend together harmoniously!

What it Is

Accomp-ami is a tool to help musicians collaborate better by allowing a fast, iterative process of creating musical interpretations. Load in some accompaniment - a backing track, a partner's instrumentation, anything you want! Then record your own unique sounds (beatbox, duet, etc.), and either loop them back to layer on more sounds or practice your collaboration with other instruments. Easily pause or delete any layers (sounds) to create your desired, PERFECT piece.

How/Why it Was Built

Built in under 12 hours (probably 3-4 productive hours :D), I wanted to create a fun little project to demonstrate how to translate looping, which is typically done with a lot of hardware, into something completely accessible as a webapp online. These means young musicians can easily access and experiment with it, to start to get into beatboxing, looping, production, etc.!

With experience in React design patterns, I just had to come up with the design and features to implement, and hook everything together. The React Mic library was used to handle the recording functionality to save to a webm file, and for the recording visualization. Everything else is logic and native functionality!

Future Improvements

I hope to add more functionality such as sharing - possibly on Facebook, Instagram, other sites to again promote the collaboration aspect. Adding more user friendly features, such as sound manipulations, premade sounds (kicks, chords, etc.), to make it more similar to a loopstation will be cool as well.

One of the challenges was playing the audio. Currently, it plays using audio tags (was fast, simple). A big issue I noticed was the custom audio: as it was looping, it had some noticeable gaps. I started researching a bit, and eventually tried to implement the playback using the WebAudio API, but got stuck implementing it. I hope to transition to this if I continue further on this project, and also do a custom UI for the playback instead of the native audio player.

Share this project: