Browser MIDI Integration Comprehensive Guide: Master Web MIDI API for Professional Music Production

// Comprehensive MIDI processor and effects suite class MIDIProcessor { constructor() { this.processors = new Map(); this.effectChain = []; this.globalFilters = []; // Initialize built-in processors this.initializeProcessors(); } initializeProcessors() { // Velocity curve processor this.processors.set('velocityCurve', { process: (message, config) => { if (message.type === 'noteOn' && message.velocity > 0) { const curve = config.curve || 'linear'; const factor = config.factor || 1; let normalizedVelocity = message.velocity / 127; switch (curve) { case 'exponential': normalizedVelocity = Math.pow(normalizedVelocity, factor); break; case 'logarithmic': normalizedVelocity = Math.log(normalizedVelocity * (Math.E - 1) + 1); break; case 'compress': // Compression curve - reduces dynamic range const threshold = config.threshold || 0.5; const ratio = config.ratio || 4; if (normalizedVelocity > threshold) { const excess = normalizedVelocity - threshold; normalizedVelocity = threshold + (excess / ratio); } break; } message.velocity = Math.round(normalizedVelocity * 127); message.normalizedVelocity = normalizedVelocity; } return message; } }); // Humanization processor this.processors.set('humanize', { process: (message, config) => { if (message.type === 'noteOn') { const timingVariation = config.timing || 0; const velocityVariation = config.velocity || 0; // Add timing variation (stored for later application) if (timingVariation > 0) { const maxDelay = timingVariation * 10; // milliseconds message.humanizeDelay = (Math.random() - 0.5) * maxDelay; } // Add velocity variation if (velocityVariation > 0) { const maxVariation = velocityVariation * 64; // ±64 velocity units max const variation = (Math.random() - 0.5) * maxVariation; message.velocity = Math.max(1, Math.min(127, Math.round(message.velocity + variation))); } } return message; } }); // Chord generator this.processors.set('chordGenerator', { process: (message, config) => { if (message.type === 'noteOn' && message.velocity > 0) { const chordType = config.chordType || 'major'; const inversion = config.inversion || 0; const voicing = config.voicing || 'close'; const additionalNotes = this.generateChord( message.note, chordType, inversion, voicing ); // Create additional note messages const chordMessages = [message]; additionalNotes.forEach(note => { chordMessages.push({ ...message, note: note, isChordNote: true }); }); return chordMessages; // Return array for multiple messages } return message; } }); // Arpeggiator this.processors.set('arpeggiator', { state: { heldNotes: new Set(), pattern: [], currentStep: 0, isPlaying: false }, process: (message, config) => { const state = this.processors.get('arpeggiator').state; if (message.type === 'noteOn' && message.velocity > 0) { state.heldNotes.add(message.note); this.updateArpPattern(config); if (!state.isPlaying) { this.startArpeggiator(config); } return null; // Consume original note } else if (message.type === 'noteOff') { state.heldNotes.delete(message.note); if (state.heldNotes.size === 0) { this.stopArpeggiator(); } else { this.updateArpPattern(config); } return null; // Consume original note } return message; } }); } generateChord(rootNote, chordType, inversion, voicing) { const intervals = { 'major': [4, 7], 'minor': [3, 7], 'diminished': [3, 6], 'augmented': [4, 8], 'major7': [4, 7, 11], 'minor7': [3, 7, 10], 'dominant7': [4, 7, 10] }; let chordTones = [rootNote]; if (intervals[chordType]) { intervals[chordType].forEach(interval => { chordTones.push(rootNote + interval); }); } // Apply inversion for (let i = 0; i < inversion; i++) { const lowestNote = chordTones.shift(); chordTones.push(lowestNote + 12); } // Remove root note (already in original message) return chordTones.slice(1); } addProcessor(processorId, config) { this.effectChain.push({ processorId, config }); } processMessage(message) { let processedMessage = { ...message }; // Apply effect chain for (const effect of this.effectChain) { const processor = this.processors.get(effect.processorId); if (processor) { const result = processor.process(processedMessage, effect.config); // Handle multiple output messages (like chord generation) if (Array.isArray(result)) { return result; } processedMessage = result; // Stop processing if message was consumed if (!processedMessage) break; } } return processedMessage; } }

Latency Optimization and Timing (L)

Minimizing latency is crucial for responsive MIDI performance. This involves understanding browser audio scheduling, optimizing processing paths, and implementing predictive buffering strategies.

Latency Reduction Strategies

Precision Timing Implementation

Timing Method	Accuracy	Use Case	Browser Support
Performance.now()	Sub-millisecond	General timing	Excellent
AudioContext.currentTime	Sample-accurate	Audio scheduling	Excellent
MIDI message timestamps	Hardware-dependent	Input timing	Good
RequestAnimationFrame	~16ms	Visual updates	Excellent
Web Workers timing	Variable	Background processing	Good

Output Generation and Routing (O)

Generating and routing MIDI output enables your browser applications to control external hardware devices, software instruments, and create complex multi-device setups. This includes message generation, device-specific formatting, and intelligent routing strategies.

MIDI Output Generation