{"id":399,"date":"2010-11-09T16:15:14","date_gmt":"2010-11-09T15:15:14","guid":{"rendered":"http:\/\/www.abumarkub.net\/abublog\/?page_id=399"},"modified":"2015-05-22T19:13:08","modified_gmt":"2015-05-22T18:13:08","slug":"midibridge","status":"publish","type":"page","link":"https:\/\/abumarkub.net\/abublog\/?page_id=399","title":{"rendered":"Midibridge"},"content":{"rendered":"

[ Deprecated: Chrome 43 supports MIDI natively, see this post<\/a> ]<\/strong><\/p>\n

1) Introduction<\/a>
\n2) Quick start guide<\/a>
\n3) Documentation<\/a>
\n4) About midi out<\/a>
\n5) Earlier versions<\/a>
\n6) What about Flash?<\/a>
\n7) Known issues<\/a>
\n8) Forthcoming features<\/a><\/p>\n

<\/a> Introduction<\/strong><\/p>\n

The midibridge is a Javascript API for interacting with the midi devices on your computer.<\/p>\n

It provides methods for detecting the midi devices and for connecting these devices with each other.<\/p>\n

The midibridge itself is considered a midi device as well, so it can be connected to the detected devices.<\/p>\n

The midibridge can generate and send midi events to midi output devices, and receive midi events from midi input devices.<\/p>\n

The midibridge can also filter and alter midi events.<\/p>\n

A sequencer for playing back midi files is implemented as well, recording will be added in a later version.<\/p>\n

A midi output device is a physical output port on your computer, a virtual output port or a software synthesizer. It can also be a sequencer, a file or a function.<\/p>\n

A midi input device is a physical or virtual input port, a sequencer, a file or a function.<\/p>\n

A midi device can be both in- and output. The midibridge itself for instance is both in- and output because it can send and receive midi events.<\/p>\n

The actual interaction with the midi devices on your computer is done by a Java applet. The midibridge automatically adds the applet to your webpage.<\/p>\n

The midibridge has no visual parts, it is ‘headless’ code. You could say the midibridge enables you to write a ‘front-end’ on top of the applet.<\/p>\n

Midi Devices -> Java Applet -> Javascript Midibridge API -> a GUI in Javascript, Flash, SVG, C# (Silverlight)<\/p>\n

Because the midibridge is written in native Javascript, you can use it conflict-free with any Javascript framework.<\/p>\n

<\/a> Quick start guide<\/strong><\/p>\n

1)<\/strong> Download the zip file<\/a> from Github.<\/p>\n

2)<\/strong> In this zip file you’ll find an index.html and 3 folders: \/java contains a Java archive (jar) file, \/lib contains a Javascript file (minified and non-minified) and \/examples contains the code examples of this documentation.<\/p>\n

On your webserver, put the jar file in a folder called “java” and the minified javascript file in the folder where you usually store your javascript libraries. Personally, i put the Javascript libraries that i use in a project in a “lib” folder, and the project specific javascript files in a folder “js”.<\/p>\n

3)<\/strong> Include the file midibridge-0.5.3.min.js in your webpage. If you use a Javascript framework (jQuery, YUI, Dojo, etc.), include it right after you’ve included the framework. See the index.html in the zip.<\/p>\n

4)<\/strong> Start the midibridge. The page has to be fully loaded before you start the midibridge, so call the init function of the midibridge inside your onload handler:<\/p>\n

window.addEventListener('load', function() {\n    midiBridge.init(function(midiEvent) {\n        console.log(midiEvent);\n    });\n}, false);\n<\/code><\/pre>\n
5)<\/strong> Done! If you have a midikeyboard connected to you computer, play some notes and you’ll hear a piano sound. Also you will see that the midi events are printed to your console.<\/p>\n
<\/a> Documentation<\/strong><\/p>\n
By adding the midibridge to your html page, a global variable midiBridge<\/code> is created. Below follows a list of the methods that you can call on the midiBridge<\/code> object. There is also a bunch of handy static members that you use in your code:<\/p>\n
–\u00a0init()<\/a> \u00a0\u00a0
\n–\u00a0sendMidiEvent(status, channel, data1, data2)<\/a> \u00a0\u00a0
\n–\u00a0getDevices()<\/a> \u00a0\u00a0
\n–\u00a0refreshDevices()<\/a> \u00a0\u00a0
\n–\u00a0connectAllInputs()<\/a> \u00a0\u00a0
\n–\u00a0connectFirstInput()<\/a> \u00a0\u00a0
\n–\u00a0connectFirstOutput()<\/a> \u00a0\u00a0
\n–\u00a0connectAllInputsToFirstOutput()<\/a> \u00a0\u00a0
\n–\u00a0addConnection(input,output,filter)<\/a> \u00a0\u00a0
\n–\u00a0removeConnection(input,output)<\/a> \u00a0\u00a0
\n–\u00a0disconnectAll()<\/a> \u00a0\u00a0
\n–\u00a0getNoteName(midiNoteNumber,mode)<\/a> \u00a0\u00a0
\n–\u00a0getNoteNumber(noteName,octave)<\/a> \u00a0\u00a0
\n–\u00a0getStatus(statusCode)<\/a>
\n–\u00a0loadBase64String(base64String)<\/a> \u00a0\u00a0
\n–\u00a0playBase64String(base64String)<\/a> \u00a0\u00a0
\n–\u00a0startSequencer()<\/a> \u00a0\u00a0
\n–\u00a0pauseSequencer()<\/a> \u00a0\u00a0
\n–\u00a0stopSequencer()<\/a> \u00a0\u00a0
\n–\u00a0closeSequencer()<\/a> \u00a0\u00a0
\n–\u00a0getSequencerPosition()<\/a> \u00a0\u00a0
\n–\u00a0setSequencerPosition(microseconds)<\/a> \u00a0\u00a0
\n–\u00a0getNiceTime(microseconds)<\/a>
\n–\u00a0getObject(id)<\/a> \u00a0\u00a0
\n–\u00a0MidiMessage(jsonString)<\/a> \u00a0\u00a0
\n–\u00a0List of static members<\/a><\/p>\n
<\/a> init()<\/code><\/p>\n
The init method of the midibridge adds an extra div to the body of your html page, and in this div the Java applet gets loaded. After the applet has loaded, it detects all currently connected midi in- and outputs. Then it automatically connects all midi inputs to the midibridge. Also, the first found midi output gets connected to all midi inputs and to the midibridge.<\/p>\n
This way you can start playing your midi keyboard directly after the midibridge is initialized. When you play, the callback method that you have passed as an argument to the init function will be called. In the example above, the incoming midi events are only printed to the console, but i’m sure you can come up with something more funky.<\/p>\n
You can also call the init method with a configuration object as argument, this object may contain one or all of the following keys:<\/p>\n