Related Posts
It’s time to start going out of my comfort zone and pursuing music a bit more! This is a song that I wrote earlier this year for the harpsichord and dulcimer, performed on the electric keyboard, and mastered in Logic. It’s dedicated to my sister, who is living in Tanzania the next few years teaching elementary school. It’s already tomorrow where she lives.
http://soundcloud.com/michael-deal/harpcimer
HACKED BY SudoX — HACK A NICE DAY.
Learn how to play piano songs by watching notes fall towards the keyboard as color-blocks; similar to how Guitar Hero works, but with a real instrument. Color piano Theory (CPT) ties together chords, scales, inversions, octaves, key signatures, and play-by-play examples of classical compositions, getting you started with playing piano the easy way =)
Color Piano is free to use, please share!
- To download a copy visit the Chrome Webstore
- View on the web @ http://mudcu.be/piano/
Getting your feet wet with Color Piano (features);
- Drag & Drop MIDI files into your browserto 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
- 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.
- Play the keyboard with your computers keyboard =)
- `1234567890-= and asdfghjkl;’ are all black keys.
- qweryuiop[] and zxcvbnm,./ are all white keys.
- Configure the Piano to play slowerwhen 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.
- 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.
- Configure whether you want to see the notes before they happen, or afterthey 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.
UPDATES
- 2.1—1/6/13
- Download links on MIDIs.
- Circle of Fifths Synesthesia modes.
- Cache MIDIs in FileSystem for quicker loading.
- 2.0.0–9/22/12
- 2,000 MIDI songs from Disklavier.
- MIDI-browser w/ search engine.
- 1.5.1–4/23/12
- Previous + next song buttons.
- Faster rendering. Fix bugs in Chrome 18.
- Play + Theory modes.
- 1.4.2–12/23/11
- Load MIDI from remote URls in configure pane.
- Improved MIDI reproduction.
- 1.3.8–12/18/11
- Speed controls, and ability to scroll through midi.
- Steinway grand piano synth.
- 1.3.0–12/11/11
- Tie into Web Audio API for more accurate playback in Chrome.
- Tie into localStorage to save settings.
- Preview notes before they happen.
- 1.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!
- 1.1.0–11/27/11
- HTML5 <audio> is used for sound-output.
- Color Piano Theory is available on the Chrome Webstore.
- 1.0beta
- 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/
HACKED BY SudoX — HACK A NICE DAY.
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;
- 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