Virtual Piano Chords and Scales as a jQuery plugin

Dev

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!

More About the Author

Javod Khalaj

Solutions 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 →

Subscribe to our newsletter

  • I understand that InterWorks will use the data provided for the purpose of communication and the administration my request. InterWorks will never disclose or sell any personal data except where required to do so by law. Finally, I understand that future communications related topics and events may be sent from InterWorks, but I can opt-out at any time.
  • This field is for validation purposes and should be left unchanged.

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