{"id":28906371,"url":"https://github.com/hugoadona/drumlab","last_synced_at":"2025-07-21T10:02:37.911Z","repository":{"id":298835621,"uuid":"1000758518","full_name":"HugoAdona/drumlab","owner":"HugoAdona","description":"A powerful and intuitive web-based drum machine built by Hugo Adona.","archived":false,"fork":false,"pushed_at":"2025-06-13T05:58:45.000Z","size":7,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-21T14:41:18.058Z","etag":null,"topics":["drum","drum-kit","drum-machine"],"latest_commit_sha":null,"homepage":"https://drumlab.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HugoAdona.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-12T09:23:39.000Z","updated_at":"2025-06-13T06:05:48.000Z","dependencies_parsed_at":"2025-06-13T06:42:35.970Z","dependency_job_id":"9f270fc2-bcf1-4bda-a85b-b868cd28f838","html_url":"https://github.com/HugoAdona/drumlab","commit_stats":null,"previous_names":["hugoadona/drumlab"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/HugoAdona/drumlab","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HugoAdona%2Fdrumlab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HugoAdona%2Fdrumlab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HugoAdona%2Fdrumlab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HugoAdona%2Fdrumlab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HugoAdona","download_url":"https://codeload.github.com/HugoAdona/drumlab/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HugoAdona%2Fdrumlab/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266278125,"owners_count":23904036,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drum","drum-kit","drum-machine"],"created_at":"2025-06-21T14:32:43.208Z","updated_at":"2025-07-21T10:02:37.905Z","avatar_url":"https://github.com/HugoAdona.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DrumLab 🥁\n\nA powerful and intuitive web-based drum machine built by Hugo Adona. Create beats, mix patterns, and unleash your rhythm creativity directly in your browser.\n\n## 🎵 Features\n\n- **Step Sequencer**: Classic 16-step sequencing with visual feedback\n- **Multiple Drum Kits**: Various drum sounds including hip-hop, electronic, acoustic, and vintage\n- **Real-time Playback**: Hear your beats as you create them\n- **Pattern Management**: Save, load, and manage multiple drum patterns\n- **Tempo Control**: Adjustable BPM from 60 to 180+\n- **Volume Mixing**: Individual volume controls for each drum element\n- **Swing \u0026 Groove**: Add swing and groove to your patterns\n- **Export Options**: Save your beats as audio files\n- **Responsive Design**: Works on desktop, tablet, and mobile devices\n- **Keyboard Shortcuts**: Quick access to all functions\n\n## 🎹 Demo\n\nTry DrumLab live: [Demo Link](#) *(Update with your deployed URL)*\n\n## 🎵 Sound Library\n\n- **Kick Drums**: Punchy 808s, acoustic kicks, electronic bass drums\n- **Snares**: Crisp snares, claps, rim shots\n- **Hi-hats**: Closed hats, open hats, shakers\n- **Cymbals**: Crashes, rides, splashes\n- **Percussion**: Toms, cowbells, tambourines, and more\n- **Electronic**: Synthesized drums, digital percussion\n\n## 🛠️ Tech Stack\n\n- **Frontend**: HTML5, CSS3, JavaScript (ES6+)\n- **Audio**: Web Audio API\n- **UI Framework**: Vanilla JS with modern CSS\n- **Audio Processing**: AudioContext, AudioBuffer\n- **Storage**: LocalStorage for pattern saving\n- **Icons**: Custom SVG icons\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Modern web browser with Web Audio API support\n- No additional software required!\n\n### Installation\n\n1. Clone the repository:\n```bash\ngit clone https://github.com/HugoAdona/drumlab.git\ncd drumlab\n```\n\n2. Serve the files locally:\n\n**Using Python:**\n```bash\n# Python 3\npython -m http.server 8000\n\n# Python 2\npython -m SimpleHTTPServer 8000\n```\n\n**Using Node.js:**\n```bash\nnpx serve .\n```\n\n**Using PHP:**\n```bash\nphp -S localhost:8000\n```\n\n3. Open your browser and navigate to `http://localhost:8000`\n\n### Quick Start\n\n1. **Select a Kit**: Choose from available drum kits\n2. **Create a Pattern**: Click on the step sequencer grid to add beats\n3. **Press Play**: Hit the play button to hear your creation\n4. **Adjust Settings**: Modify tempo, volume, and swing\n5. **Save Your Work**: Use the save function to store your patterns\n\n## 🎹 Usage Guide\n\n### Basic Controls\n\n- **Play/Pause**: Start or stop playback\n- **Stop**: Stop and reset to beginning\n- **Tempo**: Adjust BPM with the tempo slider\n- **Volume**: Master volume control\n- **Swing**: Add groove to your patterns\n\n### Step Sequencer\n\n- **Click Steps**: Click on grid squares to activate/deactivate beats\n- **Pattern Length**: Choose between 8, 16, or 32 steps\n- **Clear Pattern**: Reset the current pattern\n- **Random Pattern**: Generate a random beat pattern\n\n### Drum Elements\n\nEach row represents a different drum sound:\n- **Kick**: Bass drum patterns\n- **Snare**: Snare drum hits\n- **Hi-hat**: Hi-hat patterns (closed/open)\n- **Crash**: Cymbal accents\n- **Percussion**: Additional percussion elements\n\n### Keyboard Shortcuts\n\n| Key | Action |\n|-----|--------|\n| `Spacebar` | Play/Pause |\n| `S` | Stop |\n| `C` | Clear pattern |\n| `R` | Random pattern |\n| `1-8` | Select drum kit |\n| `↑/↓` | Adjust tempo |\n| `Enter` | Save pattern |\n\n## 🎨 Customization\n\n### Adding New Drum Kits\n\n1. Add audio files to the `sounds/` directory\n2. Update the kit configuration in `js/kits.js`:\n\n```javascript\nconst drumKits = {\n  'custom-kit': {\n    name: 'Custom Kit',\n    sounds: {\n      kick: 'sounds/custom/kick.wav',\n      snare: 'sounds/custom/snare.wav',\n      hihat: 'sounds/custom/hihat.wav',\n      // ... more sounds\n    }\n  }\n};\n```\n\n### Styling\n\nCustomize the appearance by modifying:\n- `css/main.css` - Main styling\n- `css/sequencer.css` - Step sequencer styles\n- `css/controls.css` - Control panel styles\n\n## 📁 Project Structure\n\n```\ndrumlab/\n├── index.html              # Main HTML file\n├── css/\n│   ├── main.css           # Main stylesheet\n│   ├── sequencer.css      # Sequencer styles\n│   ├── controls.css       # Control panel styles\n│   └── responsive.css     # Mobile responsiveness\n├── js/\n│   ├── app.js             # Main application logic\n│   ├── sequencer.js       # Step sequencer functionality\n│   ├── audio.js           # Audio engine\n│   ├── kits.js            # Drum kit definitions\n│   └── storage.js         # Pattern storage\n├── sounds/\n│   ├── kit1/              # Drum kit 1 samples\n│   ├── kit2/              # Drum kit 2 samples\n│   └── ...                # Additional kits\n├── assets/\n│   ├── icons/             # UI icons\n│   └── images/            # Background images\n├── README.md\n└── LICENSE\n```\n\n## 🎵 Pattern Format\n\nPatterns are stored in JSON format:\n\n```json\n{\n  \"name\": \"My Beat\",\n  \"tempo\": 120,\n  \"swing\": 0,\n  \"kit\": \"hip-hop\",\n  \"steps\": 16,\n  \"pattern\": {\n    \"kick\": [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0],\n    \"snare\": [0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0],\n    \"hihat\": [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]\n  }\n}\n```\n\n## 🚀 Deployment\n\n### GitHub Pages\n\n1. Push your code to GitHub\n2. Go to repository Settings \u003e Pages\n3. Select source branch (main/master)\n4. Your drum machine will be live at `https://yourusername.github.io/drumlab`\n\n### Netlify\n\n1. Connect your GitHub repository\n2. No build process needed\n3. Deploy instantly\n\n### Vercel\n\n1. Import from GitHub\n2. No configuration required\n3. Auto-deploy on commits\n\n## 🎹 Performance Tips\n\n- **Audio Context**: The Web Audio API requires user interaction to start\n- **Preload Sounds**: All drum samples are preloaded for smooth playback\n- **Buffer Management**: Efficient audio buffer handling for minimal latency\n- **Mobile Optimization**: Touch-friendly interface for mobile devices\n\n## 🤝 Contributing\n\nBeat makers and developers welcome! Contributions help make DrumLab even better.\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/NewDrumKit`)\n3. Commit your Changes (`git commit -m 'Add epic drum kit'`)\n4. Push to the Branch (`git push origin feature/NewDrumKit`)\n5. Open a Pull Request\n\n### Contributing Ideas\n\n- **New Drum Kits**: Add more sound libraries\n- **Effects**: Reverb, delay, distortion\n- **Pattern Sharing**: Import/export functionality\n- **Recording**: Multi-track recording capabilities\n- **Visualization**: Audio spectrum analyzer\n- **MIDI Support**: External controller integration\n\n## 🐛 Known Issues\n\n- Some browsers may have audio latency issues\n- Safari requires user interaction to start audio\n- Mobile devices may have limited concurrent audio streams\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 👨‍💻 Author\n\n**Hugo Adona**\n- GitHub: [@HugoAdona](https://github.com/HugoAdona)\n- Website: [Your Website]\n\n## 🎵 Acknowledgments\n\n- Web Audio API documentation and community\n- Drum sample libraries and creators\n- Beat makers and musicians who inspire creativity\n- Open source audio projects\n\n## 🔗 Related Projects\n\n- [Quotely](https://github.com/HugoAdona/quotely) - Random quote generator\n- [MarkdownMagic](https://github.com/HugoAdona/markdownmagic) - Markdown editor\n\n## 🎼 Musical Inspiration\n\n*\"Music is the universal language of mankind.\"* - Henry Wadsworth Longfellow\n\nStart creating your beats today with DrumLab! 🎵🥁","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhugoadona%2Fdrumlab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhugoadona%2Fdrumlab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhugoadona%2Fdrumlab/lists"}