Skip to content

Exporting MIDI Files using Data URIs

January 31, 2012

I made a post on Reddit about my Melodique melodic phrase generation tool. Three people told me that they’d like for the tool to have the ability to export MIDI files, as this would allow loading the generated content into music editing software. It turns out there’s a file writer W3C API in the works that would make implementing this fairly easy, but unfortunately, no browsers seem to support it at this time, not even dear Chrome.

The solution I found was to use data URIs to encode the files. They’re simply URIs containing uncompressed base64 encoded file data. These are easily generated from JavaScript code. This should work nicely in most browsers out there. There’s often a limit of 30-60KB, but this isn’t an issue for my short MIDI files, which are often under 400 bytes.

Implementing basic support for exporting MIDI files took me about 4-5 hours in total. Fortunately, there’s great resources out there documenting the format, which, although peculiar, isn’t that hard to implement.

On another note, I started reading Virtual Music, a book about computer-generated music which I’d bought a couple months ago. It’s been an interesting read so far. I particularly liked the humorous prose about the nature of music and composition:

Is music a craft
Or is it an art?
Does it come from mere training
or spring form the heart?

Did the études of Chopin
reveal his soul’s mood?
Or was Frédéric Chopin
Just some slick “pattern dude”?

An interesting read for those interested in this topic :)

From → JavaScript, Music

3 Comments
  1. I love Melodique! Great job on that. I was curious to know if you have created, or found examples of Javascript simply sending midi messages out, like CC Data or even note on off data as if the Javascript was the midi controller? It seems way more simple than playing/creating midi generated sound but the web seems barren to such information.
    Cheers,
    Eli

    • Thanks :)

      Not sure if that’s what you mean but I know some people at Google were working on a MIDI API. I haven’t heard anything about it in a while but apparently it’s available now:
      http://www.html5audio.org/2013/06/web-midi-api-available-in-chrome-canary.html

      I was interested in something like this because I own several MIDI controllers and thought it would be really fun to have an in-browser soft synth controlled by external MIDI devices.

      • Awesome, thanks I will look into that! So, what I meant is in other programs (in my case projection mapping/video triggering software) I can change what video is being played via a midi cc message ( similar to a knob on a keyboard changing some parameter of the sound) On a physical keyboard each knob has an attached cc number and when you twist that knob or hit the switch, it effects whatever parameter in the software you had assigned that cc number to control. (I hope I didn’t just mansplain it, as you probably knew that) What I want to do is with javascript, using an onClick, is send that midi CC number to trigger a changing of the parameter I assign it to in the vj or softsynth software. I just don’t know enough about javascript to know if this is even possible, and unfortunately the program I need to use requires Javascript (or lingo) as its output language.

        I did just find this too, which might be helpful in your situation, I will need to do some reading up!
        http://abumarkub.net/abublog/?page_id=399#introduction

Leave a comment