Category: javascript

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.

Deprecated, please use Chris Wilson’s WebMIDIAPI Shim I have started to port the midibridge to a Javascript only version. Over here you can find a proof of concept:

http://abumarkub.net/midibridge/js1/ In the midi inputs dropdown menu you’ll find the option “Regular Computer Keyboard”. If you choose this option, you can play notes C4 to C5 (diatonic) with the keys A, S, D, F, G, H, J and K. It is a very simple implementation only meant to show you the idea. Please note that this version uses a slightly different version of the midibridge applet. You can *not* interchange the applets of the Actionscript and Javascript version! The way the applet is embedded has been completely rewritten and is now fully HTML5 compliant. In due course i will update the Actionscript version as well.