🥁 TR-808 Drum Machine

The legendary Roland TR-808, reimagined for the modern web

A fully-featured browser-based TR-808 drum machine that brings the iconic sounds that shaped hip-hop and electronic music to everyone, everywhere.

🎵 Try it live →

---

✨ Why This Project?

The TR-808 revolutionized music production and became the backbone of countless genres, but authentic hardware remains expensive and inaccessible. This web version democratizes these legendary sounds while showcasing the power of modern web audio technology.

No downloads. No plugins. Just authentic 808 beats in your browser.

🥁 Features

16-Step Sequencer

• 16-step grid for creating rhythmic patterns
• Loop playback with visual current step indicator
• Swing support for more natural grooves

Authentic TR-808 Sound Library

• Kicks: Classic, Deep, Punchy, Sub, Tight, Boomy
• Snares: Classic, Crispy, Fat, Dry, Clap, Rim Shot, Snap
• Hi-hats: Closed, Open, Tight, Long, Metallic
• Toms: High, Mid, Low
• Percussion: Cowbell, Congas (High/Mid/Low), Cymbal, Maracas

Advanced Controls

• BPM: Tempo control from 60 to 200 BPM
• Swing: Groove adjustment from 0 to 100%
• Master Volume: Global volume control
• Accent: 16-step accent system with volume control
• Mute/Solo: Mute and solo functions per track
• Tone Control: Pitch adjustment per track (-12 to +12 semitones)

Pattern Management

• Multiple pattern system (A, B, C, D)
• Pattern save and load functionality
• Pattern copy between banks
• JSON export/import
• Individual or global pattern clearing

Modern Interface

• Responsive interface for desktop and mobile screens
• Modern UI components with Radix UI
• Tailwind CSS styling
• Smooth animations and immediate visual feedback

🚀 Installation

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn

Install Dependencies

npm install

Run Development Server

npm run dev

The application will be available at http://localhost:5173

Build for Production

npm run build

Preview Production Build

npm run preview

🎵 Usage

Creating a Pattern

1. Click "+" to add a track
2. Select an instrument from the dropdown list
3. Click on steps in the grid to activate/deactivate beats
4. Adjust volume and parameters for each track

Playback Controls

• Play/Pause: Start or stop playback
• Stop: Stop and return to beginning
• BPM: Modify tempo
• Swing: Add groove to the rhythm

Pattern Management

• Use A, B, C, D buttons to switch between patterns
• Copy: Copy current pattern to another slot
• Clear: Clear current pattern
• Export: Save all patterns as JSON
• Import: Load patterns from JSON file

Advanced Features

• Accent: Enable accent and program accents on specific steps
• Mute/Solo: Control playback of each track individually
• Tone: Adjust pitch of each track

🛠 Available Scripts

• npm run dev: Development server with hot reload
• npm run build: Production build
• npm run preview: Preview production build
• npm run lint: Code linting with ESLint
• npm run lint:fix: Auto-fix ESLint errors
• npm run format: Code formatting with Prettier
• npm run format:check: Check code formatting
• npm run type-check: TypeScript type checking

🏗 Technical Architecture

Technologies Used

• React 19: UI Framework
• TypeScript: Static typing
• Vite: Build tool and development server
• Tailwind CSS: CSS framework
• Radix UI: Accessible UI components
• Web Audio API: Audio management

Project Structure

src/
├── components/          # React components
│   ├── ui/             # Reusable UI components
│   ├── Grid.tsx        # Sequencer grid
│   ├── Controls.tsx    # Playback controls
│   └── ...
├── core/               # Business logic
│   ├── AudioEngine.ts  # Audio engine
│   ├── SequencerEngine.ts # Sequencer logic
│   └── PatternManager.ts # Pattern management
├── hooks/              # Custom React hooks
├── types/              # TypeScript definitions
└── utils/              # Utilities

🎹 Keyboard Shortcuts

• Space: Play/Pause
• Escape: Stop
• 1-4: Switch pattern (A-D)

🤝 Contributing

We love contributions! Whether you're:

• 🐛 Reporting bugs
• 💡 Suggesting features
• 🎨 Improving the UI/UX
• 🔧 Fixing issues
• 📚 Writing documentation
• 🎵 Adding new sounds

How to contribute:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Setup

# Clone the repo
git clone https://github.com/jeco123/beatcraftery.git
cd beatcraftery

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

# Lint & format
npm run lint
npm run format

Project Roadmap

See ROADMAP.md for planned features and improvements.

🙏 Acknowledgments

• Roland Corporation for creating the legendary TR-808
• Web Audio API community for making browser audio possible
• Open source contributors who make projects like this possible

📄 License

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

---

Made with ❤️ for the global music community

⭐ Star this repo if you found it useful! ⭐

🎵 Try the live demo | 🐛 Report bugs | 💡 Request features