Color Piano 2.0

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!

Getting your feet wet with Color Piano (features);

  1. Drag & Drop MIDI files into your browserto view/play them in CPT. Helpful links;
  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 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.
  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 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.


  • 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


adminColor Piano 2.0
Share this post

Related Posts