Trying to create a piano effect with HTML

[Nitish]

Hey,

I am trying to create a musical piano type of effect in HTML.

The effect resembles something like the slider on the homepage of the following website

http://www.middlebury.edu/#story438300

The effect I am trying to make will have a musical note attached to each of the bar but they bars will not slide like the Middlebury website.


The problem is I don't know where or how to begin.
Any help on this topic will be highly appreciated.

Thanks

 

[behappie]

I have an experience. My goal at the time was to make a workable piano. Once I’ve made the piano, I want to be able to build a database of playable songs, to be able to play along to. originally wanted to make each key clickable, so the note would play on click. Later, I found that clicking each key achieved a much slower play, and an un-realistic sound. So I switched it up and assigned each sound to an individual key press. This allowed for more complex melodies and a more realistic sound.
I did clickable keys, one problem I ran into very quickly is that keys are complex shapes. They fit around each other like puzzle pieces. In HTML and CSS, it’s easy to make squares and rectangles, but slightly harder to make more complex shapes. Since I wanted to have mouseover effects, I needed to have each key separate. Instead of trying to do simple rectangles and then figure out alignment and z-indexes, I went with a much harder, and unnecessary approach: svg polygons.

 

[behappie]

Since my first attempt at creating piano effect with HTML, I have made some more discoveries that have piloted my mastery of this effective tool. I have observed that most newbies wouldn't like to go through every detail of difficulties involved in being a starter.