Midi Replay

A powerful, web-based MIDI recording and replay tool built with React and Vite.

Midi Replay allows musicians and developers to capture MIDI input from external devices, visualize it in real-time, replay it using high-quality web audio synthesis (Tone.js) or route it back to hardware outputs, and manage recordings with ease.

🚀 Features

• 🎹 MIDI Connectivity: Seamlessly detects and connects to available MIDI Input and Output devices.
• 🔴 Recording:
  • Auto-Record: Starts capturing immediately when notes are played.
  • Timer-Based: Manual control with a countdown timer.
• ▶️ Replay & Playback:
  • Synthesis: Native browser playback using Tone.js PolySynth.
  • Hardware Passthrough: Send recorded MIDI data back to a connected physical synth or interface.
  • Looping: Continuous playback support.
• 📊 Visualization:
  • Active Key Display: Real-time visual feedback of currently pressed notes.
  • Timeline Views: Toggle between a standard KeyHistory list or a visual TimeMap (piano roll style).
  • Progress Tracking: Visual progress bar during playback.
• 💾 Persistence & Management:
  • Local Storage: Automatically caches recorded data so work isn't lost on refresh.
  • Import/Export: Save recordings as JSON files for backup or sharing and load them back instantly.
  • Demo Mode: Includes a built-in demo track for testing.

🛠️ Tech Stack

This project leverages a modern, performance-oriented stack:

• Core: React 19, Vite, TypeScript
• Styling: Tailwind CSS v4, Radix UI (Primitives), Lucide React (Icons)
• State Management: Zustand
• Audio & MIDI:
  • Tone.js for audio synthesis and scheduling.
  • Native Web MIDI API for device interaction.
• Quality Assurance: Biome & ESLint.

📦 Installation

Ensure you have Node.js (or Bun/PNPM) installed.

1. Clone the repository:

   git clone https://github.com/yourusername/midireplay.git
   cd midireplay

2. Install dependencies:

   npm install
   # or
   bun install

3. Start the development server:

   npm run dev

4. Open in browser: Navigate to http://localhost:5173 (or the port shown in the terminal).

🎮 Usage

1. Connect a Device: Plug in your MIDI keyboard/controller. Use the top-left "IN" indicator to confirm connection.
2. Record: Play notes to auto-trigger recording (if enabled in config) or press the Record button manually.
3. Replay: Press "Replay" to listen.
   • Note: If no MIDI Output device is selected, sound will play through your browser speakers (via Tone.js).
   • If an Output device IS selected, MIDI data is sent there.
4. Save/Load: Use the file dialog icon to export your session to JSON or load a previous one.

📜 Scripts

• npm run dev: Starts the Vite development server.
• npm run build: Compiles the project for production.
• npm run preview: Previews the production build locally.
• npm run lint: lints the codebase.

📄 License

MIT