javod.com
Sep
2012
09
Virtual Piano Chords and Scales as a jQuery plugin

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!

friday, 19th february

Kate


cool! very helpful script.
Though you should modify it to get data via json and place it on github ;)
 
your name: 
url: 
comment: 
  required: copy the following code to post
test