diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..70565ef
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,101 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Build & Dev Commands
+- `npm start` - Start dev server (opens at http://localhost:5173)
+- `npm test` - Run all tests with Vitest
+- `npm test src/path/to/file.test.ts` - Run specific test file
+- `npm run build` - Build for production
+- `npm run serve` - Preview production build
+
+## Project Overview
+The Mongoose React Client is a MUD (Multi-User Dungeon) client built specifically for Project Mongoose. It connects to the game server via WebSocket and implements various MUD protocols including Telnet, GMCP (Generic MUD Communication Protocol), and MCP (MUD Client Protocol).
+
+## Architecture Overview
+
+### Core Services
+- **MudClient (`src/client.ts`)**: Central service managing WebSocket connection, protocol handling, and feature integration
+- **TelnetParser (`src/telnet.ts`)**: Handles low-level Telnet protocol negotiation and stream processing
+- **WebRTCService (`src/WebRTCService.ts`)**: Manages voice/video chat via LiveKit
+- **FileTransferManager (`src/FileTransferManager.ts`)**: Handles file uploads/downloads
+- **EditorManager (`src/EditorManager.ts`)**: External editor integration
+- **GMCP System** (`src/gmcp/`): Game protocol handlers for GMCP (Generic MUD Communication Protocol) packages
+- **MCP System** (`src/mcp.ts`): MUD Client Protocol handlers for server communication
+- **Services**: 
+  - `MidiService.ts` & `VirtualMidiService.ts`: MIDI audio support
+
+### Protocol Support
+
+The client supports multiple MUD protocols:
+- **GMCP**: For game data exchange (character stats, room info, etc.)
+- **MCP**: For MUD Client Protocol features
+- **MCMP**: With 3D audio support
+- **Telnet**: Base protocol with ANSI color support
+
+### State Management
+Uses custom store pattern (not Redux):
+- **PreferencesStore**: User settings (volume, TTS, channels)
+- **InputStore**: Command input state and management
+- **FileTransferStore**: IndexedDB-backed file transfer persistence
+- **useClientEvent.ts**: Hook for listening to client events
+
+### GMCP Protocol Structure
+Located in `src/gmcp/`, organized hierarchically:
+- Base class `GMCPPackage` provides common functionality
+- Each package handles specific message types and emits events
+- Key packages: Core, Auth, Char/*, Room, Comm/*, Client/*, IRE/*
+
+### Component Communication
+- Server → TelnetParser → GMCP/MCP handlers → Event emission → UI components
+- Components use custom hooks to subscribe to client events
+- User input → CommandInput → MudClient → WebSocket → Server
+
+### Features
+
+- ANSI color rendering with `ansiParser.tsx`
+- Text-to-speech with configurable voices
+- Desktop notifications
+- Session logging
+- 3D audio via MCMP
+- File transfer between users
+- Real-time voice chat via LiveKit
+- MIDI music support with virtual synthesizers
+- In-game text editor with Monaco Editor
+
+### Key Files
+
+- `src/App.tsx`: Main application component
+- `src/client.ts`: Core MudClient implementation
+- `src/telnet.ts`: Telnet protocol handling
+- `src/components/output.tsx`: Main game output window
+- `src/components/input.tsx`: Command input component
+- `src/components/sidebar.tsx`: Game info sidebar
+
+### Testing
+
+Uses Vitest with jsdom environment. Test files use `.test.ts` or `.test.tsx` extensions.
+
+## Code Style
+- **Formatting**: 2-space indentation, CRLF line endings, UTF-8, trim trailing whitespace
+- **Types**: Use explicit TypeScript types & interfaces
+- **Components**: Functional components with hooks, props defined with interfaces
+- **Naming**:
+  - PascalCase: React components & classes
+  - camelCase: variables, functions, instances
+  - UPPER_SNAKE_CASE: constants
+  - Handlers: prefix with "handle" (handleClick)
+  - Booleans: prefix with "is" or "has" (isConnected)
+- **Imports**: React first, third-party next, local modules last, CSS imports last
+- **Error Handling**: Try/catch blocks with console logging and fallback values
+- **React Patterns**: Proper effect dependencies, useRef for DOM references, custom hooks
+- **Testing**: Vitest with describe/it pattern, descriptive test names
+- **Comments**: Avoid redundant comments that state the obvious (e.g., "// Click handler" above a handleClick function)
+
+## Key Dependencies
+- React 18 with TypeScript
+- Vite for build/dev server
+- Monaco Editor for code editing
+- LiveKit for WebRTC
+- Cacophony for audio playback
+- IndexedDB (via idb) for persistence
\ No newline at end of file
diff --git a/MIDI.md b/MIDI.md
new file mode 100644
index 0000000..58bb451
--- /dev/null
+++ b/MIDI.md
@@ -0,0 +1,323 @@
+# MIDI System Documentation
+
+The Mongoose React Client includes a comprehensive MIDI system that enables real-time MIDI input/output, synthesizer engines, and seamless integration with the MUD's GMCP (Generic MUD Communication Protocol) MIDI features.
+
+## Table of Contents
+
+- [Architecture Overview](#architecture-overview)
+- [MIDI Service](#midi-service)
+- [User Interface Components](#user-interface-components)
+- [Synthesizer Libraries](#synthesizer-libraries)
+- [GMCP MIDI Integration](#gmcp-midi-integration)
+- [Configuration and Preferences](#configuration-and-preferences)
+- [Usage Examples](#usage-examples)
+- [Troubleshooting](#troubleshooting)
+
+## Architecture Overview
+
+The MIDI system is built around several key components:
+
+```
+┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
+│   MIDI Devices  │────│   MidiService    │────│  Synthesizers   │
+│  (Hardware/     │    │ (Core Engine)    │    │ (JZZ/MIDI.js)   │
+│   Virtual)      │    │                  │    │                 │
+└─────────────────┘    └──────────────────┘    └─────────────────┘
+         │                       │                       │
+         │              ┌────────────────────┐          │
+         └──────────────│   GMCP MIDI        │──────────┘
+                        │   Integration      │
+                        └────────────────────┘
+                                 │
+                        ┌────────────────────┐
+                        │   UI Components    │
+                        │ (Preferences/      │
+                        │  Status/Sidebar)   │
+                        └────────────────────┘
+```
+
+## MIDI Service
+
+### Core Architecture (`src/MidiService.ts`)
+
+The `MidiService` class is the central hub for all MIDI functionality:
+
+#### Key Features:
+- **Device Management**: Automatic discovery and connection to MIDI input/output devices
+- **Multiple Synthesizers**: Supports JZZ Tiny and MIDI.js engines
+- **Auto-reconnection**: Remembers and reconnects to previously used devices
+- **Message Processing**: Real-time MIDI message parsing and routing
+- **Event System**: Observable device changes and connection status
+
+#### Synthesizer Integration:
+
+```typescript
+// Virtual synthesizers are initialized during service startup
+async initializeVirtualSynths() {
+  // 1. JZZ Tiny Synthesizer (Basic built-in synthesis)
+  Tiny(JZZ);
+  JZZ.synth.Tiny.register('JZZ Tiny Synthesizer');
+
+  // 2. MIDI.js Synthesizer (Soundfont-based, configurable)
+  await this.initializeMIDIjsSynthesizer();
+}
+```
+
+#### Device State Management:
+
+```typescript
+interface ConnectionState {
+  inputConnected: boolean;
+  outputConnected: boolean;
+  inputDeviceId?: string;
+  outputDeviceId?: string;
+  inputDeviceName?: string;
+  outputDeviceName?: string;
+}
+```
+
+## User Interface Components
+
+### 1. MIDI Tab in Preferences (`src/components/preferences.tsx`)
+
+**Location**: Settings → MIDI Tab
+
+**Features**:
+- Enable/disable MIDI functionality
+- **MIDI.js Soundfont Selection**:
+  - FatBoy (Warm, analog-style sounds)
+  - FluidR3 GM (General MIDI standard)
+  - MusyngKite (High-quality, default selection)
+- Real-time synthesizer reloading when preferences change
+
+**Code Structure**:
+```typescript
+const MidiTab: React.FC = () => {
+  const handleMidiJsSoundfontChange = async (e) => {
+    // Updates preferences and reloads MIDI.js synthesizer
+    await midiService.reloadSynthesizers();
+  };
+};
+```
+
+### 2. MIDI Tab in Sidebar
+
+**Location**: Sidebar → MIDI Tab (when connected to server)
+
+**Features**:
+- **Input Device Selection**: Choose MIDI keyboard/controller
+- **Output Device Selection**: Choose destination synthesizer
+- **Connection Status**: Real-time connection indicators
+- **Device Management**: Connect/disconnect controls
+- **Auto-reconnection**: Attempts to reconnect to last used devices
+
+**Components**:
+- Device dropdown lists (input/output)
+- Connection status indicators
+- Manual connect/disconnect buttons
+- Device change notifications
+
+### 3. MIDI Status Component (`src/components/MidiStatus.tsx`)
+
+**Purpose**: Provides real-time MIDI activity monitoring and device status
+
+**Features**:
+- **Connection Status**: Input/output device connection indicators
+- **Message Activity**: Real-time MIDI message display
+- **Device Change Notifications**: Alerts when devices are added/removed
+- **Reconnection Status**: Shows auto-reconnection attempts
+- **Message Filtering**: Displays relevant MIDI data (Note On/Off, CC, PC)
+
+**Message Types Tracked**:
+```typescript
+interface MidiMessage {
+  note?: { note: number; velocity: number; on: boolean; channel?: number };
+  controlChange?: { controller: number; value: number; channel: number };
+  programChange?: { program: number; channel: number };
+  systemMessage?: { type: string; data: number[] };
+  raw?: RawMidiMessage;
+  rawData: RawMidiMessage; // Always included for debugging
+}
+```
+
+## Synthesizer Libraries
+
+### 1. JZZ (Jazz-MIDI) - Core MIDI Engine
+
+**Library**: `jzz` npm package
+**Role**: Foundation MIDI engine providing cross-platform MIDI I/O
+
+**Why JZZ**:
+- **Cross-browser compatibility**: Works in Chrome, Edge, Firefox, Safari
+- **Unified API**: Handles both Web MIDI API and virtual devices seamlessly  
+- **Plugin Architecture**: Extensible with synthesizer plugins
+- **Device Management**: Automatic device discovery and change detection
+
+**Integration**:
+```javascript
+// JZZ provides the foundation for all MIDI operations
+const jzz = await JZZ();
+const inputDevice = await jzz.openMidiIn(deviceId);
+const outputDevice = await jzz.openMidiOut(deviceId);
+```
+
+### 2. JZZ Tiny Synthesizer
+
+**Library**: `jzz-synth-tiny` npm package
+**Role**: Lightweight built-in synthesizer for basic MIDI playback
+
+**Features**:
+- **No external dependencies**: Pure JavaScript synthesis
+- **Low latency**: Minimal processing overhead
+- **GM Compatible**: Supports General MIDI instrument mapping
+- **Small footprint**: ~50KB total size
+
+**Use Cases**:
+- Basic MIDI playback when no other synthesizers are available
+- Testing MIDI connections
+- Low-resource environments
+
+### 3. MIDI.js with Soundfont Support
+
+**Libraries**: 
+- Custom `MIDI.js` (modified version)
+- Custom `JZZ.synth.MIDIjs.js` bridge
+
+**Role**: High-quality soundfont-based synthesis with multiple soundfont options
+
+**Features**:
+- **Multiple Soundfonts**: FatBoy, FluidR3 GM, MusyngKite
+- **Dynamic Instrument Loading**: Loads instruments on-demand
+- **High Audio Quality**: PCM-based samples for realistic sound
+- **GM Compatibility**: Full General MIDI instrument support
+- **Drum Routing**: Channel 10 drums routed to JZZ Tiny for performance
+
+**Soundfont Sources**:
+```typescript
+const soundfontUrls = {
+  'FatBoy': 'https://mongoose.world/sounds/soundfont/FatBoy/',
+  'FluidR3': 'https://mongoose.world/sounds/soundfont/FluidR3_GM/',
+  'MusyngKite': 'https://mongoose.world/sounds/soundfont/MusyngKite/'
+};
+```
+
+**Why This Approach**:
+- **User Choice**: Different soundfonts suit different musical styles
+- **Resource Management**: Only one soundfont loaded at a time
+- **Performance**: Configurable quality vs. resource usage
+
+## GMCP MIDI Integration
+
+### GMCP Package: `Client.Midi` (`src/gmcp/Client/Midi.ts`)
+
+The GMCP MIDI package provides server-to-client MIDI communication:
+
+**Supported GMCP Messages**:
+- `Client.Midi.Play`: Play MIDI note/sequence
+- `Client.Midi.Stop`: Stop current MIDI playback
+- `Client.Midi.SetInstrument`: Change MIDI program/instrument
+- `Client.Midi.ControlChange`: Send MIDI control change messages
+
+**Integration Flow**:
+```
+Server GMCP → Client.Midi Handler → MidiService → Active Synthesizer → Audio Output
+```
+
+**Example GMCP Message Handling**:
+```typescript
+// Server sends: Client.Midi.Play {"note": 60, "velocity": 100, "channel": 0}
+handlePlay(data: GMCPMessageClientMidiPlay) {
+  const midiMessage = [0x90 | data.channel, data.note, data.velocity];
+  midiService.sendRawMessage(midiMessage);
+}
+```
+
+**Bidirectional Communication**:
+- **Server → Client**: GMCP messages trigger MIDI playback
+- **Client → Server**: MIDI input can send GMCP messages back to server
+
+## Configuration and Preferences
+
+### Preference Structure (`src/PreferencesStore.tsx`)
+
+```typescript
+export type MidiPreferences = {
+  enabled: boolean;                    // Master MIDI enable/disable
+  lastInputDeviceId?: string;          // Remember last input device
+  lastOutputDeviceId?: string;         // Remember last output device  
+  midiJsSoundfont: string;            // Selected MIDI.js soundfont
+};
+```
+
+### Default Settings:
+- **MIDI Enabled**: `false` (must be explicitly enabled by user)
+- **MIDI.js Soundfont**: `MusyngKite` (highest quality)
+- **Auto-reconnect**: Enabled (remembers last used devices)
+
+### Preference Persistence:
+- Stored in `localStorage` as JSON
+- Automatically migrated when preference structure changes
+- Changes trigger immediate synthesizer reloading
+
+## Usage Examples
+
+### Basic MIDI Setup:
+1. **Enable MIDI**: Settings → MIDI → Enable MIDI ✓
+2. **Choose Soundfont**: Select preferred MIDI.js soundfont
+3. **Connect**: Sidebar → MIDI → Select input/output devices
+4. **Test**: Play notes on MIDI keyboard or via GMCP
+
+### GMCP Integration:
+```javascript
+// Server LPC code to send MIDI to client:
+send_gmcp("Client.Midi.Play", ([ "note": 60, "velocity": 100, "channel": 0 ]));
+
+// Server receives MIDI input from client:
+void gmcp_client_midi_input(mapping data) {
+  // Process MIDI input from client
+  write("You played note " + data["note"]);
+}
+```
+
+## Troubleshooting
+
+### Common Issues:
+
+**1. No MIDI Devices Found**
+- **Browser Support**: Ensure using Chrome, Edge, Opera, or Brave
+- **MIDI Permission**: Browser may require user gesture to access MIDI
+- **Device Connection**: Check physical MIDI device connections
+
+**2. No Sound from Synthesizers**
+- **AudioContext Suspended**: Click anywhere on page to resume audio
+- **Browser Audio Policy**: Some browsers block audio until user interaction
+- **Soundfont Loading**: Check console for soundfont download errors
+
+**3. MIDI Input Not Detected**
+- **Device Permissions**: Browser may prompt for MIDI access permission
+- **Device Conflicts**: Another application may be using the MIDI device
+- **USB Connection**: Try reconnecting USB MIDI devices
+
+### Debug Information:
+
+The MIDI system provides extensive console logging:
+- `✅` Green checkmarks indicate successful operations  
+- `❌` Red X marks indicate errors
+- Device connection/disconnection events
+- MIDI message activity (when input connected)
+- Soundfont loading progress
+
+### Performance Considerations:
+
+**MIDI.js Soundfonts**:
+- **FatBoy**: ~15MB, warm analog sounds, higher CPU usage
+- **FluidR3**: ~10MB, standard GM sounds, moderate CPU usage  
+- **MusyngKite**: ~25MB, highest quality, balanced performance
+
+**Recommendations**:
+- Use **MusyngKite** for best balance of quality and performance
+- Use **JZZ Tiny** for minimal resource usage
+
+---
+
+*This documentation covers the MIDI system as of the current implementation. For the latest updates, check the source code in the respective component files.*
\ No newline at end of file
diff --git a/public/JZZ.synth.MIDIjs.js b/public/JZZ.synth.MIDIjs.js
new file mode 100644
index 0000000..2f568c3
--- /dev/null
+++ b/public/JZZ.synth.MIDIjs.js
@@ -0,0 +1,201 @@
+(function() {
+  if (!JZZ) return;
+  if (!JZZ.synth) JZZ.synth = {};
+
+  function _name(name) { return name ? name : 'JZZ.synth.MIDIjs'; }
+
+  var _waiting = false;
+  var _running = false;
+  var _bad = false;
+  var _error;
+
+  // Dynamic loading state management
+  var _loadingInstruments = {}; // Track instruments currently being loaded
+  var _pendingProgramChanges = []; // Queue program changes waiting for load completion
+  
+  // Drum routing: Connect to JZZ.synth.Tiny for channel 10 (drums)
+  var _tinyPort = null;
+  
+  function _initTinyPort() {
+    if (!_tinyPort && JZZ.synth && JZZ.synth.Tiny) {
+      try {
+        _tinyPort = JZZ.synth.Tiny();
+        console.log('JZZ.synth.Tiny port initialized for drum routing');
+      } catch (e) {
+        console.warn('Failed to initialize JZZ.synth.Tiny port for drums:', e);
+      }
+    }
+  }
+
+  function _receive(a) {
+    var s = a[0]>>4;
+    var c = a[0]&0xf;
+    
+    // Initialize Tiny port if needed
+    if (!_tinyPort) {
+      _initTinyPort();
+    }
+    
+    // Route channel 10 (index 9) to JZZ.synth.Tiny for drums
+    if (c === 9 && _tinyPort) {
+      console.log('Routing channel 10 (drums) to JZZ.synth.Tiny:', a);
+      _tinyPort.send(a);
+      return;
+    }
+    
+    if (s == 0xC) { // Program Change (0xC0-0xCF)
+      var program = a[1];
+      var instrumentName = MIDI.GM && MIDI.GM.byId && MIDI.GM.byId[program] ? MIDI.GM.byId[program].id : null;
+      
+      if (instrumentName && MIDI.Soundfont && !MIDI.Soundfont[instrumentName]) {
+        // Instrument not loaded
+        console.log('Program change to unloaded instrument:', instrumentName, 'program:', program);
+        
+        // Check if already loading this instrument
+        if (_loadingInstruments[instrumentName]) {
+          // Queue this program change for after loading completes
+          _pendingProgramChanges.push({channel: c, program: program, instrument: instrumentName});
+          console.log('Queuing program change while loading:', instrumentName);
+          return; // Don't process original program change
+        }
+        
+        // Start loading process
+        _loadingInstruments[instrumentName] = true;
+        _pendingProgramChanges.push({channel: c, program: program, instrument: instrumentName});
+        
+        // Immediate fallback to acoustic_grand_piano (program 0)
+        console.log('Falling back to piano while loading:', instrumentName);
+        if (MIDI.programChange) {
+          MIDI.programChange(c, 0);
+        }
+        
+        // Load the requested instrument
+        if (MIDI.loadResource) {
+          MIDI.loadResource({
+            instruments: [instrumentName],
+            onsuccess: function() {
+              console.log('Successfully loaded instrument:', instrumentName);
+              
+              // Send deferred program changes for this instrument
+              var pending = _pendingProgramChanges.filter(function(p) { return p.instrument === instrumentName; });
+              pending.forEach(function(p) {
+                console.log('Sending deferred program change:', p.instrument, 'program:', p.program);
+                if (MIDI.programChange) {
+                  MIDI.programChange(p.channel, p.program);
+                }
+              });
+              
+              // Clean up
+              delete _loadingInstruments[instrumentName];
+              _pendingProgramChanges = _pendingProgramChanges.filter(function(p) { return p.instrument !== instrumentName; });
+            },
+            onerror: function(err) {
+              console.warn('Failed to load instrument:', instrumentName, 'error:', err, '- staying on piano');
+              delete _loadingInstruments[instrumentName];
+              _pendingProgramChanges = _pendingProgramChanges.filter(function(p) { return p.instrument !== instrumentName; });
+            }
+          });
+        }
+        
+        return; // Don't process original program change
+      }
+      
+      // Instrument already loaded or no MIDI.js available yet - pass through
+      if (MIDI.programChange) {
+        MIDI.programChange(c, program);
+      }
+      return;
+    }
+    
+    // Standard MIDI message processing
+    if (s == 0x8) {
+      if (MIDI.noteOff) {
+        MIDI.noteOff(c, a[1]);
+      }
+    }
+    else if (s == 0x9) {
+      if (MIDI.noteOn) {
+        MIDI.noteOn(c, a[1], a[2]);
+      }
+    }
+  }
+
+  var _ports = [];
+  function _release(port, name) {
+    port._info = _engine._info(name);
+    port._receive = _receive;
+    port._resume();
+  }
+
+  function _onsuccess() {
+    _running = true;
+    _waiting = false;
+    
+    // Initialize Tiny port for drum routing
+    _initTinyPort();
+    
+    for (var i=0; i<_ports.length; i++) _release(_ports[i][0], _ports[i][1]);
+  }
+
+  function _onerror(evt) {
+    _bad = true;
+    _error = evt;
+    for (var i=0; i<_ports.length; i++) _ports[i][0]._crash(_error);
+  }
+
+  var _engine = {};
+
+  _engine._info = function(name) {
+    return {
+      type: 'MIDI.js',
+      name: _name(name),
+      manufacturer: 'virtual',
+      version: '0.3.2'
+    };
+  }
+
+  _engine._openOut = function(port, name) {
+    if (_running) {
+      _release(port, name);
+      return;
+    }
+    if (_bad) {
+      port._crash(_error);
+      return;
+    }
+    port._pause();
+    _ports.push([port, name]);
+    if (_waiting) return;
+    _waiting = true;
+    var arg = _engine._arg;
+    if (!arg) arg = {};
+    arg.onsuccess = _onsuccess;
+    arg.onerror = _onerror;
+    try {
+      MIDI.loadPlugin(arg);
+    }
+    catch(e) {
+      _error = e.message;
+      _onerror(_error);
+    }
+  }
+
+  JZZ.synth.MIDIjs = function() {
+    var name, arg;
+    if (arguments.length == 1) arg = arguments[0];
+    else { name = arguments[0]; arg = arguments[1];}
+    name = _name(name);
+    if (!_running && !_waiting) _engine._arg = arg;
+    return JZZ.lib.openMidiOut(name, _engine);
+  }
+
+  JZZ.synth.MIDIjs.register = function() {
+    var name, arg;
+    if (arguments.length == 1) arg = arguments[0];
+    else { name = arguments[0]; arg = arguments[1];}
+    name = _name(name);
+    if (!_running && !_waiting) _engine._arg = arg;
+    return JZZ.lib.registerMidiOut(name, _engine);
+  }
+
+})();
\ No newline at end of file
diff --git a/public/MIDI.js b/public/MIDI.js
new file mode 100644
index 0000000..1e76bb7
--- /dev/null
+++ b/public/MIDI.js
@@ -0,0 +1,1928 @@
+/*
+	----------------------------------------------------------
+	MIDI.audioDetect : 0.3.2 : 2015-03-26
+	----------------------------------------------------------
+	https://github.com/mudcube/MIDI.js
+	----------------------------------------------------------
+	Probably, Maybe, No... Absolutely!
+	Test to see what types of <audio> MIME types are playable by the browser.
+	----------------------------------------------------------
+*/
+
+if (typeof MIDI === 'undefined') MIDI = {};
+
+(function(root) { 'use strict';
+
+	var supports = {}; // object of supported file types
+	var pending = 0; // pending file types to process
+	var canPlayThrough = function (src) { // check whether format plays through
+		pending ++;
+		var body = document.body;
+		var audio = new Audio();
+		var mime = src.split(';')[0];
+		audio.id = 'audio';
+		audio.setAttribute('preload', 'auto');
+		audio.setAttribute('audiobuffer', true);
+		audio.addEventListener('error', function() {
+			body.removeChild(audio);
+			supports[mime] = false;
+			pending --;
+		}, false);
+		audio.addEventListener('canplaythrough', function() {
+			body.removeChild(audio);
+			supports[mime] = true;
+			pending --;
+		}, false);
+		audio.src = 'data:' + src;
+		body.appendChild(audio);
+	};
+
+	root.audioDetect = function(onsuccess) {
+		/// detect jazz-midi plugin
+		if (navigator.requestMIDIAccess) {
+			var isNative = Function.prototype.toString.call(navigator.requestMIDIAccess).indexOf('[native code]');
+			if (isNative) { // has native midiapi support
+				supports['webmidi'] = true;
+			} else { // check for jazz plugin midiapi support
+				for (var n = 0; navigator.plugins.length > n; n ++) {
+					var plugin = navigator.plugins[n];
+					if (plugin.name.indexOf('Jazz-Plugin') >= 0) {
+						supports['webmidi'] = true;
+					}
+				}
+			}
+		}
+
+		/// check whether <audio> tag is supported
+		if (typeof(Audio) === 'undefined') {
+			return onsuccess({});
+		} else {
+			supports['audiotag'] = true;
+		}
+
+		/// check for webaudio api support
+		if (window.AudioContext || window.webkitAudioContext) {
+			supports['webaudio'] = true;
+		}
+
+		/// check whether canPlayType is supported
+		var audio = new Audio();
+		if (typeof(audio.canPlayType) === 'undefined') {
+			return onsuccess(supports);
+		}
+
+		/// see what we can learn from the browser
+		var vorbis = audio.canPlayType('audio/ogg; codecs="vorbis"');
+		vorbis = (vorbis === 'probably' || vorbis === 'maybe');
+		var mpeg = audio.canPlayType('audio/mpeg');
+		mpeg = (mpeg === 'probably' || mpeg === 'maybe');
+		// maybe nothing is supported
+		if (!vorbis && !mpeg) {
+			onsuccess(supports);
+			return;
+		}
+
+		/// or maybe something is supported
+		if (vorbis) canPlayThrough('audio/ogg;base64,T2dnUwACAAAAAAAAAADqnjMlAAAAAOyyzPIBHgF2b3JiaXMAAAAAAUAfAABAHwAAQB8AAEAfAACZAU9nZ1MAAAAAAAAAAAAA6p4zJQEAAAANJGeqCj3//////////5ADdm9yYmlzLQAAAFhpcGguT3JnIGxpYlZvcmJpcyBJIDIwMTAxMTAxIChTY2hhdWZlbnVnZ2V0KQAAAAABBXZvcmJpcw9CQ1YBAAABAAxSFCElGVNKYwiVUlIpBR1jUFtHHWPUOUYhZBBTiEkZpXtPKpVYSsgRUlgpRR1TTFNJlVKWKUUdYxRTSCFT1jFloXMUS4ZJCSVsTa50FkvomWOWMUYdY85aSp1j1jFFHWNSUkmhcxg6ZiVkFDpGxehifDA6laJCKL7H3lLpLYWKW4q91xpT6y2EGEtpwQhhc+211dxKasUYY4wxxsXiUyiC0JBVAAABAABABAFCQ1YBAAoAAMJQDEVRgNCQVQBABgCAABRFcRTHcRxHkiTLAkJDVgEAQAAAAgAAKI7hKJIjSZJkWZZlWZameZaouaov+64u667t6roOhIasBACAAAAYRqF1TCqDEEPKQ4QUY9AzoxBDDEzGHGNONKQMMogzxZAyiFssLqgQBKEhKwKAKAAAwBjEGGIMOeekZFIi55iUTkoDnaPUUcoolRRLjBmlEluJMYLOUeooZZRCjKXFjFKJscRUAABAgAMAQICFUGjIigAgCgCAMAYphZRCjCnmFHOIMeUcgwwxxiBkzinoGJNOSuWck85JiRhjzjEHlXNOSuekctBJyaQTAAAQ4AAAEGAhFBqyIgCIEwAwSJKmWZomipamiaJniqrqiaKqWp5nmp5pqqpnmqpqqqrrmqrqypbnmaZnmqrqmaaqiqbquqaquq6nqrZsuqoum65q267s+rZru77uqapsm6or66bqyrrqyrbuurbtS56nqqKquq5nqq6ruq5uq65r25pqyq6purJtuq4tu7Js664s67pmqq5suqotm64s667s2rYqy7ovuq5uq7Ks+6os+75s67ru2rrwi65r66os674qy74x27bwy7ouHJMnqqqnqq7rmarrqq5r26rr2rqmmq5suq4tm6or26os67Yry7aumaosm64r26bryrIqy77vyrJui67r66Ys67oqy8Lu6roxzLat+6Lr6roqy7qvyrKuu7ru+7JuC7umqrpuyrKvm7Ks+7auC8us27oxuq7vq7It/KosC7+u+8Iy6z5jdF1fV21ZGFbZ9n3d95Vj1nVhWW1b+V1bZ7y+bgy7bvzKrQvLstq2scy6rSyvrxvDLux8W/iVmqratum6um7Ksq/Lui60dd1XRtf1fdW2fV+VZd+3hV9pG8OwjK6r+6os68Jry8ov67qw7MIvLKttK7+r68ow27qw3L6wLL/uC8uq277v6rrStXVluX2fsSu38QsAABhwAAAIMKEMFBqyIgCIEwBAEHIOKQahYgpCCKGkEEIqFWNSMuakZM5JKaWUFEpJrWJMSuaclMwxKaGUlkopqYRSWiqlxBRKaS2l1mJKqcVQSmulpNZKSa2llGJMrcUYMSYlc05K5pyUklJrJZXWMucoZQ5K6iCklEoqraTUYuacpA46Kx2E1EoqMZWUYgupxFZKaq2kFGMrMdXUWo4hpRhLSrGVlFptMdXWWqs1YkxK5pyUzDkqJaXWSiqtZc5J6iC01DkoqaTUYiopxco5SR2ElDLIqJSUWiupxBJSia20FGMpqcXUYq4pxRZDSS2WlFosqcTWYoy1tVRTJ6XFklKMJZUYW6y5ttZqDKXEVkqLsaSUW2sx1xZjjqGkFksrsZWUWmy15dhayzW1VGNKrdYWY40x5ZRrrT2n1mJNMdXaWqy51ZZbzLXnTkprpZQWS0oxttZijTHmHEppraQUWykpxtZara3FXEMpsZXSWiypxNhirLXFVmNqrcYWW62ltVprrb3GVlsurdXcYqw9tZRrrLXmWFNtBQAADDgAAASYUAYKDVkJAEQBAADGMMYYhEYpx5yT0ijlnHNSKucghJBS5hyEEFLKnINQSkuZcxBKSSmUklJqrYVSUmqttQIAAAocAAACbNCUWByg0JCVAEAqAIDBcTRNFFXVdX1fsSxRVFXXlW3jVyxNFFVVdm1b+DVRVFXXtW3bFn5NFFVVdmXZtoWiqrqybduybgvDqKqua9uybeuorqvbuq3bui9UXVmWbVu3dR3XtnXd9nVd+Bmzbeu2buu+8CMMR9/4IeTj+3RCCAAAT3AAACqwYXWEk6KxwEJDVgIAGQAAgDFKGYUYM0gxphhjTDHGmAAAgAEHAIAAE8pAoSErAoAoAADAOeecc84555xzzjnnnHPOOeecc44xxhhjjDHGGGOMMcYYY4wxxhhjjDHGGGOMMcYYY0wAwE6EA8BOhIVQaMhKACAcAABACCEpKaWUUkoRU85BSSmllFKqFIOMSkoppZRSpBR1lFJKKaWUIqWgpJJSSimllElJKaWUUkoppYw6SimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaWUUkoppZRSSimllFJKKaVUSimllFJKKaWUUkoppRQAYPLgAACVYOMMK0lnhaPBhYasBAByAwAAhRiDEEJpraRUUkolVc5BKCWUlEpKKZWUUqqYgxBKKqmlklJKKbXSQSihlFBKKSWUUkooJYQQSgmhlFRCK6mEUkoHoYQSQimhhFRKKSWUzkEoIYUOQkmllNRCSB10VFIpIZVSSiklpZQ6CKGUklJLLZVSWkqpdBJSKamV1FJqqbWSUgmhpFZKSSWl0lpJJbUSSkklpZRSSymFVFJJJYSSUioltZZaSqm11lJIqZWUUkqppdRSSiWlkEpKqZSSUmollZRSaiGVlEpJKaTUSimlpFRCSamlUlpKLbWUSkmptFRSSaWUlEpJKaVSSksppRJKSqmllFpJKYWSUkoplZJSSyW1VEoKJaWUUkmptJRSSymVklIBAEAHDgAAAUZUWoidZlx5BI4oZJiAAgAAQABAgAkgMEBQMApBgDACAQAAAADAAAAfAABHARAR0ZzBAUKCwgJDg8MDAAAAAAAAAAAAAACAT2dnUwAEAAAAAAAAAADqnjMlAgAAADzQPmcBAQA=');
+		if (mpeg) canPlayThrough('audio/mpeg;base64,/+MYxAAAAANIAUAAAASEEB/jwOFM/0MM/90b/+RhST//w4NFwOjf///PZu////9lns5GFDv//l9GlUIEEIAAAgIg8Ir/JGq3/+MYxDsLIj5QMYcoAP0dv9HIjUcH//yYSg+CIbkGP//8w0bLVjUP///3Z0x5QCAv/yLjwtGKTEFNRTMuOTeqqqqqqqqqqqqq/+MYxEkNmdJkUYc4AKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq');
+
+		/// lets find out!
+		var time = (new Date()).getTime(); 
+		var interval = window.setInterval(function() {
+			var now = (new Date()).getTime();
+			var maxExecution = now - time > 5000;
+			if (!pending || maxExecution) {
+				window.clearInterval(interval);
+				onsuccess(supports);
+			}
+		}, 1);
+	};
+
+})(MIDI);
+/*
+	----------------------------------------------------------
+	GeneralMIDI
+	----------------------------------------------------------
+*/
+
+(function(root) { 'use strict';
+
+	root.GM = (function(arr) {
+		var clean = function(name) {
+			return name.replace(/[^a-z0-9 ]/gi, '').replace(/[ ]/g, '_').toLowerCase();
+		};
+		var res = {
+			byName: { },
+			byId: { },
+			byCategory: { }
+		};
+		for (var key in arr) {
+			var list = arr[key];
+			for (var n = 0, length = list.length; n < length; n++) {
+				var instrument = list[n];
+				if (!instrument) continue;
+				var num = parseInt(instrument.substr(0, instrument.indexOf(' ')), 10);
+				instrument = instrument.replace(num + ' ', '');
+				res.byId[--num] = 
+				res.byName[clean(instrument)] = 
+				res.byCategory[clean(key)] = {
+					id: clean(instrument),
+					instrument: instrument,
+					number: num,
+					category: key
+				};
+			}
+		}
+		return res;
+	})({
+		'Piano': ['1 Acoustic Grand Piano', '2 Bright Acoustic Piano', '3 Electric Grand Piano', '4 Honky-tonk Piano', '5 Electric Piano 1', '6 Electric Piano 2', '7 Harpsichord', '8 Clavinet'],
+		'Chromatic Percussion': ['9 Celesta', '10 Glockenspiel', '11 Music Box', '12 Vibraphone', '13 Marimba', '14 Xylophone', '15 Tubular Bells', '16 Dulcimer'],
+		'Organ': ['17 Drawbar Organ', '18 Percussive Organ', '19 Rock Organ', '20 Church Organ', '21 Reed Organ', '22 Accordion', '23 Harmonica', '24 Tango Accordion'],
+		'Guitar': ['25 Acoustic Guitar (nylon)', '26 Acoustic Guitar (steel)', '27 Electric Guitar (jazz)', '28 Electric Guitar (clean)', '29 Electric Guitar (muted)', '30 Overdriven Guitar', '31 Distortion Guitar', '32 Guitar Harmonics'],
+		'Bass': ['33 Acoustic Bass', '34 Electric Bass (finger)', '35 Electric Bass (pick)', '36 Fretless Bass', '37 Slap Bass 1', '38 Slap Bass 2', '39 Synth Bass 1', '40 Synth Bass 2'],
+		'Strings': ['41 Violin', '42 Viola', '43 Cello', '44 Contrabass', '45 Tremolo Strings', '46 Pizzicato Strings', '47 Orchestral Harp', '48 Timpani'],
+		'Ensemble': ['49 String Ensemble 1', '50 String Ensemble 2', '51 Synth Strings 1', '52 Synth Strings 2', '53 Choir Aahs', '54 Voice Oohs', '55 Synth Choir', '56 Orchestra Hit'],
+		'Brass': ['57 Trumpet', '58 Trombone', '59 Tuba', '60 Muted Trumpet', '61 French Horn', '62 Brass Section', '63 Synth Brass 1', '64 Synth Brass 2'],
+		'Reed': ['65 Soprano Sax', '66 Alto Sax', '67 Tenor Sax', '68 Baritone Sax', '69 Oboe', '70 English Horn', '71 Bassoon', '72 Clarinet'],
+		'Pipe': ['73 Piccolo', '74 Flute', '75 Recorder', '76 Pan Flute', '77 Blown Bottle', '78 Shakuhachi', '79 Whistle', '80 Ocarina'],
+		'Synth Lead': ['81 Lead 1 (square)', '82 Lead 2 (sawtooth)', '83 Lead 3 (calliope)', '84 Lead 4 (chiff)', '85 Lead 5 (charang)', '86 Lead 6 (voice)', '87 Lead 7 (fifths)', '88 Lead 8 (bass + lead)'],
+		'Synth Pad': ['89 Pad 1 (new age)', '90 Pad 2 (warm)', '91 Pad 3 (polysynth)', '92 Pad 4 (choir)', '93 Pad 5 (bowed)', '94 Pad 6 (metallic)', '95 Pad 7 (halo)', '96 Pad 8 (sweep)'],
+		'Synth Effects': ['97 FX 1 (rain)', '98 FX 2 (soundtrack)', '99 FX 3 (crystal)', '100 FX 4 (atmosphere)', '101 FX 5 (brightness)', '102 FX 6 (goblins)', '103 FX 7 (echoes)', '104 FX 8 (sci-fi)'],
+		'Ethnic': ['105 Sitar', '106 Banjo', '107 Shamisen', '108 Koto', '109 Kalimba', '110 Bagpipe', '111 Fiddle', '112 Shanai'],
+		'Percussive': ['113 Tinkle Bell', '114 Agogo', '115 Steel Drums', '116 Woodblock', '117 Taiko Drum', '118 Melodic Tom', '119 Synth Drum'],
+		'Sound effects': ['120 Reverse Cymbal', '121 Guitar Fret Noise', '122 Breath Noise', '123 Seashore', '124 Bird Tweet', '125 Telephone Ring', '126 Helicopter', '127 Applause', '128 Gunshot']
+	});
+
+	/* get/setInstrument
+	--------------------------------------------------- */
+	root.getInstrument = function(channelId) {
+		var channel = root.channels[channelId];
+		return channel && channel.instrument;
+	};
+
+	root.setInstrument = function(channelId, program, delay) {
+		var channel = root.channels[channelId];
+		if (delay) {
+			return setTimeout(function() {
+				channel.instrument = program;
+			}, delay);
+		} else {
+			channel.instrument = program;
+		}
+	};
+
+	/* get/setMono
+	--------------------------------------------------- */
+	root.getMono = function(channelId) {
+		var channel = root.channels[channelId];
+		return channel && channel.mono;
+	};
+
+	root.setMono = function(channelId, truthy, delay) {
+		var channel = root.channels[channelId];
+		if (delay) {
+			return setTimeout(function() {
+				channel.mono = truthy;
+			}, delay);
+		} else {
+			channel.mono = truthy;
+		}
+	};
+
+	/* get/setOmni
+	--------------------------------------------------- */
+	root.getOmni = function(channelId) {
+		var channel = root.channels[channelId];
+		return channel && channel.omni;
+	};
+
+	root.setOmni = function(channelId, truthy) {
+		var channel = root.channels[channelId];
+		if (delay) {
+			return setTimeout(function() {
+				channel.omni = truthy;	
+			}, delay);
+		} else {
+			channel.omni = truthy;
+		}
+	};
+
+	/* get/setSolo
+	--------------------------------------------------- */
+	root.getSolo = function(channelId) {
+		var channel = root.channels[channelId];
+		return channel && channel.solo;
+	};
+
+	root.setSolo = function(channelId, truthy) {
+		var channel = root.channels[channelId];
+		if (delay) {
+			return setTimeout(function() {
+				channel.solo = truthy;	
+			}, delay);
+		} else {
+			channel.solo = truthy;
+		}
+	};
+
+	/* channels
+	--------------------------------------------------- */
+	root.channels = (function() { // 0 - 15 channels
+		var channels = {};
+		for (var i = 0; i < 16; i++) {
+			channels[i] = { // default values
+				instrument: i,
+				pitchBend: 0,
+				mute: false,
+				mono: false,
+				omni: false,
+				solo: false
+			};
+		}
+		return channels;
+	})();
+
+	/* note conversions
+	--------------------------------------------------- */
+	root.keyToNote = {}; // C8  == 108
+	root.noteToKey = {}; // 108 ==  C8
+
+	(function() {
+		var A0 = 0x15; // first note
+		var C8 = 0x6C; // last note
+		var number2key = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'];
+		for (var n = A0; n <= C8; n++) {
+			var octave = (n - 12) / 12 >> 0;
+			var name = number2key[n % 12] + octave;
+			root.keyToNote[name] = n;
+			root.noteToKey[n] = name;
+		}
+	})();
+
+})(MIDI);
+/*
+	----------------------------------------------------------
+	MIDI.Plugin : 0.3.4 : 2015-03-26
+	----------------------------------------------------------
+	https://github.com/mudcube/MIDI.js
+	----------------------------------------------------------
+	Inspired by javax.sound.midi (albeit a super simple version): 
+		http://docs.oracle.com/javase/6/docs/api/javax/sound/midi/package-summary.html
+	----------------------------------------------------------
+	Technologies
+	----------------------------------------------------------
+		Web MIDI API - no native support yet (jazzplugin)
+		Web Audio API - firefox 25+, chrome 10+, safari 6+, opera 15+
+		HTML5 Audio Tag - ie 9+, firefox 3.5+, chrome 4+, safari 4+, opera 9.5+, ios 4+, android 2.3+
+	----------------------------------------------------------
+*/
+
+if (typeof MIDI === 'undefined') MIDI = {};
+
+MIDI.Soundfont = MIDI.Soundfont || {};
+MIDI.Player = MIDI.Player || {};
+
+(function(root) { 'use strict';
+
+	root.DEBUG = true;
+	root.USE_XHR = true;
+	root.soundfontUrl = './soundfont/';
+
+	/*
+		MIDI.loadPlugin({
+			onsuccess: function() { },
+			onprogress: function(state, percent) { },
+			targetFormat: 'mp3', // optionally can force to use MP3 (for instance on mobile networks)
+			instrument: 'acoustic_grand_piano', // or 1 (default)
+			instruments: [ 'acoustic_grand_piano', 'acoustic_guitar_nylon' ] // or multiple instruments
+		});
+	*/
+
+	root.loadPlugin = function(opts) {
+		if (typeof opts === 'function') {
+			opts = {onsuccess: opts};
+		}
+
+		root.soundfontUrl = opts.soundfontUrl || root.soundfontUrl;
+
+		/// Detect the best type of audio to use
+		root.audioDetect(function(supports) {
+			var hash = window.location.hash;
+			var api = '';
+
+			/// use the most appropriate plugin if not specified
+			if (supports[opts.api]) {
+				api = opts.api;
+			} else if (supports[hash.substr(1)]) {
+				api = hash.substr(1);
+			} else if (supports.webmidi) {
+				api = 'webmidi';
+			} else if (window.AudioContext) { // Chrome
+				api = 'webaudio';
+			} else if (window.Audio) { // Firefox
+				api = 'audiotag';
+			}
+
+			if (connect[api]) {
+				/// use audio/ogg when supported
+				if (opts.targetFormat) {
+					var audioFormat = opts.targetFormat;
+				} else { // use best quality
+					var audioFormat = supports['audio/ogg'] ? 'ogg' : 'mp3';
+				}
+
+				/// load the specified plugin
+				root.__api = api;
+				root.__audioFormat = audioFormat;
+				root.supports = supports;
+				root.loadResource(opts);
+			}
+		});
+	};
+
+	/*
+		root.loadResource({
+			onsuccess: function() { },
+			onprogress: function(state, percent) { },
+			instrument: 'banjo'
+		})
+	*/
+
+	root.loadResource = function(opts) {
+		var instruments = opts.instruments || opts.instrument || 'acoustic_grand_piano';
+		///
+		if (typeof instruments !== 'object') {
+			if (instruments || instruments === 0) {
+				instruments = [instruments];
+			} else {
+				instruments = [];
+			}
+		}
+		/// convert numeric ids into strings
+		for (var i = 0; i < instruments.length; i ++) {
+			var instrument = instruments[i];
+			if (instrument === +instrument) { // is numeric
+				if (root.GM.byId[instrument]) {
+					instruments[i] = root.GM.byId[instrument].id;
+				}
+			}
+		}
+		///
+		opts.format = root.__audioFormat;
+		opts.instruments = instruments;
+		///
+		connect[root.__api](opts);
+	};
+
+	var connect = {
+		webmidi: function(opts) {
+			// cant wait for this to be standardized!
+			root.WebMIDI.connect(opts);
+		},
+		audiotag: function(opts) {
+			// works ok, kinda like a drunken tuna fish, across the board
+			// http://caniuse.com/audio
+			requestQueue(opts, 'AudioTag');
+		},
+		webaudio: function(opts) {
+			// works awesome! safari, chrome and firefox support
+			// http://caniuse.com/web-audio
+			requestQueue(opts, 'WebAudio');
+		}
+	};
+
+	var requestQueue = function(opts, context) {
+		var audioFormat = opts.format;
+		var instruments = opts.instruments;
+		var onprogress = opts.onprogress;
+		var onerror = opts.onerror;
+		///
+		var length = instruments.length;
+		var pending = length;
+		var waitForEnd = function() {
+			if (!--pending) {
+				onprogress && onprogress('load', 1.0);
+				root[context].connect(opts);
+			}
+		};
+		///
+		for (var i = 0; i < length; i ++) {
+			var instrumentId = instruments[i];
+			if (MIDI.Soundfont[instrumentId]) { // already loaded
+				waitForEnd();
+			} else { // needs to be requested
+				sendRequest(instruments[i], audioFormat, function(evt, progress) {
+					var fileProgress = progress / length;
+					var queueProgress = (length - pending) / length;
+					onprogress && onprogress('load', fileProgress + queueProgress, instrumentId);
+				}, function() {
+					waitForEnd();
+				}, onerror);
+			}
+		};
+	};
+
+	var sendRequest = function(instrumentId, audioFormat, onprogress, onsuccess, onerror) {
+		var soundfontPath = root.soundfontUrl + instrumentId + '-' + audioFormat + '.js';
+		if (root.USE_XHR) {
+			root.util.request({
+				url: soundfontPath,
+				format: 'text',
+				onerror: onerror,
+				onprogress: onprogress,
+				onsuccess: function(event, responseText) {
+					var script = document.createElement('script');
+					script.language = 'javascript';
+					script.type = 'text/javascript';
+					script.text = responseText;
+					document.body.appendChild(script);
+					///
+					onsuccess();
+				}
+			});
+		} else {
+			dom.loadScript.add({
+				url: soundfontPath,
+				verify: 'MIDI.Soundfont["' + instrumentId + '"]',
+				onerror: onerror,
+				onsuccess: function() {
+					onsuccess();
+				}
+			});
+		}
+	};
+
+	root.setDefaultPlugin = function(midi) {
+		for (var key in midi) {
+			root[key] = midi[key];
+		}
+	};
+
+})(MIDI);
+/*
+	----------------------------------------------------------
+	MIDI.Player : 0.3.1 : 2015-03-26
+	----------------------------------------------------------
+	https://github.com/mudcube/MIDI.js
+	----------------------------------------------------------
+*/
+
+if (typeof MIDI === 'undefined') MIDI = {};
+if (typeof MIDI.Player === 'undefined') MIDI.Player = {};
+
+(function() { 'use strict';
+
+var midi = MIDI.Player;
+midi.currentTime = 0;
+midi.endTime = 0; 
+midi.restart = 0; 
+midi.playing = false;
+midi.timeWarp = 1;
+midi.startDelay = 0;
+midi.BPM = 120;
+
+midi.start =
+midi.resume = function(onsuccess) {
+    if (midi.currentTime < -1) {
+    	midi.currentTime = -1;
+    }
+    startAudio(midi.currentTime, null, onsuccess);
+};
+
+midi.pause = function() {
+	var tmp = midi.restart;
+	stopAudio();
+	midi.restart = tmp;
+};
+
+midi.stop = function() {
+	stopAudio();
+	midi.restart = 0;
+	midi.currentTime = 0;
+};
+
+midi.addListener = function(onsuccess) {
+	onMidiEvent = onsuccess;
+};
+
+midi.removeListener = function() {
+	onMidiEvent = undefined;
+};
+
+midi.clearAnimation = function() {
+	if (midi.animationFrameId)  {
+		cancelAnimationFrame(midi.animationFrameId);
+	}
+};
+
+midi.setAnimation = function(callback) {
+	var currentTime = 0;
+	var tOurTime = 0;
+	var tTheirTime = 0;
+	//
+	midi.clearAnimation();
+	///
+	var frame = function() {
+		midi.animationFrameId = requestAnimationFrame(frame);
+		///
+		if (midi.endTime === 0) {
+			return;
+		}
+		if (midi.playing) {
+			currentTime = (tTheirTime === midi.currentTime) ? tOurTime - Date.now() : 0;
+			if (midi.currentTime === 0) {
+				currentTime = 0;
+			} else {
+				currentTime = midi.currentTime - currentTime;
+			}
+			if (tTheirTime !== midi.currentTime) {
+				tOurTime = Date.now();
+				tTheirTime = midi.currentTime;
+			}
+		} else { // paused
+			currentTime = midi.currentTime;
+		}
+		///
+		var endTime = midi.endTime;
+		var percent = currentTime / endTime;
+		var total = currentTime / 1000;
+		var minutes = total / 60;
+		var seconds = total - (minutes * 60);
+		var t1 = minutes * 60 + seconds;
+		var t2 = (endTime / 1000);
+		///
+		if (t2 - t1 < -1.0) {
+			return;
+		} else {
+			callback({
+				now: t1,
+				end: t2,
+				events: noteRegistrar
+			});
+		}
+	};
+	///
+	requestAnimationFrame(frame);
+};
+
+// helpers
+
+midi.loadMidiFile = function(onsuccess, onprogress, onerror) {
+	try {
+		midi.replayer = new Replayer(MidiFile(midi.currentData), midi.timeWarp, null, midi.BPM);
+		midi.data = midi.replayer.getData();
+		midi.endTime = getLength();
+		///
+		MIDI.loadPlugin({
+// 			instruments: midi.getFileInstruments(),
+			onsuccess: onsuccess,
+			onprogress: onprogress,
+			onerror: onerror
+		});
+	} catch(event) {
+		onerror && onerror(event);
+	}
+};
+
+midi.loadFile = function(file, onsuccess, onprogress, onerror) {
+	midi.stop();
+	if (file.indexOf('base64,') !== -1) {
+		var data = window.atob(file.split(',')[1]);
+		midi.currentData = data;
+		midi.loadMidiFile(onsuccess, onprogress, onerror);
+	} else {
+		var fetch = new XMLHttpRequest();
+		fetch.open('GET', file);
+		fetch.overrideMimeType('text/plain; charset=x-user-defined');
+		fetch.onreadystatechange = function() {
+			if (this.readyState === 4) {
+				if (this.status === 200) {
+					var t = this.responseText || '';
+					var ff = [];
+					var mx = t.length;
+					var scc = String.fromCharCode;
+					for (var z = 0; z < mx; z++) {
+						ff[z] = scc(t.charCodeAt(z) & 255);
+					}
+					///
+					var data = ff.join('');
+					midi.currentData = data;
+					midi.loadMidiFile(onsuccess, onprogress, onerror);
+				} else {
+					onerror && onerror('Unable to load MIDI file');
+				}
+			}
+		};
+		fetch.send();
+	}
+};
+
+midi.getFileInstruments = function() {
+	var instruments = {};
+	var programs = {};
+	for (var n = 0; n < midi.data.length; n ++) {
+		var event = midi.data[n][0].event;
+		if (event.type !== 'channel') {
+			continue;
+		}
+		var channel = event.channel;
+		switch(event.subtype) {
+			case 'controller':
+//				console.log(event.channel, MIDI.defineControl[event.controllerType], event.value);
+				break;
+			case 'programChange':
+				programs[channel] = event.programNumber;
+				break;
+			case 'noteOn':
+				var program = programs[channel];
+				var gm = MIDI.GM.byId[isFinite(program) ? program : channel];
+				instruments[gm.id] = true;
+				break;
+		}
+	}
+	var ret = [];
+	for (var key in instruments) {
+		ret.push(key);
+	}
+	return ret;
+};
+
+// Playing the audio
+
+var eventQueue = []; // hold events to be triggered
+var queuedTime; // 
+var startTime = 0; // to measure time elapse
+var noteRegistrar = {}; // get event for requested note
+var onMidiEvent = undefined; // listener
+var scheduleTracking = function(channel, note, currentTime, offset, message, velocity, time) {
+	return setTimeout(function() {
+		var data = {
+			channel: channel,
+			note: note,
+			now: currentTime,
+			end: midi.endTime,
+			message: message,
+			velocity: velocity
+		};
+		//
+		if (message === 128) {
+			delete noteRegistrar[note];
+		} else {
+			noteRegistrar[note] = data;
+		}
+		if (onMidiEvent) {
+			onMidiEvent(data);
+		}
+		midi.currentTime = currentTime;
+		///
+		eventQueue.shift();
+		///
+		if (eventQueue.length < 1000) {
+			startAudio(queuedTime, true);
+		} else if (midi.currentTime === queuedTime && queuedTime < midi.endTime) { // grab next sequence
+			startAudio(queuedTime, true);
+		}
+	}, currentTime - offset);
+};
+
+var getContext = function() {
+	if (MIDI.api === 'webaudio') {
+		return MIDI.WebAudio.getContext();
+	} else {
+		midi.ctx = {currentTime: 0};
+	}
+	return midi.ctx;
+};
+
+var getLength = function() {
+	var data =  midi.data;
+	var length = data.length;
+	var totalTime = 0.5;
+	for (var n = 0; n < length; n++) {
+		totalTime += data[n][1];
+	}
+	return totalTime;
+};
+
+var __now;
+var getNow = function() {
+    if (window.performance && window.performance.now) {
+        return window.performance.now();
+    } else {
+		return Date.now();
+	}
+};
+
+var startAudio = function(currentTime, fromCache, onsuccess) {
+	if (!midi.replayer) {
+		return;
+	}
+	if (!fromCache) {
+		if (typeof currentTime === 'undefined') {
+			currentTime = midi.restart;
+		}
+		///
+		midi.playing && stopAudio();
+		midi.playing = true;
+		midi.data = midi.replayer.getData();
+		midi.endTime = getLength();
+	}
+	///
+	var note;
+	var offset = 0;
+	var messages = 0;
+	var data = midi.data;
+	var ctx = getContext();
+	var length = data.length;
+	//
+	queuedTime = 0.5;
+	///
+	var interval = eventQueue[0] && eventQueue[0].interval || 0;
+	var foffset = currentTime - midi.currentTime;
+	///
+	if (MIDI.api !== 'webaudio') { // set currentTime on ctx
+		var now = getNow();
+		__now = __now || now;
+		ctx.currentTime = (now - __now) / 1000;
+	}
+	///
+	startTime = ctx.currentTime;
+	///
+	for (var n = 0; n < length && messages < 100; n++) {
+		var obj = data[n];
+		if ((queuedTime += obj[1]) <= currentTime) {
+			offset = queuedTime;
+			continue;
+		}
+		///
+		currentTime = queuedTime - offset;
+		///
+		var event = obj[0].event;
+		if (event.type !== 'channel') {
+			continue;
+		}
+		///
+		var channelId = event.channel;
+		var channel = MIDI.channels[channelId];
+		var delay = ctx.currentTime + ((currentTime + foffset + midi.startDelay) / 1000);
+		var queueTime = queuedTime - offset + midi.startDelay;
+		switch (event.subtype) {
+			case 'controller':
+				MIDI.setController(channelId, event.controllerType, event.value, delay);
+				break;
+			case 'programChange':
+				MIDI.programChange(channelId, event.programNumber, delay);
+				break;
+			case 'pitchBend':
+				MIDI.pitchBend(channelId, event.value, delay);
+				break;
+			case 'noteOn':
+				if (channel.mute) break;
+				note = event.noteNumber - (midi.MIDIOffset || 0);
+				eventQueue.push({
+				    event: event,
+				    time: queueTime,
+				    source: MIDI.noteOn(channelId, event.noteNumber, event.velocity, delay),
+				    interval: scheduleTracking(channelId, note, queuedTime + midi.startDelay, offset - foffset, 144, event.velocity)
+				});
+				messages++;
+				break;
+			case 'noteOff':
+				if (channel.mute) break;
+				note = event.noteNumber - (midi.MIDIOffset || 0);
+				eventQueue.push({
+				    event: event,
+				    time: queueTime,
+				    source: MIDI.noteOff(channelId, event.noteNumber, delay),
+				    interval: scheduleTracking(channelId, note, queuedTime, offset - foffset, 128, 0)
+				});
+				break;
+			default:
+				break;
+		}
+	}
+	///
+	onsuccess && onsuccess(eventQueue);
+};
+
+var stopAudio = function() {
+	var ctx = getContext();
+	midi.playing = false;
+	midi.restart += (ctx.currentTime - startTime) * 1000;
+	// stop the audio, and intervals
+	while (eventQueue.length) {
+		var o = eventQueue.pop();
+		window.clearInterval(o.interval);
+		if (!o.source) continue; // is not webaudio
+		if (typeof(o.source) === 'number') {
+			window.clearTimeout(o.source);
+		} else { // webaudio
+			o.source.disconnect(0);
+		}
+	}
+	// run callback to cancel any notes still playing
+	for (var key in noteRegistrar) {
+		var o = noteRegistrar[key]
+		if (noteRegistrar[key].message === 144 && onMidiEvent) {
+			onMidiEvent({
+				channel: o.channel,
+				note: o.note,
+				now: o.now,
+				end: o.end,
+				message: 128,
+				velocity: o.velocity
+			});
+		}
+	}
+	// reset noteRegistrar
+	noteRegistrar = {};
+};
+
+})();
+/*
+	----------------------------------------------------------------------
+	AudioTag <audio> - OGG or MPEG Soundbank
+	----------------------------------------------------------------------
+	http://dev.w3.org/html5/spec/Overview.html#the-audio-element
+	----------------------------------------------------------------------
+*/
+
+(function(root) { 'use strict';
+
+	window.Audio && (function() {
+		var midi = root.AudioTag = { api: 'audiotag' };
+		var noteToKey = {};
+		var volume = 127; // floating point 
+		var buffer_nid = -1; // current channel
+		var audioBuffers = []; // the audio channels
+		var notesOn = []; // instrumentId + noteId that is currently playing in each 'channel', for routing noteOff/chordOff calls
+		var notes = {}; // the piano keys
+		for (var nid = 0; nid < 12; nid ++) {
+			audioBuffers[nid] = new Audio();
+		}
+
+		var playChannel = function(channel, note) {
+			if (!root.channels[channel]) return;
+			var instrument = root.channels[channel].instrument;
+			var instrumentId = root.GM.byId[instrument].id;
+			var note = notes[note];
+			if (note) {
+				var instrumentNoteId = instrumentId + '' + note.id;
+				var nid = (buffer_nid + 1) % audioBuffers.length;
+				var audio = audioBuffers[nid];
+				notesOn[ nid ] = instrumentNoteId;
+				if (!root.Soundfont[instrumentId]) {
+					if (root.DEBUG) {
+						console.log('404', instrumentId);
+					}
+					return;
+				}
+				audio.src = root.Soundfont[instrumentId][note.id];
+				audio.volume = volume / 127;
+				audio.play();
+				buffer_nid = nid;
+			}
+		};
+
+		var stopChannel = function(channel, note) {
+			if (!root.channels[channel]) return;
+			var instrument = root.channels[channel].instrument;
+			var instrumentId = root.GM.byId[instrument].id;
+			var note = notes[note];
+			if (note) {
+				var instrumentNoteId = instrumentId + '' + note.id;
+				for (var i = 0, len = audioBuffers.length; i < len; i++) {
+				    var nid = (i + buffer_nid + 1) % len;
+				    var cId = notesOn[nid];
+				    if (cId && cId == instrumentNoteId) {
+				        audioBuffers[nid].pause();
+				        notesOn[nid] = null;
+				        return;
+				    }
+				}
+			}
+		};
+	
+		midi.audioBuffers = audioBuffers;
+		midi.send = function(data, delay) { };
+		midi.setController = function(channel, type, value, delay) { };
+		midi.setVolume = function(channel, n) {
+			volume = n; //- should be channel specific volume
+		};
+
+		midi.programChange = function(channel, program) {
+			root.channels[channel].instrument = program;
+		};
+
+		midi.pitchBend = function(channel, program, delay) { };
+
+		midi.noteOn = function(channel, note, velocity, delay) {
+			var id = noteToKey[note];
+			if (!notes[id]) return;
+			if (delay) {
+				return setTimeout(function() {
+					playChannel(channel, id);
+				}, delay * 1000);
+			} else {
+				playChannel(channel, id);
+			}
+		};
+	
+		midi.noteOff = function(channel, note, delay) {
+// 			var id = noteToKey[note];
+// 			if (!notes[id]) return;
+// 			if (delay) {
+// 				return setTimeout(function() {
+// 					stopChannel(channel, id);
+// 				}, delay * 1000)
+// 			} else {
+// 				stopChannel(channel, id);
+// 			}
+		};
+	
+		midi.chordOn = function(channel, chord, velocity, delay) {
+			for (var idx = 0; idx < chord.length; idx ++) {
+				var n = chord[idx];
+				var id = noteToKey[n];
+				if (!notes[id]) continue;
+				if (delay) {
+					return setTimeout(function() {
+						playChannel(channel, id);
+					}, delay * 1000);
+				} else {
+					playChannel(channel, id);
+				}
+			}
+		};
+	
+		midi.chordOff = function(channel, chord, delay) {
+			for (var idx = 0; idx < chord.length; idx ++) {
+				var n = chord[idx];
+				var id = noteToKey[n];
+				if (!notes[id]) continue;
+				if (delay) {
+					return setTimeout(function() {
+						stopChannel(channel, id);
+					}, delay * 1000);
+				} else {
+					stopChannel(channel, id);
+				}
+			}
+		};
+	
+		midi.stopAllNotes = function() {
+			for (var nid = 0, length = audioBuffers.length; nid < length; nid++) {
+				audioBuffers[nid].pause();
+			}
+		};
+	
+		midi.connect = function(opts) {
+			root.setDefaultPlugin(midi);
+			///
+			for (var key in root.keyToNote) {
+				noteToKey[root.keyToNote[key]] = key;
+				notes[key] = {id: key};
+			}
+			///
+			opts.onsuccess && opts.onsuccess();
+		};
+	})();
+
+})(MIDI);
+/*
+	----------------------------------------------------------
+	Web Audio API - OGG or MPEG Soundbank
+	----------------------------------------------------------
+	http://webaudio.github.io/web-audio-api/
+	----------------------------------------------------------
+*/
+
+(function(root) { 'use strict';
+
+	window.AudioContext && (function() {
+		var audioContext = null; // new AudioContext();
+		var useStreamingBuffer = false; // !!audioContext.createMediaElementSource;
+		var midi = root.WebAudio = {api: 'webaudio'};
+		var ctx; // audio context
+		var sources = {};
+		var effects = {};
+		var masterVolume = 127;
+		var audioBuffers = {};
+		///
+		midi.audioBuffers = audioBuffers;
+		midi.send = function(data, delay) { };
+		midi.setController = function(channelId, type, value, delay) { };
+
+		midi.setVolume = function(channelId, volume, delay) {
+			if (delay) {
+				setTimeout(function() {
+					masterVolume = volume;
+				}, delay * 1000);
+			} else {
+				masterVolume = volume;
+			}
+		};
+
+		midi.programChange = function(channelId, program, delay) {
+// 			if (delay) {
+// 				return setTimeout(function() {
+// 					var channel = root.channels[channelId];
+// 					channel.instrument = program;
+// 				}, delay);
+// 			} else {
+				var channel = root.channels[channelId];
+				channel.instrument = program;
+// 			}
+		};
+
+		midi.pitchBend = function(channelId, program, delay) {
+// 			if (delay) {
+// 				setTimeout(function() {
+// 					var channel = root.channels[channelId];
+// 					channel.pitchBend = program;
+// 				}, delay);
+// 			} else {
+				var channel = root.channels[channelId];
+				channel.pitchBend = program;
+// 			}
+		};
+
+		midi.noteOn = function(channelId, noteId, velocity, delay) {
+			delay = delay || 0;
+
+			/// check whether the note exists
+			var channel = root.channels[channelId];
+			var instrument = channel.instrument;
+			var bufferId = instrument + '' + noteId;
+			var buffer = audioBuffers[bufferId];
+			if (!buffer) {
+// 				console.log(MIDI.GM.byId[instrument].id, instrument, channelId);
+				return;
+			}
+
+			/// convert relative delay to absolute delay
+			if (delay < ctx.currentTime) {
+				delay += ctx.currentTime;
+			}
+		
+			/// create audio buffer
+			if (useStreamingBuffer) {
+				var source = ctx.createMediaElementSource(buffer);
+			} else { // XMLHTTP buffer
+				var source = ctx.createBufferSource();
+				source.buffer = buffer;
+			}
+
+			/// add effects to buffer
+			if (effects) {
+				var chain = source;
+				for (var key in effects) {
+					chain.connect(effects[key].input);
+					chain = effects[key];
+				}
+			}
+
+			/// add gain + pitchShift
+			var gain = (velocity / 127) * (masterVolume / 127) * 2 - 1;
+			source.connect(ctx.destination);
+			source.playbackRate.value = 1; // pitch shift 
+			source.gainNode = ctx.createGain(); // gain
+			source.gainNode.connect(ctx.destination);
+			source.gainNode.gain.value = Math.min(1.0, Math.max(-1.0, gain));
+			source.connect(source.gainNode);
+			///
+			if (useStreamingBuffer) {
+				if (delay) {
+					return setTimeout(function() {
+						buffer.currentTime = 0;
+						buffer.play()
+					}, delay * 1000);
+				} else {
+					buffer.currentTime = 0;
+					buffer.play()
+				}
+			} else {
+				source.start(delay || 0);
+			}
+			///
+			sources[channelId + '' + noteId] = source;
+			///
+			return source;
+		};
+
+		midi.noteOff = function(channelId, noteId, delay) {
+			delay = delay || 0;
+
+			/// check whether the note exists
+			var channel = root.channels[channelId];
+			var instrument = channel.instrument;
+			var bufferId = instrument + '' + noteId;
+			var buffer = audioBuffers[bufferId];
+			if (buffer) {
+				if (delay < ctx.currentTime) {
+					delay += ctx.currentTime;
+				}
+				///
+				var source = sources[channelId + '' + noteId];
+				if (source) {
+					if (source.gainNode) {
+						// @Miranet: 'the values of 0.2 and 0.3 could of course be used as 
+						// a 'release' parameter for ADSR like time settings.'
+						// add { 'metadata': { release: 0.3 } } to soundfont files
+						var gain = source.gainNode.gain;
+						gain.linearRampToValueAtTime(gain.value, delay);
+						gain.linearRampToValueAtTime(-1.0, delay + 0.3);
+					}
+					///
+					if (useStreamingBuffer) {
+						if (delay) {
+							setTimeout(function() {
+								buffer.pause();
+							}, delay * 1000);
+						} else {
+							buffer.pause();
+						}
+					} else {
+						if (source.noteOff) {
+							source.noteOff(delay + 0.5);
+						} else {
+							source.stop(delay + 0.5);
+						}
+					}
+					///
+					delete sources[channelId + '' + noteId];
+					///
+					return source;
+				}
+			}
+		};
+
+		midi.chordOn = function(channel, chord, velocity, delay) {
+			var res = {};
+			for (var n = 0, note, len = chord.length; n < len; n++) {
+				res[note = chord[n]] = midi.noteOn(channel, note, velocity, delay);
+			}
+			return res;
+		};
+
+		midi.chordOff = function(channel, chord, delay) {
+			var res = {};
+			for (var n = 0, note, len = chord.length; n < len; n++) {
+				res[note = chord[n]] = midi.noteOff(channel, note, delay);
+			}
+			return res;
+		};
+
+		midi.stopAllNotes = function() {
+			for (var sid in sources) {
+				var delay = 0;
+				if (delay < ctx.currentTime) {
+					delay += ctx.currentTime;
+				}
+				var source = sources[sid];
+				source.gain.linearRampToValueAtTime(1, delay);
+				source.gain.linearRampToValueAtTime(0, delay + 0.3);
+				if (source.noteOff) { // old api
+					source.noteOff(delay + 0.3);
+				} else { // new api
+					source.stop(delay + 0.3);
+				}
+				delete sources[sid];
+			}
+		};
+
+		midi.setEffects = function(list) {
+			if (ctx.tunajs) {
+				for (var n = 0; n < list.length; n ++) {
+					var data = list[n];
+					var effect = new ctx.tunajs[data.type](data);
+					effect.connect(ctx.destination);
+					effects[data.type] = effect;
+				}
+			} else {
+				return console.log('Effects module not installed.');
+			}
+		};
+
+		midi.connect = function(opts) {
+			root.setDefaultPlugin(midi);
+			midi.setContext(ctx || createAudioContext(), opts.onsuccess);
+		};
+	
+		midi.getContext = function() {
+			return ctx;
+		};
+	
+		midi.setContext = function(newCtx, onload, onprogress, onerror) {
+			ctx = newCtx;
+
+			/// tuna.js effects module - https://github.com/Dinahmoe/tuna
+			if (typeof Tuna !== 'undefined' && !ctx.tunajs) {
+				ctx.tunajs = new Tuna(ctx);
+			}
+		
+			/// loading audio files
+			var urls = [];
+			var notes = root.keyToNote;
+			for (var key in notes) urls.push(key);
+			///
+			var waitForEnd = function(instrument) {
+				for (var key in bufferPending) { // has pending items
+					if (bufferPending[key]) return;
+				}
+				///
+				if (onload) { // run onload once
+					onload();
+					onload = null;
+				}
+			};
+			///
+			var requestAudio = function(soundfont, instrumentId, index, key) {
+				var url = soundfont[key];
+				if (url) {
+					bufferPending[instrumentId] ++;
+					loadAudio(url, function(buffer) {
+						buffer.id = key;
+						var noteId = root.keyToNote[key];
+						audioBuffers[instrumentId + '' + noteId] = buffer;
+						///
+						if (-- bufferPending[instrumentId] === 0) {
+							var percent = index / 87;
+// 							console.log(MIDI.GM.byId[instrumentId], 'processing: ', percent);
+							soundfont.isLoaded = true;
+							waitForEnd(instrument);
+						}
+					}, function(err) {
+		// 				console.log(err);
+					});
+				}
+			};
+			///
+			var bufferPending = {};
+			for (var instrument in root.Soundfont) {
+				var soundfont = root.Soundfont[instrument];
+				if (soundfont.isLoaded) {
+					continue;
+				}
+				///
+				var synth = root.GM.byName[instrument];
+				var instrumentId = synth.number;
+				///
+				bufferPending[instrumentId] = 0;
+				///
+				for (var index = 0; index < urls.length; index++) {
+					var key = urls[index];
+					requestAudio(soundfont, instrumentId, index, key);
+				}
+			}
+			///
+			setTimeout(waitForEnd, 1);
+		};
+
+		/* Load audio file: streaming | base64 | arraybuffer
+		---------------------------------------------------------------------- */
+		function loadAudio(url, onload, onerror) {
+			if (useStreamingBuffer) {
+				var audio = new Audio();
+				audio.src = url;
+				audio.controls = false;
+				audio.autoplay = false;
+				audio.preload = false;
+				audio.addEventListener('canplay', function() {
+					onload && onload(audio);
+				});
+				audio.addEventListener('error', function(err) {
+					onerror && onerror(err);
+				});
+				document.body.appendChild(audio);
+			} else if (url.indexOf('data:audio') === 0) { // Base64 string
+				var base64 = url.split(',')[1];
+				var buffer = Base64Binary.decodeArrayBuffer(base64);
+				ctx.decodeAudioData(buffer, onload, onerror);
+			} else { // XMLHTTP buffer
+				var request = new XMLHttpRequest();
+				request.open('GET', url, true);
+				request.responseType = 'arraybuffer';
+				request.onload = function() {
+					ctx.decodeAudioData(request.response, onload, onerror);
+				};
+				request.send();
+			}
+		};
+		
+		function createAudioContext() {
+			return new (window.AudioContext || window.webkitAudioContext)();
+		};
+	})();
+})(MIDI);
+/*
+	----------------------------------------------------------------------
+	Web MIDI API - Native Soundbanks
+	----------------------------------------------------------------------
+	http://webaudio.github.io/web-midi-api/
+	----------------------------------------------------------------------
+*/
+
+(function(root) { 'use strict';
+
+	var plugin = null;
+	var output = null;
+	var channels = [];
+	var midi = root.WebMIDI = {api: 'webmidi'};
+	midi.send = function(data, delay) { // set channel volume
+		output.send(data, delay * 1000);
+	};
+
+	midi.setController = function(channel, type, value, delay) {
+		output.send([channel, type, value], delay * 1000);
+	};
+
+	midi.setVolume = function(channel, volume, delay) { // set channel volume
+		output.send([0xB0 + channel, 0x07, volume], delay * 1000);
+	};
+
+	midi.programChange = function(channel, program, delay) { // change patch (instrument)
+		output.send([0xC0 + channel, program], delay * 1000);
+	};
+
+	midi.pitchBend = function(channel, program, delay) { // pitch bend
+		output.send([0xE0 + channel, program], delay * 1000);
+	};
+
+	midi.noteOn = function(channel, note, velocity, delay) {
+		output.send([0x90 + channel, note, velocity], delay * 1000);
+	};
+
+	midi.noteOff = function(channel, note, delay) {
+		output.send([0x80 + channel, note, 0], delay * 1000);
+	};
+
+	midi.chordOn = function(channel, chord, velocity, delay) {
+		for (var n = 0; n < chord.length; n ++) {
+			var note = chord[n];
+			output.send([0x90 + channel, note, velocity], delay * 1000);
+		}
+	};
+
+	midi.chordOff = function(channel, chord, delay) {
+		for (var n = 0; n < chord.length; n ++) {
+			var note = chord[n];
+			output.send([0x80 + channel, note, 0], delay * 1000);
+		}
+	};
+
+	midi.stopAllNotes = function() {
+		output.cancel();
+		for (var channel = 0; channel < 16; channel ++) {
+			output.send([0xB0 + channel, 0x7B, 0]);
+		}
+	};
+
+	midi.connect = function(opts) {
+		root.setDefaultPlugin(midi);
+		var errFunction = function(err) { // well at least we tried!
+			if (window.AudioContext) { // Chrome
+				opts.api = 'webaudio';
+			} else if (window.Audio) { // Firefox
+				opts.api = 'audiotag';
+			} else { // no support
+				return;
+			}
+			root.loadPlugin(opts);
+		};
+		///
+		navigator.requestMIDIAccess().then(function(access) {
+			plugin = access;
+			var pluginOutputs = plugin.outputs;
+			if (typeof pluginOutputs == 'function') { // Chrome pre-43
+				output = pluginOutputs()[0];
+			} else { // Chrome post-43
+				output = pluginOutputs[0];
+			}
+			if (output === undefined) { // nothing there...
+				errFunction();
+			} else {
+				opts.onsuccess && opts.onsuccess();			
+			}
+		}, errFunction);
+	};
+
+})(MIDI);
+/*
+	----------------------------------------------------------
+	util/Request : 0.1.1 : 2015-03-26
+	----------------------------------------------------------
+	util.request({
+		url: './dir/something.extension',
+		data: 'test!',
+		format: 'text', // text | xml | json | binary
+		responseType: 'text', // arraybuffer | blob | document | json | text
+		headers: {},
+		withCredentials: true, // true | false
+		///
+		onerror: function(evt, percent) {
+			console.log(evt);
+		},
+		onsuccess: function(evt, responseText) {
+			console.log(responseText);
+		},
+		onprogress: function(evt, percent) {
+			percent = Math.round(percent * 100);
+			loader.create('thread', 'loading... ', percent);
+		}
+	});
+*/
+
+if (typeof MIDI === 'undefined') MIDI = {};
+
+(function(root) {
+
+	var util = root.util || (root.util = {});
+
+	util.request = function(opts, onsuccess, onerror, onprogress) { 'use strict';
+		if (typeof opts === 'string') opts = {url: opts};
+		///
+		var data = opts.data;
+		var url = opts.url;
+		var method = opts.method || (opts.data ? 'POST' : 'GET');
+		var format = opts.format;
+		var headers = opts.headers;
+		var responseType = opts.responseType;
+		var withCredentials = opts.withCredentials || false;
+		///
+		var onsuccess = onsuccess || opts.onsuccess;
+		var onerror = onerror || opts.onerror;
+		var onprogress = onprogress || opts.onprogress;
+		///
+		if (typeof NodeFS !== 'undefined' && root.loc.isLocalUrl(url)) {
+			NodeFS.readFile(url, 'utf8', function(err, res) {
+				if (err) {
+					onerror && onerror(err);
+				} else {
+					onsuccess && onsuccess({responseText: res});
+				}
+			});
+			return;
+		}
+		///
+		var xhr = new XMLHttpRequest();
+		xhr.open(method, url, true);
+		///
+		if (headers) {
+			for (var type in headers) {
+				xhr.setRequestHeader(type, headers[type]);
+			}
+		} else if (data) { // set the default headers for POST
+			xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+		}
+		if (format === 'binary') { //- default to responseType="blob" when supported
+			if (xhr.overrideMimeType) {
+				xhr.overrideMimeType('text/plain; charset=x-user-defined');
+			}
+		}
+		if (responseType) {
+			xhr.responseType = responseType;
+		}
+		if (withCredentials) {
+			xhr.withCredentials = 'true';
+		}
+		if (onerror && 'onerror' in xhr) {
+			xhr.onerror = onerror;
+		}
+		if (onprogress && xhr.upload && 'onprogress' in xhr.upload) {
+			if (data) {
+				xhr.upload.onprogress = function(evt) {
+					onprogress.call(xhr, evt, event.loaded / event.total);
+				};
+			} else {
+				xhr.addEventListener('progress', function(evt) {
+					var totalBytes = 0;
+					if (evt.lengthComputable) {
+						totalBytes = evt.total;
+					} else if (xhr.totalBytes) {
+						totalBytes = xhr.totalBytes;
+					} else {
+						var rawBytes = parseInt(xhr.getResponseHeader('Content-Length-Raw'));
+						if (isFinite(rawBytes)) {
+							xhr.totalBytes = totalBytes = rawBytes;
+						} else {
+							return;
+						}
+					}
+					onprogress.call(xhr, evt, evt.loaded / totalBytes);
+				});
+			}
+		}
+		///
+		xhr.onreadystatechange = function(evt) {
+			if (xhr.readyState === 4) { // The request is complete
+				if (xhr.status === 200 || // Response OK
+					xhr.status === 304 || // Not Modified
+					xhr.status === 308 || // Permanent Redirect
+					xhr.status === 0 && root.client.cordova // Cordova quirk
+				) {
+					if (onsuccess) {
+						var res;
+						if (format === 'xml') {
+							res = evt.target.responseXML;
+						} else if (format === 'text') {
+							res = evt.target.responseText;
+						} else if (format === 'json') {
+							try {
+								res = JSON.parse(evt.target.response);
+							} catch(err) {
+								onerror && onerror.call(xhr, evt);
+							}
+						}
+						///
+						onsuccess.call(xhr, evt, res);
+					}
+				} else {
+					onerror && onerror.call(xhr, evt);
+				}
+			}
+		};
+try {
+		xhr.send(data);
+}
+catch (e) {
+onerror && onerror.call(xhr);
+}
+		return xhr;
+	};
+
+	/// NodeJS
+	if (typeof module !== 'undefined' && module.exports) {
+		var NodeFS = require('fs');
+		XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
+		module.exports = root.util.request;
+	}
+
+})(MIDI);
+/*
+	-----------------------------------------------------------
+	dom.loadScript.js : 0.1.4 : 2014/02/12 : http://mudcu.be
+	-----------------------------------------------------------
+	Copyright 2011-2014 Mudcube. All rights reserved.
+	-----------------------------------------------------------
+	/// No verification
+	dom.loadScript.add("../js/jszip/jszip.js");
+	/// Strict loading order and verification.
+	dom.loadScript.add({
+		strictOrder: true,
+		urls: [
+			{
+				url: "../js/jszip/jszip.js",
+				verify: "JSZip",
+				onsuccess: function() {
+					console.log(1)
+				}
+			},
+			{ 
+				url: "../inc/downloadify/js/swfobject.js",
+				verify: "swfobject",
+				onsuccess: function() {
+					console.log(2)
+				}
+			}
+		],
+		onsuccess: function() {
+			console.log(3)
+		}
+	});
+	/// Just verification.
+	dom.loadScript.add({
+		url: "../js/jszip/jszip.js",
+		verify: "JSZip",
+		onsuccess: function() {
+			console.log(1)
+		}
+	});
+*/
+
+if (typeof(dom) === "undefined") var dom = {};
+
+(function() { "use strict";
+
+dom.loadScript = function() {
+	this.loaded = {};
+	this.loading = {};
+	return this;
+};
+
+dom.loadScript.prototype.add = function(config) {
+	var that = this;
+	if (typeof(config) === "string") {
+		config = { url: config };
+	}
+	var urls = config.urls;
+	if (typeof(urls) === "undefined") {
+		urls = [{ 
+			url: config.url, 
+			verify: config.verify
+		}];
+	}
+	/// adding the elements to the head
+	var doc = document.getElementsByTagName("head")[0];
+	/// 
+	var testElement = function(element, test) {
+		if (that.loaded[element.url]) return;
+		if (test && globalExists(test) === false) return;
+		that.loaded[element.url] = true;
+		//
+		if (that.loading[element.url]) that.loading[element.url]();
+		delete that.loading[element.url];
+		//
+		if (element.onsuccess) element.onsuccess();
+		if (typeof(getNext) !== "undefined") getNext();
+	};
+	///
+	var hasError = false;
+	var batchTest = [];
+	var addElement = function(element) {
+		if (typeof(element) === "string") {
+			element = {
+				url: element,
+				verify: config.verify
+			};
+		}
+		if (/([\w\d.\[\]\'\"])$/.test(element.verify)) { // check whether its a variable reference
+			var verify = element.test = element.verify;
+			if (typeof(verify) === "object") {
+				for (var n = 0; n < verify.length; n ++) {
+					batchTest.push(verify[n]);
+				}			
+			} else {
+				batchTest.push(verify);
+			}
+		}
+		if (that.loaded[element.url]) return;
+		var script = document.createElement("script");
+		script.onreadystatechange = function() {
+			if (this.readyState !== "loaded" && this.readyState !== "complete") return;
+			testElement(element);
+		};
+		script.onload = function() {
+			testElement(element);
+		};
+		script.onerror = function() {
+			hasError = true;
+			delete that.loading[element.url];
+			if (typeof(element.test) === "object") {
+				for (var key in element.test) {
+					removeTest(element.test[key]);
+				}			
+			} else {
+				removeTest(element.test);
+			}
+		};
+		script.setAttribute("type", "text/javascript");
+		script.setAttribute("src", element.url);
+		doc.appendChild(script);
+		that.loading[element.url] = function() {};
+	};
+	/// checking to see whether everything loaded properly
+	var removeTest = function(test) {
+		var ret = [];
+		for (var n = 0; n < batchTest.length; n ++) {
+			if (batchTest[n] === test) continue;
+			ret.push(batchTest[n]);
+		}
+		batchTest = ret;
+	};
+	var onLoad = function(element) {
+		if (element) {
+			testElement(element, element.test);
+		} else {
+			for (var n = 0; n < urls.length; n ++) {
+				testElement(urls[n], urls[n].test);
+			}
+		}
+		var istrue = true;
+		for (var n = 0; n < batchTest.length; n ++) {
+			if (globalExists(batchTest[n]) === false) {
+				istrue = false;
+			}
+		}
+		if (!config.strictOrder && istrue) { // finished loading all the requested scripts
+			if (hasError) {
+				if (config.error) {
+					config.error();
+				}
+			} else if (config.onsuccess) {
+				config.onsuccess();
+			}
+		} else { // keep calling back the function
+			setTimeout(function() { //- should get slower over time?
+				onLoad(element);
+			}, 10);
+		}
+	};
+	/// loading methods;  strict ordering or loose ordering
+	if (config.strictOrder) {
+		var ID = -1;
+		var getNext = function() {
+			ID ++;
+			if (!urls[ID]) { // all elements are loaded
+				if (hasError) {
+					if (config.error) {
+						config.error();
+					}
+				} else if (config.onsuccess) {
+					config.onsuccess();
+				}
+			} else { // loading new script
+				var element = urls[ID];
+				var url = element.url;
+				if (that.loading[url]) { // already loading from another call (attach to event)
+					that.loading[url] = function() {
+						if (element.onsuccess) element.onsuccess();
+						getNext();
+					}
+				} else if (!that.loaded[url]) { // create script element
+					addElement(element);
+					onLoad(element);
+				} else { // it's already been successfully loaded
+					getNext();
+				}
+			}
+		};
+		getNext();
+	} else { // loose ordering
+		for (var ID = 0; ID < urls.length; ID ++) {
+			addElement(urls[ID]);
+			onLoad(urls[ID]);
+		}
+	}
+};
+
+dom.loadScript = new dom.loadScript();
+
+var globalExists = function(path, root) {
+	try {
+		path = path.split('"').join('').split("'").join('').split(']').join('').split('[').join('.');
+		var parts = path.split(".");
+		var length = parts.length;
+		var object = root || window;
+		for (var n = 0; n < length; n ++) {
+			var key = parts[n];
+			if (object[key] == null) {
+				return false;
+			} else { //
+				object = object[key];
+			}
+		}
+		return true;
+	} catch(e) {
+		return false;
+	}
+};
+
+})();
+
+/// For NodeJS
+if (typeof (module) !== "undefined" && module.exports) {
+	module.exports = dom.loadScript;
+}
+//https://github.com/davidchambers/Base64.js
+
+;(function () {
+  var object = typeof exports != 'undefined' ? exports : this; // #8: web workers
+  var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
+
+  function InvalidCharacterError(message) {
+    this.message = message;
+  }
+  InvalidCharacterError.prototype = new Error;
+  InvalidCharacterError.prototype.name = 'InvalidCharacterError';
+
+  // encoder
+  // [https://gist.github.com/999166] by [https://github.com/nignag]
+  object.btoa || (
+  object.btoa = function (input) {
+    for (
+      // initialize result and counter
+      var block, charCode, idx = 0, map = chars, output = '';
+      // if the next input index does not exist:
+      //   change the mapping table to "="
+      //   check if d has no fractional digits
+      input.charAt(idx | 0) || (map = '=', idx % 1);
+      // "8 - idx % 1 * 8" generates the sequence 2, 4, 6, 8
+      output += map.charAt(63 & block >> 8 - idx % 1 * 8)
+    ) {
+      charCode = input.charCodeAt(idx += 3/4);
+      if (charCode > 0xFF) {
+        throw new InvalidCharacterError("'btoa' failed: The string to be encoded contains characters outside of the Latin1 range.");
+      }
+      block = block << 8 | charCode;
+    }
+    return output;
+  });
+
+  // decoder
+  // [https://gist.github.com/1020396] by [https://github.com/atk]
+  object.atob || (
+  object.atob = function (input) {
+    input = input.replace(/=+$/, '')
+    if (input.length % 4 == 1) {
+      throw new InvalidCharacterError("'atob' failed: The string to be decoded is not correctly encoded.");
+    }
+    for (
+      // initialize result and counters
+      var bc = 0, bs, buffer, idx = 0, output = '';
+      // get next character
+      buffer = input.charAt(idx++);
+      // character found in table? initialize bit storage and add its ascii value;
+      ~buffer && (bs = bc % 4 ? bs * 64 + buffer : buffer,
+        // and if not first of each 4 characters,
+        // convert the first 8 bits to one ascii character
+        bc++ % 4) ? output += String.fromCharCode(255 & bs >> (-2 * bc & 6)) : 0
+    ) {
+      // try to find character in table (0-63, not found => -1)
+      buffer = chars.indexOf(buffer);
+    }
+    return output;
+  });
+
+}());
+/**
+ * @license -------------------------------------------------------------------
+ *   module: Base64Binary
+ *      src: http://blog.danguer.com/2011/10/24/base64-binary-decoding-in-javascript/
+ *  license: Simplified BSD License
+ * -------------------------------------------------------------------
+ * Copyright 2011, Daniel Guerrero. All rights reserved.
+ * 
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *     - Redistributions of source code must retain the above copyright
+ *       notice, this list of conditions and the following disclaimer.
+ *     - Redistributions in binary form must reproduce the above copyright
+ *       notice, this list of conditions and the following disclaimer in the
+ *       documentation and/or other materials provided with the distribution.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL DANIEL GUERRERO BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*/
+
+var Base64Binary = {
+	_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
+
+	/* will return a  Uint8Array type */
+	decodeArrayBuffer: function(input) {
+		var bytes = Math.ceil( (3*input.length) / 4.0);
+		var ab = new ArrayBuffer(bytes);
+		this.decode(input, ab);
+
+		return ab;
+	},
+
+	decode: function(input, arrayBuffer) {
+		//get last chars to see if are valid
+		var lkey1 = this._keyStr.indexOf(input.charAt(input.length-1));		 
+		var lkey2 = this._keyStr.indexOf(input.charAt(input.length-1));		 
+
+		var bytes = Math.ceil( (3*input.length) / 4.0);
+		if (lkey1 == 64) bytes--; //padding chars, so skip
+		if (lkey2 == 64) bytes--; //padding chars, so skip
+
+		var uarray;
+		var chr1, chr2, chr3;
+		var enc1, enc2, enc3, enc4;
+		var i = 0;
+		var j = 0;
+
+		if (arrayBuffer)
+			uarray = new Uint8Array(arrayBuffer);
+		else
+			uarray = new Uint8Array(bytes);
+
+		input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
+
+		for (i=0; i<bytes; i+=3) {	
+			//get the 3 octects in 4 ascii chars
+			enc1 = this._keyStr.indexOf(input.charAt(j++));
+			enc2 = this._keyStr.indexOf(input.charAt(j++));
+			enc3 = this._keyStr.indexOf(input.charAt(j++));
+			enc4 = this._keyStr.indexOf(input.charAt(j++));
+
+			chr1 = (enc1 << 2) | (enc2 >> 4);
+			chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
+			chr3 = ((enc3 & 3) << 6) | enc4;
+
+			uarray[i] = chr1;			
+			if (enc3 != 64) uarray[i+1] = chr2;
+			if (enc4 != 64) uarray[i+2] = chr3;
+		}
+
+		return uarray;	
+	}
+};
\ No newline at end of file
diff --git a/src/@types/midi.d.ts b/src/@types/midi.d.ts
new file mode 100644
index 0000000..b3322da
--- /dev/null
+++ b/src/@types/midi.d.ts
@@ -0,0 +1,111 @@
+/**
+ * TypeScript declarations for MIDI.js library
+ * Based on the working example from midi-testing
+ */
+
+declare global {
+  interface Window {
+    MIDI: {
+      /**
+       * Load MIDI.js plugin with configuration
+       */
+      loadPlugin(options: {
+        soundfontUrl?: string;
+        instruments?: string[];
+        onsuccess?: () => void;
+        onerror?: (error: any) => void;
+        onprogress?: (state: string, progress: number) => void;
+        targetFormat?: 'mp3' | 'ogg';
+        api?: 'webaudio' | 'audiotag' | 'webmidi';
+      }): void;
+
+      /**
+       * Play a MIDI note
+       */
+      noteOn(channel: number, note: number, velocity: number, delay?: number): void;
+
+      /**
+       * Stop a MIDI note
+       */
+      noteOff(channel: number, note: number, delay?: number): void;
+
+      /**
+       * Change instrument program
+       */
+      programChange?(channel: number, program: number): void;
+
+      /**
+       * Control change
+       */
+      controlChange?(channel: number, controller: number, value: number): void;
+
+      /**
+       * Pitch bend
+       */
+      pitchBend?(channel: number, value: number): void;
+
+      /**
+       * Channel aftertouch
+       */
+      channelAftertouch?(channel: number, pressure: number): void;
+
+      /**
+       * Polyphonic aftertouch
+       */
+      polyAftertouch?(channel: number, note: number, pressure: number): void;
+
+      /**
+       * Load additional soundfont resource
+       */
+      loadResource?(options: {
+        instrument: string;
+        onSuccess?: () => void;
+        onError?: (error: any) => void;
+      }): void;
+
+      /**
+       * General MIDI instrument mappings
+       */
+      GM?: any;
+
+      /**
+       * Soundfont data
+       */
+      Soundfont?: { [key: string]: any };
+
+      /**
+       * Current API being used
+       */
+      api?: string;
+
+      /**
+       * Audio format being used
+       */
+      __audioFormat?: string;
+    };
+  }
+
+  // JZZ namespace extensions for MIDI.js synthesizer
+  namespace JZZ {
+    namespace synth {
+      /**
+       * Create MIDI.js synthesizer instance
+       */
+      function MIDIjs(options?: {
+        soundfontUrl?: string;
+        instruments?: string[];
+        targetFormat?: 'mp3' | 'ogg';
+      }): any;
+
+      namespace MIDIjs {
+        /**
+         * Register MIDI.js synthesizer with JZZ
+         */
+        function register(name?: string, options?: any): any;
+      }
+    }
+  }
+}
+
+// Ensure this file is treated as a module
+export {};
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 7138b14..9b84474 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useBeforeunload } from "react-beforeunload";
 import "./App.css";
 import MudClient from "./client";
-import { virtualMidiService } from "./VirtualMidiService";
 import CommandInput from "./components/input";
 import OutputWindow from "./components/output";
 import PreferencesDialog, {
@@ -125,16 +124,7 @@ function App() {
     window.mudClient = newClient;
     clientInitialized.current = true;
     
-    // Initialize virtual MIDI synthesizer
-    virtualMidiService.initialize().then((success) => {
-      if (success) {
-        console.log("Virtual MIDI synthesizer initialized");
-      } else {
-        console.log("Failed to initialize virtual MIDI synthesizer");
-      }
-    }).catch((error) => {
-      console.error("Error initializing virtual MIDI synthesizer:", error);
-    });
+    // Virtual MIDI synthesizers are now initialized with MidiService
 
     // Listen to 'keydown' event
     const handleKeyDown = (event: KeyboardEvent) => {
diff --git a/src/JZZ.synth.MIDIjs.js b/src/JZZ.synth.MIDIjs.js
new file mode 100644
index 0000000..2f568c3
--- /dev/null
+++ b/src/JZZ.synth.MIDIjs.js
@@ -0,0 +1,201 @@
+(function() {
+  if (!JZZ) return;
+  if (!JZZ.synth) JZZ.synth = {};
+
+  function _name(name) { return name ? name : 'JZZ.synth.MIDIjs'; }
+
+  var _waiting = false;
+  var _running = false;
+  var _bad = false;
+  var _error;
+
+  // Dynamic loading state management
+  var _loadingInstruments = {}; // Track instruments currently being loaded
+  var _pendingProgramChanges = []; // Queue program changes waiting for load completion
+  
+  // Drum routing: Connect to JZZ.synth.Tiny for channel 10 (drums)
+  var _tinyPort = null;
+  
+  function _initTinyPort() {
+    if (!_tinyPort && JZZ.synth && JZZ.synth.Tiny) {
+      try {
+        _tinyPort = JZZ.synth.Tiny();
+        console.log('JZZ.synth.Tiny port initialized for drum routing');
+      } catch (e) {
+        console.warn('Failed to initialize JZZ.synth.Tiny port for drums:', e);
+      }
+    }
+  }
+
+  function _receive(a) {
+    var s = a[0]>>4;
+    var c = a[0]&0xf;
+    
+    // Initialize Tiny port if needed
+    if (!_tinyPort) {
+      _initTinyPort();
+    }
+    
+    // Route channel 10 (index 9) to JZZ.synth.Tiny for drums
+    if (c === 9 && _tinyPort) {
+      console.log('Routing channel 10 (drums) to JZZ.synth.Tiny:', a);
+      _tinyPort.send(a);
+      return;
+    }
+    
+    if (s == 0xC) { // Program Change (0xC0-0xCF)
+      var program = a[1];
+      var instrumentName = MIDI.GM && MIDI.GM.byId && MIDI.GM.byId[program] ? MIDI.GM.byId[program].id : null;
+      
+      if (instrumentName && MIDI.Soundfont && !MIDI.Soundfont[instrumentName]) {
+        // Instrument not loaded
+        console.log('Program change to unloaded instrument:', instrumentName, 'program:', program);
+        
+        // Check if already loading this instrument
+        if (_loadingInstruments[instrumentName]) {
+          // Queue this program change for after loading completes
+          _pendingProgramChanges.push({channel: c, program: program, instrument: instrumentName});
+          console.log('Queuing program change while loading:', instrumentName);
+          return; // Don't process original program change
+        }
+        
+        // Start loading process
+        _loadingInstruments[instrumentName] = true;
+        _pendingProgramChanges.push({channel: c, program: program, instrument: instrumentName});
+        
+        // Immediate fallback to acoustic_grand_piano (program 0)
+        console.log('Falling back to piano while loading:', instrumentName);
+        if (MIDI.programChange) {
+          MIDI.programChange(c, 0);
+        }
+        
+        // Load the requested instrument
+        if (MIDI.loadResource) {
+          MIDI.loadResource({
+            instruments: [instrumentName],
+            onsuccess: function() {
+              console.log('Successfully loaded instrument:', instrumentName);
+              
+              // Send deferred program changes for this instrument
+              var pending = _pendingProgramChanges.filter(function(p) { return p.instrument === instrumentName; });
+              pending.forEach(function(p) {
+                console.log('Sending deferred program change:', p.instrument, 'program:', p.program);
+                if (MIDI.programChange) {
+                  MIDI.programChange(p.channel, p.program);
+                }
+              });
+              
+              // Clean up
+              delete _loadingInstruments[instrumentName];
+              _pendingProgramChanges = _pendingProgramChanges.filter(function(p) { return p.instrument !== instrumentName; });
+            },
+            onerror: function(err) {
+              console.warn('Failed to load instrument:', instrumentName, 'error:', err, '- staying on piano');
+              delete _loadingInstruments[instrumentName];
+              _pendingProgramChanges = _pendingProgramChanges.filter(function(p) { return p.instrument !== instrumentName; });
+            }
+          });
+        }
+        
+        return; // Don't process original program change
+      }
+      
+      // Instrument already loaded or no MIDI.js available yet - pass through
+      if (MIDI.programChange) {
+        MIDI.programChange(c, program);
+      }
+      return;
+    }
+    
+    // Standard MIDI message processing
+    if (s == 0x8) {
+      if (MIDI.noteOff) {
+        MIDI.noteOff(c, a[1]);
+      }
+    }
+    else if (s == 0x9) {
+      if (MIDI.noteOn) {
+        MIDI.noteOn(c, a[1], a[2]);
+      }
+    }
+  }
+
+  var _ports = [];
+  function _release(port, name) {
+    port._info = _engine._info(name);
+    port._receive = _receive;
+    port._resume();
+  }
+
+  function _onsuccess() {
+    _running = true;
+    _waiting = false;
+    
+    // Initialize Tiny port for drum routing
+    _initTinyPort();
+    
+    for (var i=0; i<_ports.length; i++) _release(_ports[i][0], _ports[i][1]);
+  }
+
+  function _onerror(evt) {
+    _bad = true;
+    _error = evt;
+    for (var i=0; i<_ports.length; i++) _ports[i][0]._crash(_error);
+  }
+
+  var _engine = {};
+
+  _engine._info = function(name) {
+    return {
+      type: 'MIDI.js',
+      name: _name(name),
+      manufacturer: 'virtual',
+      version: '0.3.2'
+    };
+  }
+
+  _engine._openOut = function(port, name) {
+    if (_running) {
+      _release(port, name);
+      return;
+    }
+    if (_bad) {
+      port._crash(_error);
+      return;
+    }
+    port._pause();
+    _ports.push([port, name]);
+    if (_waiting) return;
+    _waiting = true;
+    var arg = _engine._arg;
+    if (!arg) arg = {};
+    arg.onsuccess = _onsuccess;
+    arg.onerror = _onerror;
+    try {
+      MIDI.loadPlugin(arg);
+    }
+    catch(e) {
+      _error = e.message;
+      _onerror(_error);
+    }
+  }
+
+  JZZ.synth.MIDIjs = function() {
+    var name, arg;
+    if (arguments.length == 1) arg = arguments[0];
+    else { name = arguments[0]; arg = arguments[1];}
+    name = _name(name);
+    if (!_running && !_waiting) _engine._arg = arg;
+    return JZZ.lib.openMidiOut(name, _engine);
+  }
+
+  JZZ.synth.MIDIjs.register = function() {
+    var name, arg;
+    if (arguments.length == 1) arg = arguments[0];
+    else { name = arguments[0]; arg = arguments[1];}
+    name = _name(name);
+    if (!_running && !_waiting) _engine._arg = arg;
+    return JZZ.lib.registerMidiOut(name, _engine);
+  }
+
+})();
\ No newline at end of file
diff --git a/src/MidiService.ts b/src/MidiService.ts
index d2d0633..f2fca88 100644
--- a/src/MidiService.ts
+++ b/src/MidiService.ts
@@ -1,6 +1,23 @@
-import { virtualMidiService } from './VirtualMidiService';
 import JZZ from 'jzz';
-import { preferencesStore } from './PreferencesStore';
+// @ts-ignore
+import { Tiny } from 'jzz-synth-tiny';
+import { preferencesStore, PrefActionType } from './PreferencesStore';
+import { midiJsScriptLoader } from './utils/MidiJsScriptLoader';
+
+declare global {
+  namespace JZZ {
+    interface JZZ {
+      synth: {
+        Tiny: {
+          register(name: string): void;
+        };
+        MIDIjs?: {
+          register(name: string): void;
+        };
+      };
+    }
+  }
+}
 
 export interface MidiDevice {
   id: string;
@@ -55,7 +72,6 @@ class MidiService {
   private outputDevice: any = null;
   private inputCallback: MidiInputCallback | null = null;
   private deviceChangeCallbacks: Set<DeviceChangeCallback> = new Set();
-  private deviceWatcher: any = null;
   private connectionState: {
     inputConnected: boolean;
     outputConnected: boolean;
@@ -74,13 +90,24 @@ class MidiService {
     output: false
   };
 
+
   async initialize(): Promise<boolean> {
     try {
+      console.log("Starting MIDI service initialization...");
       this.jzz = await JZZ();
       console.log("JZZ MIDI engine initialized");
       
+      // Make JZZ available globally for MIDI.js integration
+      if (typeof window !== 'undefined') {
+        (window as any).JZZ = JZZ;
+        console.log('JZZ made available globally as window.JZZ');
+      }
+      
+      // Initialize virtual synthesizers
+      await this.initializeVirtualSynths();
+      
       // Set up device change monitoring
-      this.deviceWatcher = this.jzz.onChange((info: any) => {
+      this.jzz.onChange((info: any) => {
         const changeInfo = this.processDeviceChanges(info);
         this.deviceChangeCallbacks.forEach(callback => callback(changeInfo));
         
@@ -91,6 +118,7 @@ class MidiService {
       // Try to auto-reconnect to last used devices
       await this.attemptAutoReconnect();
       
+      console.log("MIDI service initialization completed successfully");
       return true;
     } catch (error) {
       console.error("Failed to initialize JZZ MIDI engine:", error);
@@ -98,6 +126,68 @@ class MidiService {
     }
   }
 
+  private async initializeVirtualSynths(): Promise<void> {
+    try {
+      console.log('Initializing virtual synthesizers...');
+      
+      // Initialize JZZ with Tiny synthesizer
+      Tiny(JZZ);
+      (JZZ as any).synth.Tiny.register('JZZ Tiny Synthesizer');
+      console.log('JZZ Tiny Synthesizer registered');
+      
+      // Load MIDI.js scripts and initialize MIDI.js synthesizer
+      try {
+        await midiJsScriptLoader.loadScripts();
+      } catch (scriptError) {
+        console.error('❌ MIDI.js script loading failed:', scriptError);
+        throw new Error(`MIDI.js script loading failed: ${(scriptError as Error).message || scriptError}`);
+      }
+      
+      // Register single MIDI.js synthesizer with configurable soundfont
+      await this.initializeMIDIjsSynthesizer();
+      
+      // Wait a bit for registration to complete then refresh
+      setTimeout(() => {
+        this.jzz.refresh();
+        console.log('JZZ refreshed, devices should now be available');
+      }, 100);
+      
+      console.log('Virtual synthesizers initialization complete');
+    } catch (error) {
+      console.error('Failed to initialize virtual synthesizers:', error);
+      throw error;
+    }
+  }
+
+  private async initializeMIDIjsSynthesizer(): Promise<void> {
+    try {
+      const preferences = preferencesStore.getState().midi;
+      const selectedSoundfont = preferences.midiJsSoundfont || 'MusyngKite';
+      
+      // Available soundfonts mapping
+      const soundfontUrls: { [key: string]: string } = {
+        'FatBoy': 'https://mongoose.world/sounds/soundfont/FatBoy/',
+        'FluidR3': 'https://mongoose.world/sounds/soundfont/FluidR3_GM/',
+        'MusyngKite': 'https://mongoose.world/sounds/soundfont/MusyngKite/'
+      };
+      
+      const soundfontUrl = soundfontUrls[selectedSoundfont] || soundfontUrls['MusyngKite'];
+      
+      // Register single MIDI.js synthesizer with selected soundfont
+      (window.JZZ.synth.MIDIjs as any).register('MIDI.js Synthesizer', {
+        soundfontUrl: soundfontUrl,
+        instruments: ['acoustic_grand_piano'], // Always load piano as fallback for dynamic loading
+        targetFormat: 'mp3' // Use MP3 format
+      });
+      
+      console.log(`MIDI.js Synthesizer registered with ${selectedSoundfont} soundfont: ${soundfontUrl}`);
+    } catch (error) {
+      console.error('Failed to initialize MIDI.js synthesizer:', error);
+      throw error;
+    }
+  }
+
+
   getInputDevices(): MidiDevice[] {
     if (!this.jzz) return [];
     
@@ -117,27 +207,18 @@ class MidiService {
   }
 
   getOutputDevices(): MidiDevice[] {
-    const devices: MidiDevice[] = [];
+    if (!this.jzz) return [];
     
-    // Add virtual synthesizer if initialized
-    if (virtualMidiService.initialized) {
-      devices.push({
-        id: 'virtual-synth',
-        name: virtualMidiService.getPortName()
-      });
-    }
+    const devices: MidiDevice[] = [];
+    const info = this.jzz.info();
     
-    // Add hardware MIDI devices if available
-    if (this.jzz) {
-      const info = this.jzz.info();
-      if (info && info.outputs) {
-        info.outputs.forEach((output: any) => {
-          devices.push({
-            id: output.id || output.name,
-            name: output.name || "Unknown Output Device"
-          });
+    if (info?.outputs) {
+      info.outputs.forEach((output: any) => {
+        devices.push({
+          id: output.id || output.name,
+          name: output.name || "Unknown Output Device"
         });
-      }
+      });
     }
     
     return devices;
@@ -171,7 +252,7 @@ class MidiService {
         
         // Create raw message for debugging
         const rawMessage: RawMidiMessage = {
-          hex: Array.from(rawData).map((b: number) => b.toString(16).padStart(2, '0').toUpperCase()).join(' '),
+          hex: Array.from(rawData as ArrayLike<number>).map((b: number) => b.toString(16).padStart(2, '0').toUpperCase()).join(' '),
           data: new Uint8Array(rawData),
           type: this.getMidiMessageType(status)
         };
@@ -221,7 +302,7 @@ class MidiService {
       
       // Save to preferences for auto-reconnect
       preferencesStore.dispatch({
-        type: 'SET_MIDI',
+        type: PrefActionType.SetMidi,
         data: { 
           ...preferencesStore.getState().midi,
           lastInputDeviceId: deviceId
@@ -240,42 +321,15 @@ class MidiService {
   }
 
   async connectOutputDevice(deviceId: string): Promise<boolean> {
+    if (!this.jzz) return false;
+
     try {
       // Disconnect previous device
       if (this.outputDevice) {
         this.outputDevice.close?.();
       }
 
-      // Handle virtual synthesizer connection
-      if (deviceId === 'virtual-synth') {
-        const virtualPort = await virtualMidiService.getVirtualPort();
-        if (virtualPort) {
-          this.outputDevice = virtualPort;
-          this.connectionState.outputConnected = true;
-          this.connectionState.outputDeviceId = deviceId;
-          this.connectionState.outputDeviceName = virtualMidiService.getPortName();
-          
-          // Save to preferences for auto-reconnect
-          preferencesStore.dispatch({
-            type: 'SET_MIDI',
-            data: { 
-              ...preferencesStore.getState().midi,
-              lastOutputDeviceId: deviceId
-            }
-          });
-
-          // Clear intentional disconnect flag since user manually connected
-          this.intentionalDisconnectFlags.output = false;
-          
-          console.log(`Connected to virtual MIDI synthesizer: ${virtualMidiService.getPortName()}`);
-          return true;
-        }
-        return false;
-      }
-
-      // Handle hardware MIDI device connection using JZZ
-      if (!this.jzz) return false;
-
+      // Connect using JZZ's unified interface (handles both hardware and virtual devices)
       this.outputDevice = await this.jzz.openMidiOut(deviceId);
       
       // Update connection state
@@ -289,7 +343,7 @@ class MidiService {
       
       // Save to preferences for auto-reconnect
       preferencesStore.dispatch({
-        type: 'SET_MIDI',
+        type: PrefActionType.SetMidi,
         data: { 
           ...preferencesStore.getState().midi,
           lastOutputDeviceId: deviceId
@@ -580,14 +634,30 @@ class MidiService {
     console.log("Reset intentional disconnect flags");
   }
 
+  // Reload synthesizers when preferences change
+  async reloadSynthesizers(): Promise<void> {
+    try {
+      console.log('Reloading synthesizers with updated preferences...');
+      
+      // Re-initialize MIDI.js synthesizer with new soundfont
+      await this.initializeMIDIjsSynthesizer();
+      
+      
+      // Refresh JZZ to update device list
+      setTimeout(() => {
+        this.jzz.refresh();
+        console.log('Synthesizers reloaded successfully');
+      }, 100);
+      
+    } catch (error) {
+      console.error('Failed to reload synthesizers:', error);
+    }
+  }
+
 
   // Shutdown and cleanup
   shutdown(): void {
     this.disconnect();
-    if (this.deviceWatcher) {
-      this.deviceWatcher.disconnect();
-      this.deviceWatcher = null;
-    }
     if (this.jzz) {
       this.jzz.close();
       this.jzz = null;
diff --git a/src/PreferencesStore.tsx b/src/PreferencesStore.tsx
index ffd86ac..7dcd8dd 100644
--- a/src/PreferencesStore.tsx
+++ b/src/PreferencesStore.tsx
@@ -35,6 +35,7 @@ export type MidiPreferences = {
   enabled: boolean;
   lastInputDeviceId?: string;
   lastOutputDeviceId?: string;
+  midiJsSoundfont: string;
 };
 
 export type PrefState = {
@@ -114,6 +115,7 @@ class PreferencesStore {
       },
       midi: {
         enabled: false,
+        midiJsSoundfont: 'MusyngKite', // Default to MusyngKite
       },
     };
   }
diff --git a/src/VirtualMidiService.ts b/src/VirtualMidiService.ts
deleted file mode 100644
index 26e85bc..0000000
--- a/src/VirtualMidiService.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import JZZ from 'jzz';
-import { Tiny } from 'jzz-synth-tiny';
-
-export class VirtualMidiService {
-  private static instance: VirtualMidiService;
-  private isInitialized = false;
-  private virtualPort: any = null;
-  private readonly portName = 'Virtual Synthesizer';
-
-  private constructor() {}
-
-  static getInstance(): VirtualMidiService {
-    if (!VirtualMidiService.instance) {
-      VirtualMidiService.instance = new VirtualMidiService();
-    }
-    return VirtualMidiService.instance;
-  }
-
-  async initialize(): Promise<boolean> {
-    if (this.isInitialized) {
-      return true;
-    }
-
-    try {
-      // Wait for JZZ to be ready first
-      const jzz = await JZZ();
-      
-      // Initialize JZZ with Tiny synthesizer
-      Tiny(JZZ);
-      
-      // Register the virtual synthesizer as a MIDI port
-      JZZ.synth.Tiny.register(this.portName);
-      
-      // Refresh JZZ to update the device list
-      jzz.refresh();
-      
-      console.log(`Virtual MIDI synthesizer registered as: ${this.portName}`);
-      this.isInitialized = true;
-      return true;
-    } catch (error) {
-      console.error('Failed to initialize virtual MIDI synthesizer:', error);
-      return false;
-    }
-  }
-
-  async getVirtualPort(): Promise<any> {
-    if (!this.isInitialized) {
-      const success = await this.initialize();
-      if (!success) return null;
-    }
-
-    try {
-      // Get the virtual port through JZZ
-      this.virtualPort = await JZZ().openMidiOut(this.portName);
-      return this.virtualPort;
-    } catch (error) {
-      console.error('Failed to open virtual MIDI port:', error);
-      return null;
-    }
-  }
-
-  getPortName(): string {
-    return this.portName;
-  }
-
-  get initialized(): boolean {
-    return this.isInitialized;
-  }
-
-  close(): void {
-    if (this.virtualPort) {
-      this.virtualPort.close();
-      this.virtualPort = null;
-    }
-  }
-}
-
-export const virtualMidiService = VirtualMidiService.getInstance();
\ No newline at end of file
diff --git a/src/components/MidiStatus.tsx b/src/components/MidiStatus.tsx
index dcafc32..4465f7f 100644
--- a/src/components/MidiStatus.tsx
+++ b/src/components/MidiStatus.tsx
@@ -4,7 +4,6 @@ import { midiService, MidiDevice } from "../MidiService";
 import { usePreferences } from "../hooks/usePreferences";
 import { GMCPClientMidi } from "../gmcp/Client/Midi";
 import { preferencesStore } from "../PreferencesStore";
-import { virtualMidiService } from "../VirtualMidiService";
 
 interface MidiStatusProps {
   client: MudClient;
@@ -56,9 +55,13 @@ const MidiStatus: React.FC<MidiStatusProps> = ({ client }) => {
   const loadDevices = async () => {
     if (!preferences.midi.enabled) return;
     
-    // Ensure virtual synthesizer is initialized
-    if (!virtualMidiService.initialized) {
-      await virtualMidiService.initialize();
+    // Ensure MIDI service is initialized before accessing devices
+    if (!midiService.isInitialized) {
+      const success = await midiService.initialize();
+      if (!success) {
+        console.error('Failed to initialize MIDI service');
+        return;
+      }
     }
     
     const inputs = midiService.getInputDevices();
@@ -152,15 +155,13 @@ const MidiStatus: React.FC<MidiStatusProps> = ({ client }) => {
         loadDevices();
       }
       
-      // Set up connection state monitoring (poll every 2 seconds to catch auto-reconnections and virtual synth)
+      // Set up periodic connection state monitoring (lightweight check every 5 seconds)
       const connectionStateInterval = setInterval(() => {
-        loadDevices(); // Always refresh devices to catch virtual synth initialization
-        
         const currentState = midiService.connectionStatus;
         if (JSON.stringify(currentState) !== JSON.stringify(connectionState)) {
           setConnectionState(currentState);
         }
-      }, 2000);
+      }, 5000); // Only check connection state, device changes handled by onChange callback
       
       // Set up device change monitoring
       const unsubscribe = midiService.onDeviceChange((info) => {
@@ -264,18 +265,21 @@ const MidiStatus: React.FC<MidiStatusProps> = ({ client }) => {
   };
 
   const handleRefreshDevices = async () => {
+    // Ensure MIDI service is initialized before refreshing
+    if (!midiService.isInitialized) {
+      const success = await midiService.initialize();
+      if (!success) {
+        console.error('Failed to initialize MIDI service');
+        return;
+      }
+    }
+    
     // Refresh JZZ device list
     midiService.refresh();
     
-    // Make sure virtual synthesizer is initialized
-    if (!virtualMidiService.initialized) {
-      await virtualMidiService.initialize();
-    }
-    
     // Load devices and update connection state
-    loadDevices();
+    await loadDevices();
     setConnectionState(midiService.connectionStatus);
-    
   };
 
   // Handle reconnection attempts
diff --git a/src/components/preferences.tsx b/src/components/preferences.tsx
index d3d3221..fa599b6 100644
--- a/src/components/preferences.tsx
+++ b/src/components/preferences.tsx
@@ -329,10 +329,23 @@ const MidiTab: React.FC = () => {
   const handleMidiEnabledChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     dispatch({
       type: PrefActionType.SetMidi,
-      data: { enabled: e.target.checked },
+      data: { ...state.midi, enabled: e.target.checked },
     });
   };
 
+  const handleMidiJsSoundfontChange = async (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newSoundfont = e.target.value;
+    dispatch({
+      type: PrefActionType.SetMidi,
+      data: { ...state.midi, midiJsSoundfont: newSoundfont },
+    });
+    // Reload synthesizers with new soundfont
+    if (midiService.isInitialized) {
+      await midiService.reloadSynthesizers();
+    }
+  };
+
+
   if (!midiService.isSupported) {
     return (
       <div>
@@ -356,9 +369,29 @@ const MidiTab: React.FC = () => {
       <br />
       
       {state.midi.enabled && (
-        <p style={{ color: "#666", fontSize: "0.9em" }}>
-          Device selection and management is available in the MIDI tab when connected to a server.
-        </p>
+        <div>
+          <div style={{ marginBottom: '15px' }}>
+            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+              MIDI.js Soundfont:
+            </label>
+            <select 
+              value={state.midi.midiJsSoundfont || 'MusyngKite'}
+              onChange={handleMidiJsSoundfontChange}
+              style={{ padding: '5px', minWidth: '200px' }}
+            >
+              <option value="FatBoy">FatBoy</option>
+              <option value="FluidR3">FluidR3 GM</option>
+              <option value="MusyngKite">MusyngKite (Default)</option>
+            </select>
+            <p style={{ color: '#666', fontSize: '0.8em', margin: '5px 0' }}>
+              Soundfont used by the MIDI.js Synthesizer port.
+            </p>
+          </div>
+          
+          <p style={{ color: "#666", fontSize: "0.9em" }}>
+            Device selection and management is available in the MIDI tab when connected to a server.
+          </p>
+        </div>
       )}
     </div>
   );
diff --git a/src/utils/MidiJsScriptLoader.ts b/src/utils/MidiJsScriptLoader.ts
new file mode 100644
index 0000000..d41e82e
--- /dev/null
+++ b/src/utils/MidiJsScriptLoader.ts
@@ -0,0 +1,188 @@
+/**
+ * MidiJsScriptLoader - Dynamically loads MIDI.js scripts for use with JZZ
+ * 
+ * Loads scripts in the correct order: JZZ → MIDI.js → JZZ.synth.MIDIjs
+ * Based on working pattern from midi-testing example
+ */
+
+export interface ScriptLoadError {
+  script: string;
+  error: string;
+  timestamp: number;
+}
+
+export class MidiJsScriptLoader {
+  private static instance: MidiJsScriptLoader;
+  private scriptsLoaded = false;
+  private loadPromise: Promise<void> | null = null;
+
+  // Scripts must be loaded in this exact order
+  private readonly scriptUrls = [
+    // Note: JZZ is already loaded via import in MidiService
+    // Files are served from public/ folder in Vite
+    '/MIDI.js',
+    '/JZZ.synth.MIDIjs.js'
+  ];
+
+  private constructor() {}
+
+  static getInstance(): MidiJsScriptLoader {
+    if (!MidiJsScriptLoader.instance) {
+      MidiJsScriptLoader.instance = new MidiJsScriptLoader();
+    }
+    return MidiJsScriptLoader.instance;
+  }
+
+  /**
+   * Load all required MIDI.js scripts
+   * Fails fast with detailed error information
+   */
+  async loadScripts(): Promise<void> {
+    console.log('🚀 loadScripts() called');
+    
+    if (this.scriptsLoaded) {
+      console.log('✅ MIDI.js scripts already loaded');
+      return;
+    }
+
+    if (this.loadPromise) {
+      console.log('⏳ MIDI.js scripts already loading, waiting...');
+      return this.loadPromise;
+    }
+
+    console.log('📋 Starting MIDI.js script loading sequence...');
+    console.log('📋 Scripts to load:', this.scriptUrls);
+    const startTime = performance.now();
+
+    this.loadPromise = this.performScriptLoading();
+    
+    try {
+      await this.loadPromise;
+      const endTime = performance.now();
+      console.log(`MIDI.js scripts loaded successfully in ${endTime - startTime}ms`);
+      this.scriptsLoaded = true;
+    } catch (error) {
+      this.loadPromise = null; // Allow retry on failure
+      console.error('❌ Script loading promise rejected:', error);
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      throw new Error(`Script loading failed: ${errorMessage}`);
+    }
+  }
+
+  private async performScriptLoading(): Promise<void> {
+    // Check if JZZ is available
+    if (typeof window.JZZ === 'undefined') {
+      const error = 'JZZ not found - must be loaded before MIDI.js scripts';
+      console.error('❌', error);
+      throw new Error(error);
+    }
+
+    console.log('✅ JZZ is available, proceeding with script loading...');
+
+    // Load each script in sequence
+    for (let i = 0; i < this.scriptUrls.length; i++) {
+      const url = this.scriptUrls[i];
+      console.log(`📥 Loading script ${i + 1}/${this.scriptUrls.length}: ${url}`);
+      
+      try {
+        await this.loadScript(url);
+      } catch (scriptError) {
+        console.error(`❌ Failed to load script ${i + 1}: ${url}`, scriptError);
+        throw scriptError; // Re-throw to stop the sequence
+      }
+      
+      // Verify script loaded correctly
+      if (i === 0) {
+        // After MIDI.js loads
+        if (typeof window.MIDI === 'undefined') {
+          throw new Error(`MIDI.js failed to create window.MIDI object after loading ${url}`);
+        }
+        console.log('✓ MIDI.js loaded - window.MIDI available');
+      } else if (i === 1) {
+        // After JZZ.synth.MIDIjs loads
+        if (!window.JZZ.synth || typeof window.JZZ.synth.MIDIjs !== 'function') {
+          throw new Error(`JZZ.synth.MIDIjs failed to register after loading ${url}`);
+        }
+        console.log('✓ JZZ.synth.MIDIjs loaded - JZZ.synth.MIDIjs() available');
+      }
+    }
+
+    console.log('All MIDI.js scripts loaded and verified successfully');
+  }
+
+  private loadScript(url: string): Promise<void> {
+    return new Promise((resolve, reject) => {
+      // Check if script is already loaded
+      const existingScript = document.querySelector(`script[src="${url}"]`);
+      if (existingScript) {
+        console.log(`Script already exists in DOM: ${url}`);
+        resolve();
+        return;
+      }
+
+      const script = document.createElement('script');
+      script.src = url;
+      script.type = 'text/javascript';
+      
+      const timeout = setTimeout(() => {
+        cleanup();
+        reject(new Error(`Timeout loading script: ${url} (30s timeout exceeded)`));
+      }, 30000);
+
+      const cleanup = () => {
+        clearTimeout(timeout);
+        script.removeEventListener('load', onLoad);
+        script.removeEventListener('error', onError);
+      };
+
+      const onLoad = () => {
+        cleanup();
+        console.log(`✓ Script loaded: ${url}`);
+        resolve();
+      };
+
+      const onError = (event: any) => {
+        cleanup();
+        if (script.parentNode) {
+          script.parentNode.removeChild(script); // Clean up failed script safely
+        }
+        
+        const error: ScriptLoadError = {
+          script: url,
+          error: event.message || event.error || `HTTP error or file not found: ${url}`,
+          timestamp: Date.now()
+        };
+        
+        console.error('❌ Script loading failed:', error);
+        console.error('Event details:', event);
+        reject(new Error(`Failed to load script ${url}: ${error.error}. Check if file exists and is accessible.`));
+      };
+
+      script.addEventListener('load', onLoad);
+      script.addEventListener('error', onError);
+      
+      document.head.appendChild(script);
+    });
+  }
+
+  /**
+   * Check if all required scripts are loaded and functional
+   */
+  isLoaded(): boolean {
+    return this.scriptsLoaded && 
+           typeof window.MIDI !== 'undefined' && 
+           typeof window.JZZ !== 'undefined' && 
+           window.JZZ.synth && 
+           typeof window.JZZ.synth.MIDIjs === 'function';
+  }
+
+  /**
+   * Reset loader state (for testing purposes)
+   */
+  reset(): void {
+    this.scriptsLoaded = false;
+    this.loadPromise = null;
+  }
+}
+
+export const midiJsScriptLoader = MidiJsScriptLoader.getInstance();
\ No newline at end of file