MIDI.js (on github) ties together, and builds upon frameworks that bring MIDI generation to the browser. Combine MIDI.js with jasmid to create a web-radio MIDI stream similar to this demo… or with Three.js, Sparks.js, or GLSL to create Audio/visual experiments. Piano/guitar simulations, Drum machines, MIDI recording, and all kinds of certified funkitude are within your grasps (with a little elbow grease)!

Google Chrome is recommended for best listening experience—it has timing perfection. Firefox and Safari can both perform a bit more like the piano has been drinking, arrr.

Carpe beerum, and commandeer yer own copy!

The Jack the Tunafish artwork was graciously provided by Boni Deal; http://bonideal.com/

View a live demo of the github project; http://mudcu.be/midi-js/

Please report issues and bugs on Github or here, many thanks

How to use

• To change the song click on the “Edit Chords” button, this will make the <textarea> editable. You can paste guitar chords from websites such as Ultimate Guitar into this textarea, to hear what the chords that make up the song looks like on the neck of the guitar. The default data in the <textarea> is all the possible chords that the Guitar Player knows.
• Click on “Next” and “Previous” to play the next and previous chord in the song, or “Play” to play the current one again.
• Pluck the strings with your mouse.

This app is not affiliated with the Guitar Player magazine.

Getting your feet wet with Color Piano (features);

1. Drag & Drop MIDI files into your browser to view/play them in CPT. Helpful links;
• MIDI-Classics explains what MIDI is.
• eHow explains how-to convert Audio to MIDI.
• VGMusic provides MIDIs to an amazing assortment of video games!
• Freebyte has links to other collections of MIDI files.
• http://www.piano-midi.de/midi_files.htm
2. Seek to a specific location in the song, or replay parts your having troubles with;
• To do this, use your MouseWheel, or Scroll with two fingers using a Trackpad, or Use the Scrollbar on the right of the Piano.
3. Play the keyboard with your computers keyboard =)
• `1234567890-=  and  asdfghjkl;’  are all black keys.
• qweryuiop[]\ and zxcvbnm,./ are all white keys.
4. Configure the Piano to play slower when learning a new song, then slowly increase the speed as you get better!
• Step 1. Click on the Configure cog on the right of the Piano.
• Step 2. Use the range slider to configure the Speed.
5. Configure the Synesthesia, aka color-to-note mapping, that you relate with. My personal favorite is D.D. Jameson, but there are a lot of other interesting options created by people throughout history, starting with Issac Newton. To configure;
• Step 1. Click on the Configure cog on the right of the Piano.
• Step 2. Use the select-menu to configure the Synesthesia.
6. Configure whether you want to see the notes before they happen, or after they happen. Before is default for learning to play piano, after is a mode to be used strictly as a visualizer (much harder to learn from);
• Step 1. Click on the Configure cog on the right of the Piano.
• Step 2. Use the select-menu to configure the Visualization.

• 0.3.2–12/23/11
• Improved MIDI reproduction.
• 0.3.0–12/18/11
• Speed controls, and ability to scroll through midi.
• 0.2.9–12/17/11
• Steinway grand piano synth.
• 0.2.8–12/11/11
• Tie into Web Audio API for more accurate playback in Chrome.
• Tie into localStorage to save settings.
• 0.2.3–12/10/11
• Preview notes before they happen.
• 0.2.0–12/6/11
• Using base64 soundfonts.
• Now displays all 88-keys of a standard piano.
• Watch notes falling towards the keys before the note plays!
• 0.1.0–11/27/11
• HTML5 <audio> is used for sound-output.
• Color Piano Theory is available on the Chrome Webstore.
• pre-alpha
• MIDI-reading support via Matt West‘s very kindly provided jasmid project.
• Royalty free classical piano pieces from Disklavier World.
• http://mudcu.be/journal/2011/01/color-piano-theory/
• http://mudcu.be/journal/2007/03/piano-theory-widget/

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

BTG allows you to quickly produce .zip thumbnail packages;

• Drag & Drop images into the browser.
• Tug on the images to resize them, or enter a specific width & height.
• Crop images “to fit”, or “to edges”, or not at all.
• Center the image horizontally & vertically, or not at all.
• Add a background color to your outputted images, or transparency.
• Generate batches of thumbnails in “JPEG” or “PNG” format.
• Special thanks to; JSZip, FileSaver, BlobBuilder, Downloadify and SWFObject!

Exciting news on ColRD.com! Today we’re announcing the public beta of Image DNA, available exclusively on the Chrome Webstore. Image DNA is an application that aides you with intelligent extraction of colors from images. The colors extracted are spread evenly across the humanly visible spectrum; so you’ll notice, for example, although there is not much blue in this picture (above), the popular colors extracted will be evenly spread throughout the blue/brown spectrum—this gives you a wider range of colors to select from, with less choices.

Features:

• Drag and Drop images into the browser for automatic extraction (FileReader), or enter a URL.
• Use the EyeDropper or Color Picker for manually selecting colors.
• Zoom and pan around image to find the perfect color.
• Breakdown of top 78 unique and simultaneously most reoccurring colors.
• Download your color palette for Illustrator, Photoshop, or GIMP.
• Share your palette on ColRD.com =)

One of our main missions at Portlandia Foods is to provide a healthier alternative in public spaces. Because when people don’t have a choice, shouldn’t the only choice be a good one? I feel that Portlandia Foods has simply reset the clock in regards to ketchup, that is to say, Portland Ketchup is probably what ketchup tasted like in the 1920s; there was no High Fructose Corn Syrup (HFCS), or Genetically Modified (GMO) tomatoes. At Portlandia Foods, we use only the highest quality organic ingredients, and work hard to get those ingredients as locally as possible. I have to admit, our ketchup is pretty tasty… those tomatoes deserve all the credit though!!

My mom designed this beautiful poster for the OMSI cafeteria See more of her work at BoniDeal.com