Years and years ago I was trying to understand how chords and scales related to each other visually and mathematically. I came across a lot of informative posts, but by far the most helpful app I came across was a virtual piano chord/scale creator, by Colm MácCarthaigh

Unfortunately, I didn’t see this script on his current website, though the old script, and some variations can be found scattered and praised across the internet.

Looking at this old script, I realized I wanted an updated version, something more easily implemented, and perhaps a little more aesthetically pleasing by today’s standards. With that in mind, and using Colm’s original idea as inspiration, I’ve created a Virtual Chord/Scale Finder as a jQuery plugin.

Demo | Download

// Simplest implementation of the plugin 
// This will place the app inside an html element with id="piano"  
    $('#piano').vpcf(); 

The above code will display the following:

If a chord is selected:

If a scale is selected:

There are multiple settings that can be made as defined:

// key_width and key_height sets the white keys in pixels.
// the black key height and width are automatically configured
    $('#piano').vpcf({
        number_of_keys: 70,
        key_width: 20,
        key_height: 100,
        chord_color: '#cccccc',
        scale_color:'#a3d1cb'
    });

This code will display something along the lines of:

I found this tool to be extremely helpful. Please let me know if there are any additions you’d like to see, or any mistakes to fix. Thanks!