Skip to content

🎹 Making life easy to create a MIDI-app on the web. Includes a library to program synesthesia into your app for memory recognition or for creating trippy effects. Convert soundfonts for Guitar, Bass, Drums, ect. into code that can be read by the browser. Supports multiple simultaneous instruments and perfect timing.

License

Notifications You must be signed in to change notification settings

mudcube/MIDI.js

Repository files navigation

Code examples - from the repo

  • 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

Demos

Related repositories

  • 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

Generating Base64 Soundfonts

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.

API

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 => A0

MIDI.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.

Listener for when notes are played

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!});

Smooth animation interpolating between onMidiEvent calls

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!});

Effects available for WebAudioContext via Tuna.js

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}]);

Libraries

  • colorspace.js: Color conversions, music isn’t complete without!
Color.Space(0xff0000, "HEX>RGB>HSL");
DOMLoader.script.add(src, onsuccess);
DOMLoader.sendRequest(src, onsuccess);

Many thanks to the authors of these libraries

Similar projects

About

🎹 Making life easy to create a MIDI-app on the web. Includes a library to program synesthesia into your app for memory recognition or for creating trippy effects. Convert soundfonts for Guitar, Bass, Drums, ect. into code that can be read by the browser. Supports multiple simultaneous instruments and perfect timing.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published