Categories
color piano java javascript midi

Midibridge supports multiple midi connections

Deprecated, please use Chris Wilson’s WebMIDIAPI Shim

Jonathan El-Bizri gave me the brilliant idea to add support for multiple midi connections to the midibridge. I made a very basic implementation of this functionality, see overhere: http://abumarkub.net/midibridge/js3/ The code will be available on GitHub in the coming few days. Open the midi configuration and click ‘add midi connection’. You can add as many midi connections as you like (only limited by the amount of RAM on your computer). Once created, you can change the in- and/or outport of a midi connection. If you create 2 identical midi connections, only the one you created first will be effective. Identical midi connections are connections that have the same midi in- and outport. You can also filter types of midi events per connection. Currently i have only added ‘control change’, ‘program change’ and ‘pitch bend’, but all types can be filtered out: it is just a matter of adding more checkboxes. If a checkbox is checked, the related type of midi event will not be sent to the midi outport.

Categories
java javascript midi

Color Piano sample app on Canvas

Being heavily inspired by the beautiful Color Piano Theory experiment by Michael Deal of Mudcube, i decided to make a color piano sample client for the midi bridge. You can find it here:

http://abumarkub.net/midibridge/canvas/

I have used the canvas element and it runs fine in all modern browsers.

Click on “open midi configuration” first to connect a keyboard and a midi output, then click “close midi configuration” and play your keys: enjoy the beautiful rainbow colors while playing!

For more information and links about the colors and music see this blog.

Note for Internet Explorer 7 and 8 users: to support the Canvas element in older browsers i use Googles Explorer Canvas, and thus VML. Because VML is quite slow, you can run the app in Internet Explorer 7 and 8, but it is actually too sluggish for real time animations like this.