Virtual Piano Chords and Scales as a jQuery plugin


Virtual Piano Chords and Scales as a jQuery plugin

by Javod Khalaj

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"  

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
        number_of_keys: 70,
        key_width: 20,
        key_height: 100,
        chord_color: '#cccccc',

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!

More About the Author

Javod Khalaj

Experience Architect
Cohort Analysis in Tableau: User Retention Given Only Created and Last Seen Dates Cohorts have been the go-to analysis for user retention for a while now, and Tableau has a great article on how to go about creating ...
Use DreamObjects to Backup Your MySQL Database (PHP Script) DreamObjects is DreamHost’s public cloud storage offering. It’s analogous to Amazon’s S3 offering, but slightly cheaper. The nice thing ...

See more from this author →

InterWorks uses cookies to allow us to better understand how the site is used. By continuing to use this site, you consent to this policy. Review Policy OK


Interworks GmbH
Ratinger Straße 9
40213 Düsseldorf
Geschäftsführer: Mel Stephenson

Telefon: +49 (0)211 5408 5301

Amtsgericht Düsseldorf HRB 79752
UstldNr: DE 313 353 072


Love our blog? You should see our emails. Sign up for our newsletter!