On #musedchat Monday Nov 18 I saw an opportunity to mention an open source Scoring/Engraving tool and was soon encouraged to send more links to open source resources. I’ve been collecting such links in the bookmarks of various browsers for years, and I’ve followed through on my initial interest to various degrees, so in some cases I found myself checking links along with my memory. In one case—MIDI.js—I said a big “Oh yeah! I was gonna try installing that, wasn’t I?”

How easy it is to try out any of the hundreds of thousands of interesting and potentially useful JavaScript offerings one can find on the Internet depends a lot on how much documentation the developer and interested community have provided and good examples of the code in (ahem) “authentic situations.” No matter how good it is, if you want it you’ll soon have to view source and dig in. The code behind MIDI.js looked to me daunting, but on closer inspection it turned out the biggest hurdle was recognizing the playlist of MIDI files is an array of Base64-encoded strings hard-coded in the file. If you know what that is, and if you can encode your MIDI file as a Base-64 string then copy/paste it over the ones in the original example—and if you set up the folder structure identically to the original (clone the Git repository straight into /xampp/htdocs if you work with a LAMP setup like mine)—it just works! But it looks just like the author’s.

The design is not responsive1 and doesn’t fit my blog or mobile device. The colours are very cool but I don’t need them. The note display has so many pedagogical applications my brain is exploding—but it doesn’t fit on my pages, same goes for the player and buttons. The JavaScript knowledge I need is “just enough” to identify where to safely slice and dice the code and recognize the very few places I might change something. It was more important I knew Base-64 encoding is something I’d likely find a web site to do. The highest-level skill needed here is actually CSS. I need to restyle the player so it fits my pages in the contexts I expect it to be viewed. And I want those notes to play along exactly as they do now, just in a completely different layout.

Here’s what it looks like today. (It’s not worth listening to in anything but Chrome).

// I added...
// Quick suppression of undefined
MIDI.lang = MIDI.lang || 'en-ca';
/// above...
// this is the language we are running in
var title = document.getElementById("title");
title.innerHTML = "Sound being generated with " + MIDI.lang + ".";
// I also added at line 108
pausePlayStop(true);  // Sorry Gasman. Autoplay is just wrong!
// Just above that I see <code>song[songid++%3]</code>, the '%3' implies something hard-coded that applied to the fact there used to be 3 midi files. To be continued...