🥁 Web Audio Drum Machine

A browser-based drum machine featuring multiple drum kits, advanced swing timing, and real-time audio scheduling. Built with vanilla JavaScript and the Web Audio API.

✨ Features

🎵 Multiple Drum Kits

• Classic - Traditional rock/pop drum sounds
• Electronic - Digital and synthetic textures
• 808 - Iconic drum machine sounds with deep sub bass
• Vintage - Warm analog-style sounds with tape flutter
• Trap - Modern hip-hop oriented sounds with punch

🎛️ Advanced Controls

• Real-time BPM control (60-200 BPM)
• Sophisticated swing timing with multiple curve algorithms
• Per-track volume control and sound selection
• Variable pattern lengths (8, 16, or 32 steps per track)
• Custom audio file uploads for any track

🎹 Pattern System

• 4 independent tracks with up to 32 steps each
• Built-in preset patterns optimized for each kit
• Save/load pattern functionality with named storage
• Auto-save for session persistence
• Visual step sequencer with beat emphasis

📱 User Experience

• Hardware-inspired design with realistic controls
• Mobile-optimized touch interface with haptic feedback
• Keyboard shortcuts (Spacebar to play, 1-4 to trigger tracks)
• Real-time visual feedback during playback
• Sample-accurate timing using Web Audio API

🚀 Quick Start

1. Clone the repository:

   git clone https://github.com/yourusername/web-drum-machine.git
   cd web-drum-machine

2. Open in browser:

   # Serve locally (recommended)
   python -m http.server 8000
   # Or simply open drums.html in your browser

3. Start creating:

   • Click step buttons to create patterns
   • Press spacebar to play/pause
   • Use number keys 1-4 to trigger individual tracks
   • Experiment with different kits and swing settings

🎮 Controls & Interface

Transport Controls

• Play/Pause - Spacebar or click play button
• Stop - Stop button (resets to beginning)
• Clear All - Removes all patterns

Pattern Programming

• Step Buttons - Click to toggle steps on/off
• Track Length - Choose 8, 16, or 32 steps per track
• Clear Track - Remove all steps from a single track
• Volume Sliders - Adjust individual track levels

Sound Design

• Kit Selector - Switch between 5 different drum kits
• Sound Dropdown - Choose different sounds per track
• File Upload - Load your own audio samples
• BPM Slider - Real-time tempo control
• Swing Control - Add groove with advanced timing algorithms

Pattern Management

• Save Patterns - Name and store your creations
• Load Patterns - Recall saved patterns from dropdown
• Preset Buttons - Load genre-specific starting patterns

🛠️ Technical Features

Audio Engine

• Sample-accurate scheduling using Web Audio API's currentTime
• Advanced swing algorithms with multiple timing curves
• Buffer pooling for optimized memory usage
• Real-time sound synthesis for all built-in sounds
• Professional audio mixing with proper gain staging

Performance Optimizations

• Lookahead scheduling prevents audio dropouts
• Object pooling reduces garbage collection
• Efficient DOM updates using requestAnimationFrame
• Mobile gesture optimization with proper touch handling

Browser Compatibility

• Modern browsers with Web Audio API support
• Chrome, Firefox, Safari, Edge (latest versions)
• Mobile browsers (iOS Safari, Chrome Mobile)
• Progressive enhancement for older browsers

🏗️ Architecture

Core Classes

• EnhancedDrumMachine - Main orchestrator and sequencer
• EnhancedSoundGenerator - Real-time drum sound synthesis
• AdvancedSwing - Sophisticated timing algorithms
• DrumKitManager - Kit switching and sound management
• AudioBufferPool - Memory optimization for audio buffers

Design Patterns

• Observer pattern for UI updates
• Factory pattern for sound generation
• Object pooling for performance
• Modular architecture for maintainability

🎨 Customization

Adding New Drum Kits

// In EnhancedSoundGenerator class
generateCustomKick() {
    // Your custom kick drum synthesis
    const sampleRate = this.audioContext.sampleRate;
    // ... implement your sound generation
    return buffer;
}

Creating Custom Patterns

// Pattern format: array of 16 booleans per track
const myPattern = {
    name: 'Custom Beat',
    patterns: [
        { pattern: [true, false, true, false, ...], length: 16 }, // Kick
        { pattern: [false, false, true, false, ...], length: 16 }, // Snare
        { pattern: [true, true, true, true, ...], length: 16 }, // Hi-hat
        { pattern: [false, false, false, false, ...], length: 16 }  // Crash
    ]
};

Styling Customization

The hardware-inspired CSS uses CSS Grid and Flexbox with custom properties for easy theming:

:root {
    --primary-color: #ff6b35;
    --background-gradient: linear-gradient(135deg, #2c3e50, #34495e);
    --control-background: linear-gradient(145deg, #3a3a3a, #2c2c2c);
}

🙏 Acknowledgments

• Web Audio API specification and community
• Classic drum machines (Roland TR-808, TR-909) for inspiration
• Open source audio community for techniques and algorithms

📄 License

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