UPDATE: This project has been cancelled, the MIDIBridge (which takes this idea much further) is what you’re looking for; http://www.abumarkub.net/abublog/?p=505
Have you ever wanted to use MIDI in your Javascript or Flash project? It’s been a long time dream of mine. After a long search I came up with one solution that would provide the best support for the most computers (at present time) — utilizing Java’s javax.sound.midi interface through an . Introducing the MIDIPlugin providing the fundamental functions to create dynamic music & sound effects in your browser.
The MIDIPlugin requires that Java and a MIDI Soundbank be installed on your computer. Some computers have these installed by default, others do not. More on computability later.
Piano Theory was built utilizing the MIDIPlugin. Although the MIDIPlugin works in Internet Explorer my piano webapp does not (at this time) — apologies to IE users.
My pitch for MIDI support becoming a W3C standard
Just as color and native primitives are the building blocks of graphics MIDI is an essential building block of music — we have for graphics, we’re lacking decent support for dynamic music generation.
The benefits of dynamic music generation is substantial — saving bandwidth, opening up a whole new realm of sense (the sense of audio) to dynamic content, allowing developers to create more interactive & immersive projects. MIDI is a well defined framework that could be implemented into the W3C standards, as long as there is the support behind it. With the motion that the web has been moving forwards recently, the possibility is ripe.
The plugin is easy to use
- Include the MIDIPlugin in your projects to create a dynamic audio experience:
<applet archive="MIDIPlugin.jar" code="MIDIPlugin.class" height="1" id="MIDIPlugin" name="MIDIPlugin" width="1"><applet>
- Test to see whether the browser supports the MIDIPlugin (has Soundbank installed and supports Java) with the following function in window.onload:
MIDIPlugin = document.MIDIPlugin; setTimeout(function () { // run on next event loop (once MIDIPlugin is loaded) try { // activate MIDIPlugin MIDIPlugin.openPlugin(); } catch (e) { // plugin not supported MIDIPlugin = false; } }, 0); - When MIDIPlugin is false the user is either missing the MIDI Soundbank or Java — prompt the user to install the appropriate software. If the MIDIPlugin isn’t set to false… well then, the fun starts
Functions available to you within the MIDIPlugin object:
MIDIPlugin { setChannel(int) setMono(boolean) setMute(boolean) setOmni(boolean) setSolo(boolean) getInstruments(null) setInstrument(int) setBend(double) // 0.5 = default setPan(double) // 0.5 = center setPressure(double) setReverb(double) setSustain(double) setVelocity(double) setVolume(double) playNote(int) // 0 is low C - 1 is C# and so on stopNote(int) // playChord(string) // for instance [0,5,7].join(",") stopChord(string) // stopAllNotes() openPlugin() closePlugin() } - Remember to unload the plugin onbeforeunload, or your will have a loose connection hanging, which over time (multiple reloads) will result in the MIDI sound not working until you restart your browser:
window.onbeforeunload = function() { MIDIPlugin.closePlugin(); };
Licensed to use in your projects
Released as CC0 — this means you can use the MIDIPlugin in your project, and modify it to your hearts content without giving recognition, be that commercial or non-commercial.
Git me
Easily forkable on GITHub or download the precompiled .jar applet.
Supported OS/Browsers
MIDIDPlugin works on Macs out of the box. Linux works out of the box depending on distribution, other times it requires Java SE to be installed. Windows requires Java SE as well as the MIDI Soundbanks to be installed (the Windows version of Java SE doesn’t ship with MIDI Soundbanks included). On the browser front the plugin works across the board: Chrome, Opera, Firefox, Safari and IE.
Other fun things in the name of music
http://rhythmiclight.com/archives/ideas/colorscales.html
http://www.alexisisaac.net/products/flashMidi/
http://homepage3.nifty.com/sketch/flash/flmml050.swf
http://code.google.com/p/abcjs/
http://www.vexflow.com/
http://en.wikipedia.org/wiki/General_MIDI


Jan 16, 2011 @ 09:08:44
Hi
I was interested in reading your article. In fact i use the javascript -> java method for my own webapp since several months and i was searching for an alternate, brand-new methode… which doesn't exists… so much for the glory of HTML5 !!!
If you ever find an alternate solution than using Java please tell me ! Meanwhile you're welcome to test my webapp (a simple music editor) at http://j.benzakoun.free.fr/JSNE/JavaScriptNoteEditor_b3/ !
Jan 19, 2011 @ 23:00:43
Embedding a sound-font in Flash would probably be the best way to go for the highest level of support (somewhere around 90% of computers run Flash). But once you start embedding multiple instruments there is going to be a large overhead in bandwidth. It would be a good solution though, and would be amazing to have some GPL code w/ a GPL'd sound-font using Flash audio capabilities as an interface (as another fallback).
The tag might become a great solution at some point, keeping my fingers crossed, it seems like MIDI is a logical implementation as a basic element of audio creation (as vectors are to ).
Mar 08, 2011 @ 05:57:08
The precompiled .jar link is broken.Can you fix it?
Piano Raum
Jun 26, 2011 @ 21:39:55
[...] Mit dieser interessanten Aussage, als Ansatz kommt man schon auf so einige Ideen. Wie z.B. die Tasten eines Keyboards in Farben zu unterteilen. Hier einiges zum Thema. Color Piano ProjectDieses Projekt verteilt das Farbspektrum auf das Tonspektrum zum visualisieren von Melodien. http://colorpiano.com Color Piano TheoryDieses Projekt befasst sich damit ein Tool zu erstellen, das verschiedene Farbskalen auf einer Klaviatur visualisiert. Artikel auf mudcu.be, Online Tool per Javascript Dynamic MIDI generation in the browserArtikel [...]
Jul 22, 2011 @ 05:59:07
hi, at present im trying to devise a flash programming device using flash professional 8 that will be able to send program change messages to my instruments via midi/usb from my pc. the graphic shell is already completed and this is were i stop. can anyone please explain to me where i go from here, what i need to learn about and what i need to input in my flash program as in actionscript and java script.
i would love to be able to control my keyboard system from my computer in a live situation, and at the moment a simple program change device is all im interested in. of course their is more into this than just that, as the possabilities are endless.
hope someone can help me out, or even dare i say ‘consider making me the device, and cost would be given’ for time and effort. can anyone assist me in developing this utility. i would be much appreciative. rob zominfo@yahoo.co.uk
Jan 18, 2012 @ 10:47:12
Hi Michael,
This may be one more option for your projects: http://jazz-soft.net
Would appreciate your opinion.
Thanks!
Jan 18, 2012 @ 23:55:03
I ran across your website last week while browsing the interwebs. I’ve tried out your MIDI plugin, and it has an impressive response time. The download is only 37kb, so that is great too. I’m curious, if the users computer has no MIDI soundfonts installed on the system, would your installer be able to include that in the process? I’ll connect with you via email.
Mar 07, 2012 @ 00:57:24
This is awesome – thanks for linking out to the MIDI Bridge and spreading the word… exactly what we were looking for for a future project.
Cheers!