Color Piano Theory
September 01, 2010Michael Deal
- http://mudcu.be/
- Location:
- Portland OR, USA
From the Author:
Color Piano Theory is an educational application that utilizes colors in teaching piano theory. CPT ties together chords, scales, inversions, octaves, and key signatures.
To improve memory recognition, colors are mapped to the sounds on the keyboard, creating a synesthetic experience. By giving information multiple associations; we're giving the brain multiple “pathways” to locate the information. CPT provides memory recognition triangulation by combining: sound (measured in hz), color (in RGB), and space (the XY coordinate of key on the keyboard).
FEATURES:
- Drag & Drop MIDI files into the browser.
- Nice collection of Classical MIDI files.
- Steinway grand piano.
- Two view modes; watch notes falling (postview), or watch notes before they happen (preview).
INTERACT:
- MouseWheel to skip through a song.
- Spacebar to toggle pause/play.
- ShiftKey to toggle Chord lock with note combination.
- Play songs with your keyboard! The black keys are the home-row, and the numeric keys; the white keys are all the others :)
Technology:
HTML5
Comments
I was so excited when I found this in Chrome store. I installed it but it doesn't work. The keys do move when I hit play but no sound id produced. What's wrong? I don't know what to do.
Reply to this commentDear Michael Deal! I was really surprised to see such a clever and helpful software running in the browser. Congratulations for that great job! I’ve also created a freeware for musicians where you can even record chord sequences & play them back in different styles etc. It uses different colors for the notes, too – sorted by the degree of relationship that means by the circle of fifth. It’s on www.slidepiano.ch.vu and shows two fretboards and sheet music, too. What do you think about it? It’s my desire to get it running not only on Windows but also on tablets, smartphones (for smaller screens I developed the ChordGuide) and Macs, but I don’t have the knowledge of porting that. The best way to serve all the platforms would be HTML5 (flash doesn’t run on iPads), but is that possible by now with all the MIDI sounds, recording, tempo etc.? I think my SlidePiano or ChordGuide would complement your Color Piano in a good way. If you’re interested in my ideas to create a browser based program or to expand your Color Piano with my ideas, then let me know.
Reply to this commentI can drop different midi files on the screen but none of them will play? Am i doing something wrong?
Reply to this commentHmm... could you try it again, and look in the console to see whether an error pops up? I'm imagining it could be that the MIDI is very long?... in which case, there is a bug where very long files aren't working (I need to do some smart caching-- will implement soon).
Reply to this commentHello Michael! I was wondering, how did you make this? LOL i know that's a tough question, but I would just like to ask where did you get your sounds, your interactive piano, (did you design it in Visual Basic?) and everything? Did you code everything or is this an object oriented program? We're deciding to make a second voice generator for our thesis and using a piano like this for the user input. :)
Reply to this commentI'm not entirely sure what the easiest way to go about creating this would be... I know it took me a long time to develop, but a lot of that time was learning about music theory and creating the sound-interface. To just create a keyboard for input, and tie into a preexisting library (like the MIDIPlugin or MIDIBridge) should only take a few days time. Let me know whether you need more information!
Reply to this commentSorry for the late response. I'm not entirely sure what library to recommend for C++, I hope you found what you're looking for!
where do you get you pre existing libraries? are they freeware?
We're researching some open source piano software that uses MIDI, and we could not find any that we could understand. We're planning on using expression blend for our interface, and code it in c#. Will the soundbank you suggested work in any language and not just in Java? You see, we do not know really where to start. Hahaha!
I developed 95% of the code using the BBEdit text editor, this is who most of my projects are built. The MIDI Soundbanks are tied in using Java, which was programmed using XCode. There is a fallback, for users who don't have Java enabled, that uses Flash and the SoundManager2. If that fallback doesn't work, it ties into the AUDIO tag. By using multiple fallbacks, a larger audience is supported.
Reply to this commentI having difficulty. When i launched it, there was no volume and i checked my speakers and they are perfectly fine.
Reply to this commentWhat operating system, and version are you running?
Reply to this commentNow includes Javascript MIDI-reading support via Matt West's well-written jasmid project, and a large collection of royalty free classical piano pieces via Disklavier World. Many thanks to both! Watch as your computer plays classical music pieces for you on the piano.
Reply to this commentdoes this have a down time? sometimes its working, and sometimes journals project ome lab appears on the upper right side and i cant do anything :(
Reply to this commentI've been tweaking the piano a bit recently, if you clear-cache and hit "reload" does it work? It could be you have some caching of the old code. Otherwise, please let me know you're OS / Browser, and I'll take a look.
Reply to this commentJust figured out that Java does it's own caching, and it's difficult to clear. The best way to get the message that a new version has been posted is to rename the file. Next time you visit the website, hopefully it works for you :)
Added in Flash support via SoundManager2 plugin, when Java is not supported. It's a bit clunky (need to build a channel-mixer with a finite number of simultaneously playing notes), but gives you a better experience (and doesn't try loading Java, unless it's installed–in which case, it must be booted in order to check whether a sound-font is installed on your system). If you would like to default to Flash audio, use the #flash in the URL on-boot.
Reply to this commentin making softwares like this, or interactive piano tutorials, what programming language is the most proper? is c++ or c# okay?
Reply to this commentC++ and C# would both be great languages to create something like this, as long as those languages are your desired language to work with. They are both capable of creating dynamic MIDI.
Hello Michael, thank you for this software. I was wondering, how long did you make this?
Reply to this commentIt's hard to say... I can say, most of the time invested into this project has been research into how to make the application a feasible web-app: How to get MIDI working in the browser (I've spent over a week on this issue alone... [this was/is the largest barrier of entry into a dynamic music application]), including options for dynamically generating sound in the browser (dynamic WAVs/MIDI... these never panned out as "workable" solutions), creating "soundfonts" using the HTML5 audio tag, and so on...
Reply to this commentFeel free to plug into MIDPlugin for audio support: https://github.com/mudx/MIDIPlugin
Creating a piano w/ chords and scales mapped to it is surprisingly fun to do! I think it would be a great feature for you to do for your thesis.
oooh. we were considering this to be a feature for our thesis but much much simpler. just teach beginners basic chords and chords progression. we aren't going to make it available on web, so do you think it would take as much effort?
Past that, researching chord/scale/inversions construction (this project was created to help me learn these things ;), the use of color and music, and how we relate to it... It's been a long process!
This is a great, fun extension, but it would be even better if the note corresponded with their actual values. I've tried on a few different computers and it seems that the whole scale is shifted down. For instance, the black key that should be the A# below middle C is playing the note that is middle C (a frequency of ~261.6 Hz). Other MIDI-generating programs on my PC don't have this problem.
Reply to this commentApologies, I changed the way the MIDIPlugin works, and forgot to update the Javascript code. Fixed this bug, thank you for reporting!
Reply to this commentA hugely belated thank you!
Como puedo ponerlo en mi perfil me gustaria ponerlo para que no se vea sin gracia mi perfil y si fuera mas cristiano mejor
Reply to this commentMe gusta este del piano
Reply to this commentnothing
Reply to this commentNo sound for me. Google Chrome 8.0.552.224 stable, running Ubuntu 10.10 on an Acer Aspire 5535.
Reply to this commentSorry, it posted twice. I must learn not to click more than once, there is a delay between clicking the button and the post being posted...
Reply to this commentAWESOME
Reply to this commentissssoo e muito legal
Reply to this commentmuito neh
Reply to this commentshow me how to opperate this program
Reply to this commentghfufjnvhjgftg,jbvhjktu
Reply to this commentCompletely crashes my Ubuntu-10.04 computer... in firefox. Could be ubuntu, could be my computer. Who knows?
Reply to this commentI'm working on an HTML5 solution. It's very hard to get dynamic sound working in the browser, there really aren't many workable solutions out there. When the MIDIPlugin works, it's amazing... otherwise, it can be a pain... :p
Reply to this commentSorry, I can't get this to work on Mac OS X with latest Chrome. It's just silent. I did download soundfont but can't figure out where to put it?
Reply to this commentThe standalone soundfont is Windows-only. OSX should ship with a soundfont installed - unless you're on an older version of OSX. If you have an older version of OSX a free solution to getting the MIDI working might be upgrading your version of Java: www.java.com/getjava/
Thank you for your bug-report. Please provide me with the OSX version you're running for me narrow in on the issue.
Reply to this commentquero meu orkut
Reply to this commentje ne comprend pas ,?comment
Reply to this commentsong video game etc,
Reply to this commentwhat goes around comes around
Reply to this commentThank you, you are great!
PS. My wife is also grateful.
All our Best wishes Fiedelfritz and Mili Vanilli
Reply to this commentThank you very much for this fine piece of software! My suggestion: could you please add at the end of a scale the octave of the first note. Every time I hear one of the scales I miss the final note (the octave), and my wife feels the same.
Thank you Fiedelfritz
Reply to this commentGood idea :) Just updated Color Piano. Thank you for your recommendation.
Reply to this commentNeat! Works flawlessly! [Chrome 6.0.472.62 beta, Ubuntu 10.04]
Reply to this commentNo se escucha nada.
Reply to this commentgfyhkgmngfry
Reply to this commentMichael, thank you for creating and sharing the piano!
Reply to this commentWow - this is actually pretty helpful - takes a little while to figure everything out, but quite nice. Good work.
Reply to this commentlegal
Reply to this commentThe piano may require a soundbank, just download it from the java website on the link provided, and drag it in the audio folder, if you don't allready have a sound bank file there, you will probably need administrative permission though
Reply to this commentEstou instalando.
Reply to this commentI can't hear anything in any of the demos that are supposed to have sound. Am I doing wrong? D:
Reply to this commentTurns out something happened to my browser. It works fine after restart o.O
Reply to this commentGuess it could be really cool, but I can't hear anything. Do I need a Mac or some plug-in?
Reply to this commentYup -- some operating systems require additional plugins be installed. The demo should provide the links -- are they not showing up? See this article for more information on MIDI playback in the browser: http://tinyurl.com/2e2sb76
Reply to this commentThe 6add9 chords are wrong. It gives you the notes that make the major chord and then the octave above, for example, C6add9 greets me with C, E, G, C instead of C, E, G, A, D.
Either way, impressive tool, and beneficial I guess to those struggling to learn :) good work
Reply to this commentWorked out your error :) in your Piano.Chords.js file line 15 should be '6add9':[0,4,7,9,14], instead of '6add9':[0,4,7,12],
:D happy bug-fixing :D
Reply to this commentFixed, many thanks!
Thats a great tool.
It also pointed out to me that I can access general midi sounds in this way via Java. I had no idea. Great work.
The inclusion of synaesthesia from famous people is a nice touch.
It would be nice to click a key once and the note hold longer. I think its a sustain pedal on a piano. That effect would be nice
Reply to this commentCurrently, when you click a keyboard key, or click down on your mouse and hold, the sustain is activated. Are you recommending having a separate key (for instance SHIFT) that functions as the sustain?
Reply to this commentAbility to save tracks possible? The sound potential here is amazing!
Reply to this commentIt can be done in some browsers natively -- as long as the browser has the ability to initial a binary data stream -- which this support, you can initiate a download of a generated .MIDI file. If binary data streams are not supported by the browser natively, using Java to write the files is another option.
Reply to this commentgorgeous! very very impressive work...
Reply to this commentyay im first!
Reply to this comment