🎵 Retro Beat Machine

An interactive drum sequencer with AI-powered beat generation and retro pixel aesthetics.

Features

• 🎤 Voice Input: Speak your beat requests using OpenAI's Whisper API
• 🤖 AI Beat Generation: Generate beats from text descriptions using GPT-4
• 🎛️ Manual Sequencer: 16-step drum sequencer with kick, snare, and hi-hat
• 🎨 Retro Pixel Style: Authentic 8-bit aesthetic with neon colors
• 🎵 Real-time Audio: Professional drum sounds using Tone.js
• 🎯 Preset Library: 10 different genre presets (rock, hip-hop, electronic, etc.)

Quick Start

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Open your browser and navigate to http://localhost:5173/

OpenAI API Setup (Optional)

For voice input and AI-powered beat generation, you'll need an OpenAI API key:

1. Get an OpenAI API key from OpenAI Platform

2. Create a .env file in the project root:

   cp .env.example .env

3. Add your API key to the .env file:

   VITE_OPENAI_API_KEY=your_actual_api_key_here
   

4. Restart the development server for changes to take effect

Usage

Without OpenAI API Key

• ✅ Text input with local beat mapping
• ✅ Manual sequencer editing
• ✅ Preset selection
• ✅ Real-time playback
• ❌ Voice input (disabled)
• ❌ AI-powered beat generation (falls back to local mapping)

With OpenAI API Key

• ✅ All features above
• ✅ Voice input with speech recognition
• ✅ Advanced AI beat generation from natural language

How to Use

1. Text Input: Type descriptions like:

   • "heavy metal drums"
   • "chill hip hop beat"
   • "fast electronic dance"

2. Voice Input: Click the microphone and speak your request

3. Manual Editing: Click the sequencer grid to add/remove drum hits

4. Preset Selection: Use the genre buttons for quick beat loading

5. Playback Controls: Play, pause, stop, and adjust tempo (60-200 BPM)

Tech Stack

• Frontend: React + TypeScript + Vite
• Audio: Tone.js for synthesis and sequencing
• AI: OpenAI API (GPT-4 + Whisper)
• Styling: Custom CSS with retro pixel aesthetics

Project Structure

src/
├── components/
│   └── BeatMachine.tsx     # Main beat machine component
├── utils/
│   ├── drumEngine.ts       # Audio engine with Tone.js
│   ├── beatPatterns.ts     # Preset beat patterns
│   └── openaiService.ts    # OpenAI API integration
├── types/
│   └── index.ts           # TypeScript type definitions
└── App.tsx                # Main application

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build

Browser Compatibility

• Modern browsers with Web Audio API support
• Microphone access required for voice input
• HTTPS required for microphone in production

License

MIT License - feel free to use this project for learning and experimentation!