What's new

Welcome to the forum 👋, Visitor

To access the forum content and all our services, you must register or log in to the forum. Becoming a member of the forum is completely free.

Trying to create a piano effect with HTML

Nitish

Junior Member
Joined
Jun 1, 2013
Messages
1
Reaction score
0
HTML Coins
0
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 :)
 
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.
 
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.
 

Theme customization system

You can customize some areas of the forum theme from this menu.

  • Wide/Narrow view

    You can control a structure that you can use to use your theme wide or narrow.

    Grid view forum list

    You can control the layout of the forum list in a grid or ordinary listing style structure.

    Picture grid mode

    You can control the structure where you can open/close images in the grid forum list.

    Close sidebar

    You can get rid of the crowded view in the forum by closing the sidebar.

    Fixed sidebar

    You can make it more useful and easier to access by pinning the sidebar.

    Close radius

    You can use the radius at the corners of the blocks according to your taste by closing/opening it.

  • Choose the color combination that reflects your taste
    Background images
    Color gradient backgrounds
Back