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:

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.

java javascript midi

Javascript only version of the midibridge

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

java midi

Interactive Animated Score, a proof of concept

Inspired by the brilliant videos of Stephen Malinowski on his YouTube channel i decided to make an interactive version of such an animated score.

Tho still in an early stage, you can see a proof of concept overhere:

I used a midi file from and exported it into a mp3 file. Then i parsed the same midifile to an XML file with a small Java program that i wrote. Flash reads in this XML file and plots the notes to stage. The position of the plotted notes is conducted by the position of the mp3 version of the song.

It is still a proof of concept: the performance has to be improved and the animation could be somewhat more spectacular.

Java and Actionscript code will be available soon.

Update 010111: i have added note info popups and a color scheme per track.

java midi

Stresstesting the midibridge with Chopin

James Yanli Lei is a flashdeveloper from Singapore who showed me a brilliant way to stresstest the midibridge: he played a midi file through the brigde.

He used a commandline Java program to play back the midi file, you can download the code at Java Sound Resources:

I have made a screencast of a stresstest with Chopin‘s etude No.2 Opus 25; this etude has a lot of really fast notes, so very suitable for stresstesting.

java midi

web and air version merged

Deprecated, please use Chris Wilson’s WebMIDIAPI Shim Today i have released a new version of the midibridge where the web and the Air version are part of the same package. This applies to both the Flash and the Java end. It makes the code much easier to maintain on the one hand, and on the other hand enables you to develop your project for both targets with effectively the same code. Particulary the applet has a lot of improvements and is much more stable than the earlier versions. You can start and stop the applet from the configuration panel in Flash and devices that are already in use by other processes don’t show up as available devices anymore. Also the naming of classes and packages is more consistent and intuitive. I have avoided the term “bridge” because in fact all classes together make up the bridge. I have started to document the code as well, and i will continue to do this the coming days and weeks, so please check back the repositories every now and then. Code is available at GitHub and Google Code:


air version with standalone midibridge

Deprecated, please use Chris Wilson’s WebMIDIAPI Shim I have built a command line version of the midibridge applet. It is not a socket server, it is a plain and lightweight command line program written in Java that connects to the midi system on your computer. You can communicate with the program via its standard in- and outport. The Air app launches the program on the command line as a NativeProcess and starts listening for midi events on the standard output. Requests from the Air app such as selecting another midi in- or outport or sending in AS3 generated midi events, are written to the standard input of the program. Code is available at GitHub: Or as a zip download at Google Code: The functionality is the same as the bi-directional web version with soundfont support.


bi-directional version of the midibridge with soundfonts 2.0 support

Deprecated, please Chris Wilson’s WebMIDIAPI Shim

The new version allows you to generate midi events in AS3. The applet translates the AS3 midi events in to midi messages that can be sent to your midi hardware or software.

Also the Alchemy version of Fluidsynth from Yoann Huiban has been implemented. This makes it possible to use your own soundfonts in your app so you don’t have to rely anymore on the often quite poor midi sounds that ship with your soundcard.

You can check out the new version over here:

Code has been published to GitHub, see:

Or as a zip download at Google Code:

java midi

new version of midibridge supports midi out

Deprecated, please Chris Wilson’s WebMIDIAPI Shim

The midi bridge has been updated and midi out has been added. This version works on all platforms.

Windows: No known issues

OSX: Only Safari is supported. If you are on 10.5 please install Java update 6, if you are on 10.6 install Java update 1. You don’t need Humatic mmj anymore. More info on and on apple’s developer site, scroll down to Java Sound.

Linux: Konqueror is not supported

I made a sample app that you can see over here:

Code is available in several versions:

Please report back to me if it doesn’t work on your system.

java midi

midi bridge support for osx and vista 64bit

Deprecated, please Chris Wilson’s WebMIDIAPI Shim

Mac OSX and Vista 64bit are now supported, check the example!

Please download mmj first and place mmj.jar and libmmj.jnilib in your /Library/Java/Extensions directory.

Because the applet is loading the mmj library from your local system, the applet has to be signed and you have to trust it before it can run.

For Vista 64bit
Please go to Control Panel -> View 32-bit Control Panel Items -> Java -> Advanced -> Java Plug-in and deselect ‘Enable the next-generation Java Plug-in’.

In general
If the midi bridge loses its connection to your midi device, or the bridge isn’t responding at all anymore, please close your browser(s) completely. That means: close all running browser windows of all browsers that have been running the applet. This is to ensure that you kill the Java Plug-in process completely.

All midi bridge examples are updated and your platform should be detected automatically, so go ahead and test the bridge on your machine with the links in this post or in this post.

Please let me know if it doesn’t work on your system.

You can find the code at


midi bridge code updated

Deprecated, please Chris Wilson’s WebMIDIAPI Shim

As developers started to use the midi-to-flash bridge i realized that the organization of code was not flexible enough. So i rearranged the code rather drastically. The code is now split up into two pieces: the midi bridge and the midi client. The midi bridge comprises 3 parts:

  • a Java applet that receives the midi data from your system
  • some JavaScript code that enables 2-way communication between Java and Flash
  • a small Flash application that broadcasts the midi data to other Flash applications thru a LocalConnection

See the generated asdocs.

This is a sample of a midi bridge. You can set the bridge id and select the midi device that you want to connect to the midi bridge. These parameters can also be set as flashvars in the containing html file.

You can run multiple instances of a midi bridge at the same time, and you can connect each instance to different midi device.

Because a midi client receives midi data thru a LocalConnection it can be any type of Flash application: a swf running in a browser or in a standalone player, a projector or an AIR application.