- Basic - the most basic implementation.
- MIDIPlayer - how to parse MIDI files, and interact with the data stream.
- WhitneyMusicBox - a audio/visual experiment by Jim Bumgardner
- 3D Piano Player w/ Three.js by Borja Morales @reality3d
- Brite Lite by Daniel Christopher @uxmonk
- Color Piano by Michael Deal @mudcube
- Euphony 3D Piano by Xueqiao Xu @qiao
- Gbloink! by Phil Jones
- Piano Typewriter by Andrew Levine
- Ragamroll by Mani Balasubramanian
- Simon Says by Daniel Christopher @uxmonk
- Spiral Keyboard by Patrick Snels
- VexFlow by Mohit Muthanna @11111110b
- MIDI Pictures: Pictures of the 128 standard instruments on MIDI piano keyboards
- MIDI Soundfonts: Pre-rendered General MIDI soundfonts that can be used immediately with MIDI.js
There is two generators for MIDI.js soundfonts:
- NodeJS package for creating soundfonts from WAV files - by Patrick Wolleb
- Ruby package for creating soundsfonts from SF2 files - by Mohit Muthanna
To dive in quickly Benjamin Gleitzman has created a package of pre-rendered sound fonts.
MIDI.loadPlugin.js - Decides which framework is best to use
// interface to download soundfont, then execute callback;MIDI.loadPlugin(onsuccess);// 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 instrumentsonsuccess: function(){}});MIDI.Plugin.js - Controls MIDI output
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 => 21MIDI.noteToKey=object;// 21 => A0MIDI.Player.js - Plays MIDI stream
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,onsuccess);// 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.MIDI.Player.removeListener();// removes current listener.MIDI.Player.addListener(function(data){// set it to your own function!varnow=data.now;// where we are nowvarend=data.end;// time when song endsvarchannel=data.channel;// channel note is playing onvarmessage=data.message;// 128 is noteOff, 144 is noteOnvarnote=data.note;// the notevarvelocity=data.velocity;// the velocity of the note// then do whatever you want with the information!});MIDI.Player.clearAnimation();// clears current animation.MIDI.Player.setAnimation(function(data){varnow=data.now;// where we are nowvarend=data.end;// time when song endsvarevents=data.events;// all the notes currently being processed// then do what you want with the information!});MIDI.setEffects([{type: "MoogFilter",bufferSize: 4096,bypass: false,cutoff: 0.065,resonance: 3.5},{type: "Bitcrusher",bits: 4,bufferSize: 4096,bypass: false,normfreq: 0.1},{type: "Phaser",rate: 1.2,// 0.01 to 8 is a decent range, but higher values are possibledepth: 0.3,// 0 to 1feedback: 0.2,// 0 to 1+stereoPhase: 30,// 0 to 180baseModulationFrequency: 700,// 500 to 1500bypass: 0},{type: "Chorus",rate: 1.5,feedback: 0.2,delay: 0.0045,bypass: 0},{type: "Delay",feedback: 0.45,// 0 to 1+delayTime: 150,// how many milliseconds should the wet signal be delayed? wetLevel: 0.25,// 0 to 1+dryLevel: 1,// 0 to 1+cutoff: 20,// cutoff frequency of the built in highpass-filter. 20 to 22050bypass: 0},{type: "Overdrive",outputGain: 0.5,// 0 to 1+drive: 0.7,// 0 to 1curveAmount: 1,// 0 to 1algorithmIndex: 0,// 0 to 5, selects one of our drive algorithmsbypass: 0},{type: "Compressor",threshold: 0.5,// -100 to 0makeupGain: 1,// 0 and upattack: 1,// 0 to 1000release: 0,// 0 to 3000ratio: 4,// 1 to 20knee: 5,// 0 to 40automakeup: true,// true/falsebypass: 0},{type: "Convolver",highCut: 22050,// 20 to 22050lowCut: 20,// 20 to 22050dryLevel: 1,// 0 to 1+wetLevel: 1,// 0 to 1+level: 1,// 0 to 1+, adjusts total output of both wet and dryimpulse: "./inc/tuna/impulses/impulse_rev.wav",// the path to your impulse responsebypass: 0},{type: "Filter",frequency: 20,// 20 to 22050Q: 1,// 0.001 to 100gain: 0,// -40 to 40bypass: 1,// 0 to 1+filterType: 0// 0 to 7, corresponds to the filter types in the native filter node: lowpass, highpass, bandpass, lowshelf, highshelf, peaking, notch, allpass in that order},{type: "Cabinet",makeupGain: 1,// 0 to 20impulsePath: "./inc/tuna/impulses/impulse_guitar.wav",// path to your speaker impulsebypass: 0},{type: "Tremolo",intensity: 0.3,// 0 to 1rate: 0.1,// 0.001 to 8stereoPhase: 0,// 0 to 180bypass: 0},{type: "WahWah",automode: true,// true/falsebaseFrequency: 0.5,// 0 to 1excursionOctaves: 2,// 1 to 6sweep: 0.2,// 0 to 1resonance: 10,// 1 to 100sensitivity: 0.5,// -1 to 1bypass: 0}]);- colorspace.js: Color conversions, music isn’t complete without!
Color.Space(0xff0000, "HEX>RGB>HSL");
- dom_request_script.js: Loads scripts in synchronously, or asynchronously.
DOMLoader.script.add(src, onsuccess);
- dom_request_xhr.js: Cross-browser XMLHttpd request.
DOMLoader.sendRequest(src, onsuccess);
- synesthesia.js: Note-to-color mappings (from Isaac Newton onwards).
- Web MIDI API: W3C proposal by Jussi Kalliokoski & Chris Wilson
- Web Audio API: W3C proposal by Chris Rogers
- <audio>: HTML5 specs
- 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.