Create Beats Anywhere: Explore PadLab, a Browser-Based SP-404Create Beats Anywhere: Explore PadLab, a Browser-Based SP-404
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Finn's avatar
Finn Gedge Gibb
pro
ā€¢ 20h
šŸŽ¹ šŸŽ¶ PadLab: an SP-404 sampler that lives in your browser
I used to make beats on a Roland SP-404. Chop a sample, lay down a drum loop, play melodies over the top, resample, repeat. It's one of the most fun ways to make music there is. The problem is you need the hardware in front of you, you need the space to set it up, and if an idea hits while you're away from your gear, it's gone by the time you get back.
So I built the thing I wished existed: a browser-based SP-404 that captures that exact workflow, with nothing to buy and nothing to install. Open a tab and you're making beats.
The problem it solves
Hardware samplers are expensive and they tie you to a desk. Beginners can't justify the cost to find out if they even like sampling. Producers with ideas on the move have nowhere to put them. PadLab lowers the barrier to basically zero. If you want to learn the SP-404 workflow, capture a quick idea, or just mess around, you can do it from any laptop.
What it does
It's a faithful recreation of the SP-404 feel, not just the look. The core of it is built around two things the real hardware nails and most software forgets:
Chop. Load a drum break or a sample, slice it on the waveform (tap in time or auto-detect the hits), and each slice lands on its own pad ready to play. This is the heart of sampling and it's the most satisfying part to use.
Quantised recording. Hit record, get a one bar count-in, and your performance is captured locked to the beat. No mouse fumbling, no dead air at the start of your loop. Everything is keyboard driven so your hands stay on the pads the way they would on real hardware. Then you layer loops, resample them down, arrange them on a timeline, and export straight into your DAW.
How I built it (this is the fun part)
This project was as much about the workflow as the app. Here's the actual pipeline.
I started in Claude with the Figma MCP connected, and used it to turn my rough idea into a proper project brief before touching Make. That's where the thinking happened: the visual direction, typography, colour system, the UI layout, how the SP-404 workflow should map to a screen. Doing this planning up front meant I got the structure right early and conserved my AI budget for the complex build later instead of burning it re-prompting from scratch.
From there, using the Figma MCP, we built the design system straight into Figma, made a sample UI, and assembled a reference board packed with in-depth build specs. Then I spun up a new Figma Make project and imported that whole design board as context, so Make started with a fully briefed understanding of what it was building rather than a one-line prompt.
Then came the real work: a prototype first, then feature by feature, wiring each one up, testing, debugging, repeating. Seventy-four versions in total. Make's Plan feature was key for working through the complex tasks and integrations (the audio engine, quantised recording, the chop tool), and I leaned on higher-power models like Opus inside Make to push through the gnarly debugging and problem areas.
So the flow was: Claude + Figma MCP to plan and design, a spec-rich reference board to brief Make, then Make to build and iterate. Designing the hardware visually, briefing it thoroughly, and watching it become real playable software across 74 passes is a way of building that didn't exist a year ago.
šŸŒ Try it live: https://spill-size-79673265.figma.site/ šŸ”— Working file: https://www.figma.com/make/l5Izmvzog8il3W3IxUWyLS/PADLab--Sampler-Emulator---Digital-Audio-Workstation šŸŽØ Figma Community: https://www.figma.com/community/file/1649544820794263929/padlab-physical-sampler-emulator-audio-workstation
Built for the Config Makeathon with Figma Make + MCP. #ConfigMakeathon @figma
Have fun!
configmakeathonFigmamusicappUI DesignFigma Make
Dylan's avatar
Contra logo
Dylan Siegel
ā€¢ 13h
this is rad
Finn's avatar
Finn Gedge Gibb
pro
ā€¢ 5h
Cheers Dylan! Something a bit different for the music producer & audio professional community šŸ˜„
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started