Analyze transients · Slice breaks · Generate variations · Sequence drums and bass · Export stems and MIDI
Overview · Features · Workflow · Architecture · Local Development
DNB CHOPSHOP is a dark, hardware-inspired production workspace built for fast drum & bass sketching. Drop in an audio loop and work from a focused browser interface that combines transient analysis, editable chops, variation generation, sequencing, sound shaping, and export tools.
The project is designed around a simple idea: reduce the distance between finding a sample and turning it into a usable DNB arrangement.
- Load audio directly into the browser.
- Detect transients and estimate tempo and musical key.
- Create editable slices that snap to detected transients.
- Audition every chop immediately from the interface.
- Generate straight, chopped, half-time, double-time, reversed, pitch-shifted, and stuttered ideas.
- Compare variations without leaving the main workflow.
- Favorite useful results and reuse them in an arrangement.
- Build ideas with 16-step drum, bass, and pad sequencers.
- Arrange chops, drums, bass, and texture lanes on a bar-based timeline.
- Explore DNB-oriented kits and patterns for liquid, jungle, neuro, rollers, and dark minimal styles.
- Shape material with filtering, drive, reverb, delay, and mood controls.
- Export WAV stems, a stereo mix bounce, and MIDI patterns.
- Keep sample processing local to the browser unless you explicitly save or export a result.
- Upload a sample — start with a break, loop, texture, or other audio source.
- Analyze it — estimate tempo and key, then detect useful transient points.
- Create chops — adjust slices and audition them from one workspace.
- Generate variations — test rhythmic and tonal transformations quickly.
- Build the idea — sequence drums and bass, then arrange the strongest parts.
- Export — save stems, a mix bounce, or MIDI for further work in a DAW.
The workstation uses browser audio APIs together with Tone.js and dedicated analysis, playback, preset, state, and variation modules. The audio layer is separated from the interface so analysis and sequencing logic can evolve without turning the main studio component into an unmaintainable blob.
DNB CHOPSHOP is a creative tool. You remain responsible for clearing any third-party rights attached to samples you use.
| Layer | Technology |
|---|---|
| Interface | React 19, TypeScript, Tailwind CSS |
| Routing | TanStack Router / TanStack Start |
| Audio | Tone.js, WaveSurfer.js, @tonejs/midi |
| State | Zustand, TanStack Query |
| Components | Radix UI primitives, shadcn/ui-style system |
| Build tooling | Vite 8, Bun, ESLint, Prettier |
src/
├── components/
│ ├── studio/ # Main production workspace
│ └── ui/ # Reusable interface primitives
├── lib/
│ └── audio/
│ ├── analysis.ts # Transient, tempo, and key analysis
│ ├── engine.ts # Playback and audio processing
│ ├── presets.ts # DNB-oriented sound and pattern presets
│ ├── store.ts # Audio session state
│ └── variations.ts# Chop and groove transformations
├── routes/
│ ├── index.tsx # Product landing page
│ ├── projects.tsx # Saved project view
│ └── studio.tsx # Studio route
└── styles.css # Theme and visual system
- Bun installed locally
- A modern browser with Web Audio API support
git clone https://github.com/levomm/DNB_CHOPSHOP.git
cd DNB_CHOPSHOP
bun install
bun run devOpen the local URL printed by Vite.
bun run build
bun run previewbun run lint
bun run formatDNB CHOPSHOP is an active prototype. The core product direction and interface are implemented, while browser compatibility, audio analysis accuracy, export behavior, and longer-session stability still need broader real-world testing before the project should be treated as production-ready.
No open-source license has been added yet. The source is publicly visible, but reuse, redistribution, and modification rights are not granted until a license is explicitly published.