Piano Chord Calculator

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).

I was originally asked to write this script back in 2006 not long after I first started writing for About.com as their JavaScript 'guide'. The music education guide Espie Estrella had seen piano chord calculators elsewhere on the web and decided she wanted one for her site and asked if I would write it for her. I would like to thank her for making this script possible as it was her testing that made sure that this script produces the desired results.

The only scripts that I could find that performed this function at the time I originally set out to write my own version all used an HTML table and a number of images to create the piano keyboard and displayed a broken page if the JavaScript to work the script wasn't available. My original 2006 version of this script did away with the tables and the images and generated the entire content for the calculator from within JavaScript. It was also only a small fraction of the size of the JavaScript used for most of the alternatives even before you added on the size of all the images and HTML that those scripts used. This made may script much faster loading as well as giving those without JavaScript a slightly better experience by displaying a message that the calculator wasn't available rather than displaying a broken version.

This latest version of the script is almost as big a change from that original as it was from the other scripts earlier scripts that others had written. The script now uses more modern unobtrusive code that dramatically reduces the chance of it clashing with other scripts on the page. The script also now attaches to the page in a way that makes it much easier to provide whatever alternate content you want for those visitors who don't have JavaScript available. As your content for those without JavaScript simply goes inside the same tag that the calculator will display in you can place whatever you like there or leave it empty if you don't want those without JavaScript to even realise that the calculator is there. So if you already have a piano chord calculator on your web page you might consider replacing it with this one as it will most likely result in your page loading faster and will make modifying the rest of your page easier as you will have few possibilities of your changes clashing with this script.

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.

The Piano Chord Calculator requires JavaScript You either have JavaScript disabled or the browser you are using does not support JavaScript. Please use a JavaScript enabled browser to access this calculator.

There are three parts to adding this script to your page. The first is the HTML. You need a div tag with id="keybd" in the page at the point where you want this calculator to appear. You can place whatever HTML you like inside this tag and it will be displayed to any visitors who do not have JavaScript enabled. If they do have JavaScript in their browser then whatever you put in this tag will be removed from the page and the piano chord calculator inserted in its place. Here I have simply included a message letting people know that if they visit using a browser with JavaScript enabled that they will see the piano chord calculator.

<div id="keybd"><strong>The Piano Chord Calculator requires JavaScript</strong> You either have JavaScript disabled or the browser you are using does not support JavaScript. Please use a JavaScript enabled browser to access this calculator.</div>

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:


Finally the JavaScript that both generates the calculator and handles all of your visitor's interactions with the calculator. First add the following immediately before the </body> tag in your page:

<script type="text/javascript" src="piano.js"></script>

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.

go to top

FaceBook Follow
Twitter Follow