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.
13 replies on “Javascript only version of the midibridge”
Brilliant work man. Looking forwards to trying this in some canvas experiments.
[…] is now depreciated. I recommend using the MIDIBridge over the MIDIPlugin; view the MIDIBridge; http://www.abumarkub.net/abublog/?p=505 […]
Just wanted to chime in and commend you for your work. I’m thrilled to see some activity in the flash/midi world, and now even js.
This is the most elegant solution I’ve seen for integrating midi into web apps so far, and can’t wait to put together some examples.
Thanks for your kind words! You really made my day 😉
BTW: the next version will have a sample client in SVG.
[…] 7th, 2011—This code is now depreciated. I recommend using the MIDIBridge over the MIDIPlugin; http://www.abumarkub.net/abublog/?p=505 […]
[…] kann. Code Komponente sind hier zu finden: javamidi, flashmidi, miditoflash, javascriptmidi, javascriptmidi Artikel Artikel auf […]
This is absolutely awesome – I’ve spent the morning looking for this project. I’m trying to build a visualization tool for a relatively novel and new instrument type called the harmonic table:
http://en.wikipedia.org/wiki/Harmonic_table_note_layout
http://www.soundonsound.com/newspix/image/axis49.jpg
The keyboard layout follows the relationship of the tones, making it logical and intuitive to play. As you can imagine, there is a dearth of educational material for this kind of instrument. I’m hoping to remedy this, and to make this happen, I am hoping to create a simple visualization tool that would allow to represent my playing on the keyboard on a screen: this would allow me to do all sorts of good stuff, from providing myself (and other harmonic table users) with visual feedback without having to look down at the keyboard, and to quickly and cleanly demonstrate keyboard techniques.
Your proof of concept worked for me, so it’s now time to implement!
The harmonic table is a much better way to visualize a score than the excellent (and very pretty) interactive piano roll you created. I’ll be in if this project of mine shows any fruit.
That is massively interesting! I have never heard of the instrument, must be very fun to play! The midi implementation chart tells me that it sends the same midi events as a ‘regular’ keyboard, so it is very well compatible with the midi bridge. Please don’t hesitate to contact me if you have any questions, or if you run into trouble while implementing the bridge into your code.
Absolutely fantastic – brilliant implementation. Looking into creating MIDI to canvas (or maybe WebGL) visualisations to go alongside using my APC40 with Ableton Live. If I get anywhere decent with it, I’ll let you know, but in the meantime, massive thanks for this MIDI bridge!
Thanks!! Looking forward to your project!
I have made an implementation with canvas as well, see: http://www.abumarkub.net/abublog/?p=523
Cool. I was looking for something else completely. Total serendipity. Thanks.
Hello! Do you think there will be a solution for having MIDI input (from an external MIDI keyboard) in a browser WITHOUT Java at all?
Have some people tried yet ?
Why is Java absolutely required ?
You can use the Jazz plugin instead of Java, see http://jazz-soft.net/doc/Jazz-Plugin