MIDI Setup Guide for Rhythm Pattern Explorer
๐น MIDI Output Overview
The Rhythm Pattern Explorer includes real-time MIDI output capability, allowing you to send rhythm patterns directly to DAWs, hardware synthesizers, and MIDI-enabled applications.
โ
Supported Browsers & Methods
Browser |
Platform |
Method |
Status |
Setup Required |
Brave |
Mac/Windows |
WebMIDI |
โ
Recommended |
None |
Chrome |
Mac/Windows |
WebMIDI |
โ
Working |
None |
Edge |
Windows |
WebMIDI |
โ
Working |
None |
Safari |
Mac |
WebSocket Bridge |
โ
Working |
Python script |
Safari |
iOS/iPad |
None |
โ Limited |
Use native apps |
Firefox |
All |
OSC Bridge |
๐ก Experimental |
Python script |
๐ Quick Start (Recommended)
Method 1: Brave Browser (Easiest)
- Open Brave Browser
- Navigate to: Rhythm Pattern Explorer
- Click the MIDI toggle in the app interface
- Grant MIDI permission when prompted
- Done! MIDI will output to your default MIDI device
Advantages:
- No additional software required
- Direct MIDI output
- Perfect timing
- Hardware and software compatible
๐ ๏ธ Detailed Setup Instructions
For Brave/Chrome/Edge (WebMIDI)
On Mac:
- Open Audio MIDI Setup (
/Applications/Utilities/Audio MIDI Setup.app
)
- Window โ Show MIDI Studio
- Enable IAC Driver:
- Double-click IAC Driver
- Check Device is online
- Set Ports: at least 1 port
- Click Apply
On Windows:
- Install loopMIDI (free virtual MIDI port software)
- Create virtual port for DAW communication
- Configure your DAW to receive from virtual port
Step 2: Connect to DAW
GarageBand (Mac):
- Create new project โ Software Instrument
- Track โ Configure Track Header
- Record Enable โ Input: IAC Driver Bus 1
- Choose instrument (drums, synth, etc.)
Logic Pro (Mac):
- Create Software Instrument track
- Set Input: IAC Driver Bus 1
- Load instrument and record-enable track
Ableton Live:
- Preferences โ MIDI
- Control Surface: IAC Driver Bus 1
- Create MIDI track โ Set input to IAC Driver
Step 3: Test MIDI Output
- Open Rhythm Pattern Explorer in Brave/Chrome
- Click MIDI toggle (๐น icon)
- Grant permission when browser asks
- Parse a pattern: Enter
E(3,8)
and press Enter
- Play pattern: Click โถ๏ธ button
- Check DAW: Should see MIDI notes and hear audio
For Safari (WebSocket Bridge)
Step 1: Set Up Python Bridge
- Download the repository or get the bridge file:
curl -O https://raw.githubusercontent.com/enkerli/rhythm_pattern_explorer/main/minimal-midi-bridge.py
- Install Python dependencies:
pip install websockets mido python-rtmidi
- Run the MIDI bridge:
python3 minimal-midi-bridge.py
You should see:
MIDI Bridge for Safari - WebSocket to MIDI
==========================================
โ
MIDI connected to IAC Driver Bus 1
๐ WebSocket server ready on ws://localhost:8080
Ready! Connect from Safari and test MIDI output
Step 2: Serve App Locally
- Download the app or serve locally:
python3 serve-app.py --port 3000
- Open in Safari:
http://localhost:3000/app/
Step 3: Connect MIDI
- Click MIDI toggle in the app
- Should connect to Python bridge automatically
- Test with pattern:
E(3,8)
โ โถ๏ธ
- Verify in DAW: MIDI notes should appear
๐ต MIDI Configuration
Default Settings
- MIDI Channel: 1
- Base Note: 36 (C2 - kick drum)
- Velocity: 100
- Note Duration: 100ms
Customizing MIDI Output
The MIDI settings are configurable in the code:
// In midi-output.js, MIDIOutputController constructor:
this.settings = {
channel: 1, // MIDI channel (1-16)
baseNote: 36, // Base MIDI note (C2 = kick)
velocity: 100, // Note velocity (1-127)
// ... other settings
};
Common MIDI Note Assignments:
- 36 (C2): Kick drum (default)
- 38 (D2): Snare drum
- 42 (F#2): Hi-hat
- 60 (C4): Middle C
- 69 (A4): A440 reference
๐ง Troubleshooting
No MIDI Permission in Brave/Chrome
Problem: MIDI toggle shows โConnectingโ but no permission prompt
Solution:
- Make sure you click the MIDI toggle
- Try starting pattern playback first (audio context requirement)
- Check Site Settings โ MIDI โ Allow
Safari Bridge Not Connecting
Problem: โOSC WebSocket connection failedโ
Solutions:
- Check Python bridge is running: Should show โserver listeningโ message
- Verify localhost access: Try
http://localhost:3000/app/
- Check port conflicts: Bridge uses port 8080, app server uses 3000
- Restart bridge: Ctrl+C and restart
python3 minimal-midi-bridge.py
No MIDI in DAW
Problem: App shows MIDI connected but DAW receives no notes
Solutions:
- Check IAC Driver enabled (Mac) or virtual MIDI port (Windows)
- Verify DAW input settings: Set to IAC Driver Bus 1
- Record-enable track in DAW
- Test MIDI monitor: Use MIDI monitoring software to verify output
Timing Issues
Problem: MIDI notes are late or jittery
Solutions:
- Use Brave/Chrome for best timing (WebMIDI is more accurate)
- Close other applications to free up CPU
- Check buffer settings in your DAW
- Use lower BPM for testing (60-80 BPM)
๐๏ธ Advanced Configuration
Multiple MIDI Outputs
To send to multiple devices:
- Mac: Create multiple IAC Driver buses
- Route in DAW: Use DAWโs MIDI routing to send to multiple instruments
- Hardware: Connect multiple MIDI devices via USB hub
Custom MIDI Mapping
For different note mappings (e.g., different drum kits):
// Modify settings in midi-output.js
baseNote: 60, // Change to C4 for melodic instruments
channel: 10, // Channel 10 for drums (GM standard)
Velocity Sensitivity
To vary velocity based on pattern analysis:
// In noteOn method, could add:
const velocityFromBalance = Math.floor(pattern.balance.normalizedMagnitude * 127);
Optimal Setup
- Use Brave browser for best MIDI performance
- Enable IAC Driver with 1-2 buses (Mac)
- Set audio buffer to 256 or 512 samples in DAW
- Close unnecessary applications during use
Latency Reduction
- Use WebMIDI browsers (Brave/Chrome) for lowest latency
- Avoid Firefox for timing-critical applications
- Use wired connections for MIDI hardware
- Optimize DAW settings for low latency
๐น Integration Examples
GarageBand Drum Kit
- Create Drummer track
- Set input: IAC Driver Bus 1
- Select drum kit: Brooklyn, Logan, etc.
- Record-enable and play patterns
Logic Pro Sculpture
- Create Software Instrument
- Load Sculpture synthesizer
- Set MIDI input: IAC Driver
- Play melodic patterns with different base notes
Ableton Live Drum Rack
- Create MIDI track
- Add Drum Rack device
- Set track input: IAC Driver
- Map MIDI notes to different drum sounds
Hardware Synthesizer
- Connect MIDI interface to computer
- Set MIDI channel on synthesizer
- Route through MIDI interface in DAW
- Play patterns directly to hardware
๐ Summary
The MIDI output system provides professional-grade timing and connectivity for integrating rhythm patterns with your music production workflow. The Brave browser method is recommended for the best experience, with the Safari bridge as a reliable alternative for macOS users.
Quick Start: Open in Brave โ Click MIDI toggle โ Grant permission โ Done!