A modern drum sequencer built with Next.js, React, TypeScript, and Tone.js. Create beats with an intuitive step sequencer interface featuring multiple drum tracks, real-time playback, and MIDI export capabilities.
- 8-Track Step Sequencer: Individual controls for kick, snare, hi-hats, and crash
- Real-time Audio: Powered by Tone.js for high-quality audio playback
- Track Controls:
- Individual mute/solo for each track
- Pitch and velocity adjustment with visual knobs
- Custom track colors
- Track duplication and deletion
- Transport Controls: Play/stop, metronome, BPM adjustment (40-300)
- Flexible Grid: Adjustable step count (4-64 steps)
- MIDI Export: Export your patterns as MIDI files
- Keyboard Shortcuts: Spacebar to play/stop
- Responsive Design: Works on desktop and mobile devices
- Node.js 18+
- npm, yarn, pnpm, or bun
- Clone the repository
- Install dependencies:
npm install- Start the development server:
npm run dev- Open http://localhost:3000 in your browser
npm run build
npm start- Initialize Audio: Click "Initialize Audio" to start the audio engine
- Create Patterns: Click on the grid to activate/deactivate steps
- Adjust Tracks: Use the knobs to control pitch and velocity
- Control Playback: Use transport controls to play, stop, and adjust BPM
- Export: Save your patterns as MIDI files for use in DAWs
- Next.js 15 - React framework
- TypeScript - Type safety
- Tone.js - Web Audio API wrapper
- Tailwind CSS - Styling
- React Hooks - State management
- Web Audio API - Audio processing
src/
├── app/ # Next.js app directory
├── components/
│ ├── icons/ # SVG icon components
│ ├── sequencer/ # Sequencer-specific components
│ ├── ui/ # Reusable UI components
│ └── DrumSequencer.tsx # Main sequencer component
├── hooks/ # Custom React hooks
├── types/ # TypeScript type definitions
└── constants/ # Application constants
- Spacebar: Play/Stop toggle
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.