CODE EXAMPLES (from the repo)
- ./demo-Basic.html - the most basic implementation.
- ./demo-MIDIPlayer.html - how to parse MIDI files, and interact with the data stream.
- ./demo-MultipleInstruments.html - synth drum and piano playing together
- ./demo-WhitneyMusicBox.html - a audio/visual experiment by Jim Bumgardner
SOUND FONTS
DEMOS
- Color Piano by Michael Deal @mudcube
- 3D Piano Player w/ Three.js by Borja Morales @reality3d
- Simon Says by Daniel Christopher @uxmonk
- Brite Lite by Daniel Christopher @uxmonk
- Euphony 3D Piano by Xueqiao Xu @qiao
- VexFlow by Mohit Muthanna @11111110b
- Spiral Keyboard by Patrick Snels
- Ragamroll by Mani Balasubramanian
- Gbloink! by Phil Jones
- 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 the instrument code 1 (aka the default)
instruments: [ "acoustic_grand_piano", "acoustic_guitar_nylon" ], // or multiple instruments
callback: function() { }
});
- MIDI.Plugin.js: Ties together the following frameworks;
MIDI.noteOn(channel, note, velocity, delay); MIDI.noteOff(channel, note, delay); MIDI.chordOn(channel, [note, note, note], velocity, delay); MIDI.chordOff(channel, [note, note, note], 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).