If you have a web site that teaches people how to play a keyboard instrument then this script will be a useful addition to your site. The script has a form at the bottom that allows a chord to be selected either by choosing it from the first two select lists or by entering the notes in either of two formats into the formula input field. The appropriate notes will then be highlighted on the keyboard that is displayed above the form so that they can see which keys to press to obtain that particular chord. There is also a button to invert the current chord (whatever that means - but then if you have a site where this calculator is appropriate then I am sure you already know what it means).
Here's a working copy of the complete script. Note that whatever keys are highlighted on the keyboard (through whatever means) will have the notes displayed in the input field in the form, so simply by hovering the mouse cursor over a key a novice can easily determine which note it is.
Next is the CSS. This script has quite a few classes and a small number of ids that need to be defined in your stylesheet in order for the script to work. Many of these are what handles the display of the keyboard and the highlighting of the appropriate keys while the remainder position the parts of the form. To do this you must first add the following statement into your page immediately before the </head> tag:
<link rel="stylesheet" href="piano.css" type="text/css"/>
Next you need to create a file called "piano.css" and copy the following into it:
Create a file called "piano.js" and copy the following into it and you will then have a fully functional piano chord calculator appear in your page:
This article written by Stephen Chapman, Felgall Pty Ltd.