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. For older browers that don’t support the File API, i will make a test version whereby midi files can be loaded into the applet by an upload form. The form lets you select a local midi file that gets uploaded to a php script. The php script encodes the midi file and sends it back to the webpage as a base64 string that subsequently can be loaded into the applet. Note that this is just a proof of concept; while implementing the sequencer (the midi files get played back by the

javax.sound.midi.Sequencer class) i came across some bugs and clumpsy implementations that i want to fix as well before i publish a new release, which will probably be early next year. Also, this version automatically connects to your default synthesizer: you can not choose an output yourself. In the official release i will add that in again. The way midi connections are managed in the applet will change quite a bit in order to provide more flexibility and control from javascript. The idea of using base64 strings as input instead of plain midi files came from Paul Rosen. Because of the security restrictions of applets, you cannot load a local midi file into an applet, even if the applet runs as a local file. By using base64 data you can circumvent these restrictions. Paul Rosen and Gregory Dyke are the creators of the Draw the Dots project; it consists of the website drawthedots.com that lets you, among others, create sheet music out of ABC musical notation. The website very nifty built; the musical notation is rendered as an interactive SVG canvas with the RaphaelJS library, and you can download the generated sheet as PDF, as well as share it with others. Also, you can play the music as a midi file. The midi file is embedded as a base64 encoded string:

<embed src="data:audio/midi;base64,TVRoZAAAAAYAAAABA8B....."/>

And in most cases that causes the Quicktime plugin to play the file using the default built-in GM set of your computer or soundcard. Paul wanted to investigate the possible use of the midibridge in Draw the Dots and that’s why i decided to bring forward the implementation of the playMidiFile(url) method. Although the method is currently implemented with the more descriptive name playBase64String(). More on this soon. PS: Michael Deal provided a very good midi file to stress test the midibridge. It is a rather heavy Waltz and you can download it here.