generating MIDI in javascript [closed]

Question

I'd like to generate a sequence of MIDI notes in javascript and then play it. Many plugins support MIDI, but I'm not aware of any supporting "data:" URL. Generating MIDI content is not a big deal - but feeding this content into player is. Anyone knows how this can be done - if not in general, then at least for specific plugin like QuickTime?

Molar

Does WebMIDI help? developer.mozilla.org/en-US/docs/Web/API/MIDIAccess – Bede

Answer 1

Very neat problem. I've been working a lot lately with base64-encoded images and have regularly been using http://www.greywyvern.com/code/php/binary2base64 for image encoding. I just tried converting a MIDI file and putting the base64 text stream into an HTML and it played just fine in Firefox (which astonished me). Here's the code (with the Base64 stream removed for brevity):

<embed 
    autostart="true" 
    loop="false" 
    volume="100" 
    hidden="false" 
    src="data:audio/x-midi;base64,abc...."
></embed>

I'm not sure it's possible to go from a binary image to base64 in JS, but I suspect that going from MIDI might be. It's a start.

Nodab

Answer 2

Sounds like the easiest way would be passing the MIDI data to e.g. a PHP script which then returns the input. Then you can use "yourscript.php?your-midi-data" instead of "data:your-mini-data".

Ashurbanipal

Answer 3

You might want to take a look at the following blog post of mine. It is about a library that does exactly what you are trying to do, client-side. Be aware that cross browser MIDI reproducibility in browsers is not really consistent, though.

http://sergimansilla.com/blog/dinamically-generating-midi-in-javascript/

Dela

Sergi, your solution doesn't seem to address the main problem. If you use "embed" or "object", you don't have control over playback. QuickTime interface solves the problem. You have complete control over it from javascript, can even generate and add stuff dynamically. And it works with data url. Which was a whole point of the original question. – Induna

Answer 4

In addition to using Javascript (see Sergi's post), you can use Java as a fallback method with my Javascript to Java bridge that exposes portions of the MIDI framework: http://mudcube7.blogspot.com/2010/08/dynamic-midi-generation-in-browser.html

Devaughn

Answer 5

QuickTime with data url works with both Firefox and Chrome (recent releases, no betas) You have to follow instructions from quicktime website : initialize QuickTime by calling QT_WriteOBJECTfunction (I had to provide initial valid src pointing to Beethoven's mp3 file, just to keep it from complaining - maybe it's not necessary), register listeners as detailed in the said reference, and after getting callback qt_load, call document.movie1.SetURL(myDataURL) method. I used base64 encoding in data url: "data:audio/midi;base64,...". (content was generated by javascript). Everything worked sensationally well: Play(), Stop(), etc. Most difficult part is reading their monumental doc (note that it has also "HTML" part)

Induna

link is no good... – Samuelson