Color Piano!

About

Color Piano is an educational application that utilizes colors in teaching piano theory, creating a visual interface for learning the keyboard; learn how to play songs on the piano without learning sheet-music! CPT ties together chords, scales, inversions, octaves, key signatures, and play-by-play examples of classical compositions.

Getting your feet wet with Color Piano;

- Drag & Drop MIDI files into your browser to view/play them in CPT. MIDIs that you Drag & Drop should be of Piano only (not multi-instrumentals).
- Configure the Piano to play slower to get started learning a new song, then slowly increase the speed as you get better. 
- Use your MouseWheel or the ScrollBar on the right to scroll through the song you're currently learning, and to go back and replay parts your having troubles with.

Why in color? Good question;

To improve memory recognition, colors are mapped to the sounds on the keyboard, creating a synesthetic experience. By picking a color-mapping that works best for you, these colors will give you a visual cue to the note you’re playing.

One way to memorize information is to give the information multiple associations; in turn giving the information multiple “pathways” for the brain to locate it. With color added to the mix, we are building a memory recognition triangulation:  sound (measured in hz), color (in RGB), and space (the XY coordinate of key on the keyboard).

Historic mapping of color to sound;

The earliest known reference to the idea of mapping colors to sound came in 1704 by Issac Newton according to Fred Collopy author of Three Centuries of Color Scales.

This leads me to a question brought to me recently, “Why do so many of these people associate ‘red’ with ‘C’, ‘orange’ with ‘D’, ‘yellow’ with ‘E’, ‘green’ with ‘F’ and so on?”  My best guess is many of these calculations were based on mappings to the rainbow, aka the visible spectrum;  where ’C’ in western music has been historically thought of as a grounding, base note, the color ‘red’ is the smallest frequency interval (or longest wavelength) in the rainbow.

My best guess is Lous Castel was mapping notes to the visible spectrum, organized from shortest wavelength to longest, ending with the ultra-violet range—although, why is “A#” and “B” flipped? Perhaps a sign of dyslexia? Alexander Schriabin declared that ”D#” sounds “steely with the glint of metal”, and ”E” sounds “pearly blue the shimmer of moonshine”, and who can argue with that?  What does sound look like to you?

VERSION

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.