Samplr - Sample Editing Interface

Inspiration

When I downloaded FL Studio, I was excited to start producing. But in my production process I found that managing samples was tedious, limiting my interest in making music. However, Samplr helps manage samples with you, making the process more accessible.

What it does

Samplr allows you to compile samples and create a sample chop, and guides you through the process with nearest-beat rounding and ML-generated loop transitions.

How we built it

React frontend, FastAPI backend. Audio visualizer is done with Wavesurfer.js, nearest-beat rounding done with the web-audio-beat-detector library by chrisguttandin, neural net for transitions created and trained with TensorFlow, and Supabase + s3 for posting mp3s. Backend on Railway and frontend on Vercel.

Challenges we ran into

Supabase connection is always finnicky, and also it was hard to tell whether the beat-detector library and transition ML were working immediately because the change they have on music is not always obvious.

Accomplishments that we're proud of

Honestly just staying so focused, this is the first hackathon where I've ever finished a project and I was afraid of getting sidetracked with some confusing library or configuration, but it didn't happen!

What we learned

This is my first time connecting a GitHub library to a project, and my first time using TensorFlow (or any ML library) at all. Also, I had my roommate who produces (thanks Austin!) use the app and give me feedback. This ended up being very helpful, leading to the zoom-in feature and more precise selection to give users more precise control over the samples.

What's next for Samplr - Sample Editing Interface

AI-generated fills between clips!

Built With

• fastapi
• railway
• react
• s3
• supabase
• tensorflow
• vercel
• wavesurfer
• web-audio-beat-detector