Categories
java javascript midi

New API in MIDIBridge

Deprecated, please use Chris Wilson’s WebMIDIAPI Shim The new API is an implementation in Java and Javascript of the W3C proposal for MIDI support in browsers by

Jussi Kalliokoski. You can read the proposal here. Besides the API that Jussi proposes, I have also added some extra functionality, notably a Sequencer. The documentation still is very scarce, I will add it bit by bit the coming weeks. Meanwhile the code examples provide useful information on using the new API. All code is available at Github and you can test the code examples online as well: 1. A basic example. code | launch 2. Connects your your computer keyboard to a MIDI output. code | launch 3. Example that lets you select a MIDI input and a MIDI output. code | launch 4. Same example as above, but the MIDI output gets connected directly in Java which results in better playback performance. If your application does a lot of graphical updates on incoming MIDI events, you should use this method. code | launch 5. Select a MIDI file on your local hard drive and play it back on a MIDI output. You can change the instrument as well. code | launch 6. Same example as above, but the MIDI output gets connected directly in Java which results in better playback performance. code | launch 7. Example of how you can send MIDI events generated in Javascript to a MIDI output. code | launch If you come across bugs or issues, or if you have feature requests or other questions, file an

issue on Github, or email me at daniel@abumarkub.net

Categories
java javascript midi

Midibridge using base64 soundfonts, a proof of concept

Deprecated, please use Chris Wilson’s WebMIDIAPI Shim

Michael Deal made a brilliant music theory learning app for Google Chrome using base64 soundfonts. In fact he is not really using the soundfonts itself, but rendered .ogg files that are loaded as base64 files into the html5

Categories
java javascript midi

Playback of midi files added to the midibridge (preview)

Deprecated, please use Chris Wilson’s WebMIDIAPI Shim I made a test version of the midibridge that allows you to playback midi files. This version uses the File API for loading the midi file and a html5 slider for controlling the song position, so it currently only runs in Chrome:

http://abumarkub.net/midibridge/examples/base64.html You can simply drag and drop a midi file (.mid extension) onto the dropbox and the file gets loaded into the applet as a base64 string.

Categories
actionscript java javascript midi

Using the midibridge made easy

Deprecated, please use Chris Wilson’s WebMIDIAPI Shim The newest version of the midibridge allows you to add midi functionality to your website with just one line of code:

midiBridge.init(function(midiEvent) { yourCoolFunction(midiEvent); });

Also, you only have to add one single minified javascript file of less then 5K to your html page:


Only native Javascript is used, so you can use it conflict-free together with any Javascript framework. Code is available at GitHub and a minified production version can be downloaded from Google Code Check the quickstart guide!

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.

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

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.

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

http://abumarkub.net/animated-score/

I used a midi file from piano-midi.de 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.

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

http://www.jsresources.org/examples/midi_io.html

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.

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

http://github.com/abudaan/javamidi http://github.com/abudaan/flashmidi http://code.google.com/p/miditoflash/