🥁 Metal Drums - Professional Web Drum Machine

Version 1.1.0 - Production Ready Release

A professional-grade drum machine web application built with React and TypeScript, featuring real drum samples, advanced performance controls, and musical notation rendering.

🚀 Quick Start

# Clone the repository
git clone https://github.com/WithClarity/metal-drums.git
cd metal-drums

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:5173 to start creating drum patterns!

🌐 Live Demo

Try the live application at: https://metal-drums.vercel.app

✨ Key Features

• 🎵 98 Professional Patterns across Metal, Post-Hardcore, Metalcore, and Jazz genres
• 🔊 Real Audio Samples from high-quality drum recordings
• 🎛️ 16-Step Sequencer with visual feedback and velocity controls
• ⚡ Real-Time Performance with keyboard shortcuts for live playing
• 🎚️ Professional Mixer with per-drum controls and master effects
• 🎼 Musical Notation - See your patterns rendered on drum staff notation
• 📱 Responsive Design - Works on desktop, tablet, and mobile

🎹 Live Performance

Use your keyboard to play drums in real-time:

• Q - Kick Drum
• W - Snare
• E - Hi-Hat (Closed)
• R - Hi-Hat (Open)
• T - Crash
• Y - Ride
• U - High Tom
• I - Mid Tom
• O - Low Tom

Transport controls:

• SPACE - Play/Pause
• S - Stop
• F - Generate Fill

📊 Pattern Library

98 Professional Patterns organized by genre:

• Metal (30 patterns): Heavy, aggressive rhythms with double-bass patterns
• Post-Hardcore (20 patterns): Dynamic builds and emotional breakdowns
• Metalcore (27 patterns): Technical patterns with blast beats
• Jazz (21 patterns): Swing, bebop, and Latin grooves

🎵 Audio Samples

High-quality drum samples sourced from SampleSwap.com - a fantastic resource for free, high-quality audio samples. All samples are royalty-free and perfect for music production.

Included Drum Kit:

• Pearl Kit Samples: Professional drum kit recordings
• Electronic Samples: Classic drum machine sounds
• Acoustic Samples: Natural drum recordings
• All samples: 44.1kHz WAV format optimized for web playback

🛠️ Build & Deploy

npm run build     # Build for production
npm run preview   # Preview production build
npm run lint      # Run code quality checks

📖 Full Documentation

For complete documentation, advanced features, and technical details, see DOCS.md.

🎨 User Interface

The application features a modern, professional interface with:

• Sequencer Tab: Main pattern programming interface
• Mixer Tab: Professional audio mixing and effects
• Notation Tab: Real-time drum staff notation
• Shortcuts Tab: Keyboard reference guide

🔧 Technology Stack

• React 18 with TypeScript for type-safe development
• Vite for fast development and optimized builds
• Web Audio API for low-latency audio playback
• Tailwind CSS for responsive, modern styling
• Lucide React for beautiful iconography
• Vercel Analytics for visitor tracking and insights

📊 Analytics & Deployment

The app includes Vercel Analytics for tracking:

• Page views and visitor statistics
• User engagement metrics
• Performance monitoring

🚀 Deployed on Vercel: The application is live at https://metal-drums.vercel.app with automatic deployments from the main branch.

📱 Cross-Platform

• Desktop: Full-featured interface with all controls
• Tablet: Touch-optimized responsive layout
• Mobile: Core functionality with simplified interface

🤝 Contributing

Contributions are welcome! Please feel free to submit issues, feature requests, or pull requests.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Third-Party Content

• Drum Samples: Courtesy of SampleSwap.com
• Icons: Lucide React (ISC License)
• Fonts: System fonts and web-safe alternatives

---

Built with ❤️ for drummers and music producers worldwide