Simple Piano

Using HTML, CSS and Javascript, we can create a very simple piano application that will display the name of a note on the piano as the mouse hovers over it. In HTML we will need to create divs for each individual note, as well as a main div which will encompass all the notes. I have also created a separate div which will be used to display the name of the notes as we hover over them.

In this application, Javascript is used for event handling. We will use the 'onmouseover' event handler in order to detect when the mouse is hovered over a note. When this event is triggered we will call a function which will output the value of the note into our display div.

You can the view pseudo-code and download the application from here: http://tkurian.github.com/A.Little.Code.Music/

That's pretty much all there is to it. Here is what the finished product of our application looks like:

                                                                                                                            Back   |   Next