MIDI.js - Sequencing in Javascript.

0:00 -0:00
Loading API...

What’s all this hubub?

MIDI.js (on github) ties together, and builds upon frameworks that bring MIDI generation to the browser. Combine it with jasmid to create a web-radio MIDI stream similar to this demo... or with Three.js, Sparks.js, or GLSL to create Audio/visual experiments. Piano/guitar simulations, Drum machines, MIDI recording, and all kinds of certified funkitude is within your grasps!

Google Chrome is recommended for best listening experience, it’s timing perfection! Firefox and Safari can both perform a bit more like the piano has been drinking, arrr.

Carpe beerum, and commandeer yer own copy!

Description of package;

  • MIDI.loadPlugin.js:  Decides which framework is best to use, and sends request.
  • // interface to download soundfont, then execute callback;
    MIDI.loadPlugin(callback, soundfont);
    // simple example to get started;
    MIDI.loadPlugin(function() {
    	MIDI.noteOn(0, 100, 127, 0); // plays note once loaded
    }, "soundfont/soundfont-ogg-guitar.js");
    
  • MIDI.Soundfont.js:  Customizable base64 Soundfont.
  • Encode your own soundfonts, Drums, Guitars, and so on.
  • You are listening to Fluid (R3) General MIDI SoundFont (GM).
  • 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.
  • Example(s):  Tweet me your app to be included!

  • Euphony
    3D visualization of a piano playing classical songs, with notes dropping from the sky.
    Coded by Qiao.

  • Color Piano
    Learn piano songs without reading sheet music.
    Coded by mud.

  • Simon Says
    This app will play a simple melody, and you try to play it back.
    Coded by uxmonk.

  • Brite Lite
    Digital Lite-Brite with sound!
    Coded by uxmonk.

  • Whitney Music Box
    Beautiful HTML5 simulation of a Whitney Music Box.
    Coded by KrazyDad.