• MIDI.loadPlugin.js:  Decides which framework is best to use, and sends request.
  • // interface to download soundfont, then execute callback;
    MIDI.loadPlugin(callback);
    // simple example to get started;
    MIDI.loadPlugin({
    	instrument: "acoustic_grand_piano", // or 1 (default)
    	instruments: [ "acoustic_grand_piano", "acoustic_guitar_nylon" ], // or multiple instruments
    	callback: function() { }
    });
    
  • MIDI.Soundfont.js:  Customizable base64 Soundfont.
  • Encode your own soundfonts, Drums, Guitars, and so on.
  • Share them with the community!
  • MIDI.Plugin.js:  Ties together the following frameworks;
  • MIDI.noteOn(channel, note, velocity, delay);
    MIDI.noteOff(channel, note, delay);
    MIDI.chordOn(channel, chord, velocity, delay);
    MIDI.chordOff(channel, chord, delay);
    MIDI.keyToNote = object; // A0 => 21
    MIDI.noteToKey = object; // 21 => A0
    
  • MIDI.Player.js:  Streams the MIDI to the browser.
  • MIDI.Player.currentTime = integer; // time we are at now within the song.
    MIDI.Player.endTime = integer; // time when song ends.
    MIDI.Player.playing = boolean; // are we playing? yes or no.
    MIDI.Player.loadFile(file, callback); // load .MIDI from base64 or binary XML request.
    MIDI.Player.start(); // start the MIDI track (you can put this in the loadFile callback)
    MIDI.Player.resume(); // resume the MIDI track from pause.
    MIDI.Player.pause(); // pause the MIDI track.
    MIDI.Player.stop(); // stops all audio being played, and resets currentTime to 0.
    Callback whenever a note is played;
    MIDI.Player.removeListener(); // removes current listener.
    MIDI.Player.addListener(function(data) { // set it to your own function!
    	var now = data.now; // where we are now
    	var end = data.end; // time when song ends
    	var channel = data.channel; // channel note is playing on
    	var message = data.message; // 128 is noteOff, 144 is noteOn
    	var note = data.note; // the note
    	var velocity = data.velocity; // the velocity of the note
    	// then do whatever you want with the information!
    });
    Smooth animation, interpolates between onMidiEvent calls;
    MIDI.Player.clearAnimation(); // clears current animation.
    MIDI.Player.setAnimation(function(data) {
    	var now = data.now; // where we are now
    	var end = data.end; // time when song ends
    	var events = data.events; // all the notes currently being processed
    	// then do what you want with the information!
    });
  • Color.js:  Color conversions, music isn’t complete without!
  • Color.Space(0xff0000, "HEX>RGB>HSL");
  • DOMLoader.script.js:  Loads scripts in synchronously, or asynchronously.
  • DOMLoader.script.add(src, callback);
  • DOMLoader.XMLHttp.js:  Cross-browser XMLHttpd request.
  • DOMLoader.sendRequest(src, callback);
  • MusicTheory.Synesthesia.js:  Note-to-color mappings (from Isaac Newton onwards).
  • Many thanks to the authors of these libraries;

  • <audio>:  HTML5 specs
  • WebAudioAPI:  W3C proposal by Google
  • Java package:  MIDIBridge by Daniel van der Meer
  • Use this to hook up a MIDI keyboard to your browser!
  • Access to 128 General MIDI instruments.
  • Flash package:  SoundManager2 by Scott Schiller
  • jasmid:  Reads MIDI file byte-code, and translats into a Javascript array.
  • base642binary.js:  Cleans up XML base64-requests for Web Audio API.