To get the clearest idea of what this is, skip the reading and just watch this demo: https://www.youtube.com/watch?v=WmD76k6nBVs&feature=youtu.be

Inspiration

Perhaps the most iconic instrument in contemporary music – especially hip-hop – is the sampler/sequencer (here's one of my favorite videos about how some beautiful music came from it https://youtu.be/SENzTt3ftiU). In short; it's an instrument that takes any sample of audio – speech, music, drums – chops it into 16 to 32 discrete sounds, and then lets you play those sounds as though they were notes on a keyboard. It also lets you sequence/save what you play; when you record, it determines where in a 32-bar sequence an individual note you played should go, and then it plays back that sequence later on.

It costs in the four figures, though; we wanted to build something similar that'd work out of your browser, would be compatible with even the cheapest (starting at $20) controller/pad/keyboard, and would be easy for kids & adults to use. To that end, we built it with React.js, and for the audio input we take in and chop any YouTube URL.

What it does

Our tool does exactly what we described the iconic MPC sampler/sequencer does; it lets you take in any audio input (via YouTube), chops it into 24 discrete sounds, and lets you play those sounds and sequence/save them. Once you're recorded your playing (and it sequences what you've made), your URL automatically becomes share-able so that you can share your creation with anyone!

How we built it

Lot's of React, a WebMIDI library, convoluted sequencer logic, lots of tacky nostalgic CSS and GIFs :)

Challenges we ran into

The logic behind writing a sequencer is actually kinda complicated, and it took us a while to wrap our heads around. We also attempted making this a multi-track instrument, but keeping time synchronized in JavaScript is challenging enough that we decided to defer that to after the hackathon.

Accomplishments that we're proud of

It's hard to build a sequencer! We built one. We turned a several hundred/thousand dollar instrument into one that is now accessible to anyone with a laptop and maybe $20. We made an instrument inspired by what the pros use, but that's accessible to even a 4-year old who just wants to make a Baby Shark remix.

What's next for MIXBOY Advance

Turning it into a full-fledged multi-track sequencer instead of just one sample one track. Figuring out better ways to process the audio. Putting it in front of kids to see what kinds of creative stuff they can come up with.

Built With

Share this project:

Updates