A powerful and intuitive web-based drum machine built by Hugo Adona. Create beats, mix patterns, and unleash your rhythm creativity directly in your browser.
- Step Sequencer: Classic 16-step sequencing with visual feedback
- Multiple Drum Kits: Various drum sounds including hip-hop, electronic, acoustic, and vintage
- Real-time Playback: Hear your beats as you create them
- Pattern Management: Save, load, and manage multiple drum patterns
- Tempo Control: Adjustable BPM from 60 to 180+
- Volume Mixing: Individual volume controls for each drum element
- Swing & Groove: Add swing and groove to your patterns
- Export Options: Save your beats as audio files
- Responsive Design: Works on desktop, tablet, and mobile devices
- Keyboard Shortcuts: Quick access to all functions
Try DrumLab live: Demo Link (Update with your deployed URL)
- Kick Drums: Punchy 808s, acoustic kicks, electronic bass drums
- Snares: Crisp snares, claps, rim shots
- Hi-hats: Closed hats, open hats, shakers
- Cymbals: Crashes, rides, splashes
- Percussion: Toms, cowbells, tambourines, and more
- Electronic: Synthesized drums, digital percussion
- Frontend: HTML5, CSS3, JavaScript (ES6+)
- Audio: Web Audio API
- UI Framework: Vanilla JS with modern CSS
- Audio Processing: AudioContext, AudioBuffer
- Storage: LocalStorage for pattern saving
- Icons: Custom SVG icons
- Modern web browser with Web Audio API support
- No additional software required!
- Clone the repository:
git clone https://github.com/HugoAdona/drumlab.git
cd drumlab- Serve the files locally:
Using Python:
# Python 3
python -m http.server 8000
# Python 2
python -m SimpleHTTPServer 8000Using Node.js:
npx serve .Using PHP:
php -S localhost:8000- Open your browser and navigate to
http://localhost:8000
- Select a Kit: Choose from available drum kits
- Create a Pattern: Click on the step sequencer grid to add beats
- Press Play: Hit the play button to hear your creation
- Adjust Settings: Modify tempo, volume, and swing
- Save Your Work: Use the save function to store your patterns
- Play/Pause: Start or stop playback
- Stop: Stop and reset to beginning
- Tempo: Adjust BPM with the tempo slider
- Volume: Master volume control
- Swing: Add groove to your patterns
- Click Steps: Click on grid squares to activate/deactivate beats
- Pattern Length: Choose between 8, 16, or 32 steps
- Clear Pattern: Reset the current pattern
- Random Pattern: Generate a random beat pattern
Each row represents a different drum sound:
- Kick: Bass drum patterns
- Snare: Snare drum hits
- Hi-hat: Hi-hat patterns (closed/open)
- Crash: Cymbal accents
- Percussion: Additional percussion elements
| Key | Action |
|---|---|
Spacebar |
Play/Pause |
S |
Stop |
C |
Clear pattern |
R |
Random pattern |
1-8 |
Select drum kit |
↑/↓ |
Adjust tempo |
Enter |
Save pattern |
- Add audio files to the
sounds/directory - Update the kit configuration in
js/kits.js:
const drumKits = {
'custom-kit': {
name: 'Custom Kit',
sounds: {
kick: 'sounds/custom/kick.wav',
snare: 'sounds/custom/snare.wav',
hihat: 'sounds/custom/hihat.wav',
// ... more sounds
}
}
};Customize the appearance by modifying:
css/main.css- Main stylingcss/sequencer.css- Step sequencer stylescss/controls.css- Control panel styles
drumlab/
├── index.html # Main HTML file
├── css/
│ ├── main.css # Main stylesheet
│ ├── sequencer.css # Sequencer styles
│ ├── controls.css # Control panel styles
│ └── responsive.css # Mobile responsiveness
├── js/
│ ├── app.js # Main application logic
│ ├── sequencer.js # Step sequencer functionality
│ ├── audio.js # Audio engine
│ ├── kits.js # Drum kit definitions
│ └── storage.js # Pattern storage
├── sounds/
│ ├── kit1/ # Drum kit 1 samples
│ ├── kit2/ # Drum kit 2 samples
│ └── ... # Additional kits
├── assets/
│ ├── icons/ # UI icons
│ └── images/ # Background images
├── README.md
└── LICENSE
Patterns are stored in JSON format:
{
"name": "My Beat",
"tempo": 120,
"swing": 0,
"kit": "hip-hop",
"steps": 16,
"pattern": {
"kick": [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0],
"snare": [0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0],
"hihat": [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
}
}- Push your code to GitHub
- Go to repository Settings > Pages
- Select source branch (main/master)
- Your drum machine will be live at
https://yourusername.github.io/drumlab
- Connect your GitHub repository
- No build process needed
- Deploy instantly
- Import from GitHub
- No configuration required
- Auto-deploy on commits
- Audio Context: The Web Audio API requires user interaction to start
- Preload Sounds: All drum samples are preloaded for smooth playback
- Buffer Management: Efficient audio buffer handling for minimal latency
- Mobile Optimization: Touch-friendly interface for mobile devices
Beat makers and developers welcome! Contributions help make DrumLab even better.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/NewDrumKit) - Commit your Changes (
git commit -m 'Add epic drum kit') - Push to the Branch (
git push origin feature/NewDrumKit) - Open a Pull Request
- New Drum Kits: Add more sound libraries
- Effects: Reverb, delay, distortion
- Pattern Sharing: Import/export functionality
- Recording: Multi-track recording capabilities
- Visualization: Audio spectrum analyzer
- MIDI Support: External controller integration
- Some browsers may have audio latency issues
- Safari requires user interaction to start audio
- Mobile devices may have limited concurrent audio streams
This project is licensed under the MIT License - see the LICENSE file for details.
Hugo Adona
- GitHub: @HugoAdona
- Website: [Your Website]
- Web Audio API documentation and community
- Drum sample libraries and creators
- Beat makers and musicians who inspire creativity
- Open source audio projects
- Quotely - Random quote generator
- MarkdownMagic - Markdown editor
"Music is the universal language of mankind." - Henry Wadsworth Longfellow
Start creating your beats today with DrumLab! 🎵🥁