{"id":704,"date":"2011-12-01T23:12:30","date_gmt":"2011-12-01T22:12:30","guid":{"rendered":"http:\/\/abumarkub.net\/abublog\/?p=704"},"modified":"2015-08-22T13:55:32","modified_gmt":"2015-08-22T12:55:32","slug":"playback-of-midifiles-added-to-the-midibridge","status":"publish","type":"post","link":"https:\/\/abumarkub.net\/abublog\/?p=704","title":{"rendered":"Playback of midi files added to the midibridge (preview)"},"content":{"rendered":"

Deprecated, please use Chris Wilson’s WebMIDIAPI Shim<\/a><\/strong> 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:<\/p>\n

http:\/\/abumarkub.net\/midibridge\/examples\/base64.html<\/a> 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<\/p>\n

javax.sound.midi.Sequencer<\/a> 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<\/a>. 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<\/a> 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<\/a> 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:<\/p>\n

<embed src=\"data:audio\/midi;base64,TVRoZAAAAAYAAAABA8B.....\"\/>\n<\/code><\/pre>\n
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<\/a> provided a very good midi file to stress test the midibridge. It is a rather heavy Waltz and you can download it here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,8,9],"tags":[],"class_list":["post-704","post","type-post","status-publish","format-standard","hentry","category-java","category-javascript","category-midi"],"_links":{"self":[{"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=\/wp\/v2\/posts\/704","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=704"}],"version-history":[{"count":26,"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=\/wp\/v2\/posts\/704\/revisions"}],"predecessor-version":[{"id":1034,"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=\/wp\/v2\/posts\/704\/revisions\/1034"}],"wp:attachment":[{"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abumarkub.net\/abublog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}