Color Piano Theory is now available on the Chrome Webstore. There haven’t been any major UI overhauls since last reported, but there has been a lot of work going on the back-end! Most importantly moving from the Java interface to native HTML5 <audio> tag (as Java isn’t supported in the Chrome Webstore). Although this sounds like a simple task, there’s a lot of steps involved; hopefully this will save someone else a bit of trouble!

Generating your own soundfont files;

• JSMIDI will allow you to generate MIDI files with the MidiWriter package;

	var key = 0x45; // the note A4
	var noteEvents = [];
	Array.prototype.push.apply(noteEvents, MidiEvent.createNote(key));
	var track = new MidiTrack({ events: noteEvents});
	var song  = MidiWriter({ tracks: [track] });
	console.log(song.b64);

• Saving the MIDI files to disk; File Writer API allows you to save those generated MIDI files to your hard-disk, or, alternatively (and a bit more simple in terms of programming), you could POST the base64 from an embedded <iframe> to .PHP, and write to the file-system;

	var iframe = document.createElement("iframe");
	iframe.src = "index.php?midi=" + (song.b64) + "&key=" + key;
	document.body.appendChild(iframe);

if ($_REQUEST['midi']) {
	$myFile = "./midi/".$_REQUEST['key'].".mid";
	$fh = fopen($myFile, "w") or die("can't open file");
	fwrite($fh, base64_decode(str_replace(' ','+',$_REQUEST['midi'])));
	fclose($fh);
	return;
}

• Getting out of MIDI format; At this point, we have a bunch of MIDI files. We need to eventually get these MIDI’s -> OGG format, by mapping it to a high-quality SoundFont;
  • Older versions of iTunes allows you to batch convert from MIDI’s -> MP4′s. That was very nice feature that seems to have disappeared…
  • Online app, such as SolMire, allow you to convert from MIDI’s -> MP3′s and other formats, one at a time. I especially like that SolMire allows you to choose the desired SoundFont to use on the .MIDI.
  • MIDI2MP3 is a command line application available for Window and Mac OSX that enables you to use specific SoundFonts in your encodings, and allows you to use the command line… and therefore the ability for batch MIDI -> WAV conversion! FluidSynth Soundfont GM is a good .SF2 file to get you started
• Getting into the OGG format;
  • Switch (for Mac) allows you to convert from WAV’s, MP4′s, and MP3′s -> OGG’s.
  • oggenc from Vorbis, allows you do batch conversion of WAV’s -> OGG’s using a bash script. The calls are like this:
    •  ./oggenc -m 64 -M 128 audio.wav
• Converting the OGG’s -> base64, and storing them in .js or .jgz file(s):
  • Read this amazing Tutorial by the Grinning Gecko!

#!/bin/bash

# gzip     - http://www.gzip.org/
# base64   - http://www.fourmilab.ch/webtools/base64/
# oggenc   - http://www.rarewares.org/ogg-oggenc.php
# midi2mp3 - http://www.audiosoftstore.com/downloads.html

# from MIDI to WAV to OGG to JS to JGZ, and beyond!

find ./directory -name '*.mid' -print0 | while read -d $'\0' file
	do
		# from MIDI to WAV
		./inc/midi2mp3 $file -sf ./sf2/FluidSynth_1.43.sf2 -e wave
		# from WAV to OGG
		./inc/oggenc -m 64 -M 128 $file.wav
		# from OGG to base64 embedded in Javascript
		echo "if (typeof(Soundfont) === 'undefined') Soundfont = {};" > $file.js
		echo "Soundfont['`basename $file`'] = 'data:audio/mpeg;base64,`base64 -i $file.ogg -o -`';" >> $file.js
		# gzipped version
		gzip $file.js -c > $file.jgz
	done