Piano Chord Calculator

2. Obtain the Script

Join the Discussion

Questions? Comments?

More of this Feature

Introduction

Drawing with CSS Multiple Values Multidimensional Arrays Testing Colours

The script for the piano calculator is in three parts. The first two parts are code that need to be copied into separate files tha are then linked into the head section of your web page. The first step is to select the code from the text box below (there is a highlight all button beneath it to make this easier) and copy it into a file called keybd.js.

// keyboard calculator
// copyright 6th April 2006, 2nd September 2006 by Stephen Chapman
// http://javascript.about.com/
//
// specifications and testing by Espie Estrella
// http://musiced.about.com/
//
// permission to use this Javascript on your web page is granted
// provided that all of the code in this script (including these
// comments) is used without any alteration
var topArray = ['wt w14 l','bl','wt w12','bl','wt w14','wt w14 l','bl','wt w12','bl','wt w12','bl','wt w14','wt w14 l','bl','wt w12','bl','wt w14','wt w14 l','bl','wt w12','bl','wt w12','bl','wt w14','wt w14 l','bl','wt w12','bl','wt w14','wt w14 l','bl','wt w12','bl','wt w12','bl','wt w14','lr1'];
var bottomArray = ['wb w20','','wb w23','','wb w19','wb w20','','wb w23','','wb w23','','wb w19','wb w20','','wb w23','','wb w19','wb w20','','wb w23','','wb w23','','wb w19','wb w20','','wb w23','','wb w19','wb w20','','wb w23','','wb w23','','wb w19','lr2'];
var notes = ['C','C# / Db','D','D# / Eb','E','F','F# / Gb','G','G# / Ab','A','A# / Bb','B / Cb'];
var disp = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'];
var keys = ['1,5,8','1,5,8,12','1,3,5,8,12','1,3,5,6,8,12','1,3,5,8,10,12','1,5,6,8,12','1,5,8,10,12','1,6,8,12','1,3,6,8,12','1,4,8','1,4,8,10','1,4,8,11','1,3,4,8,11','1,3,4,6,8,11','1,3,4,8,10,11','1,3,4,8','1,3,4,8,10','1,4,6,8,11','1,4,8,10,11','1,4,8,12','1,3,4,8,12','1,3,4,6,8,12','1,3,4,8,10,12','1,4,6,8,12','1,4,8,10,12','1,5,8,11','1,5,6,8,11','1,5,8,10,11','1,3,8','1,6,8','1,6,8,10','1,6,8,11','1,3,6,8,11'];
var keynames = ['Major','Major 7th','Major 9','Major 11','Major 13','Major 7th add 11','Major 7th add 13','Major 7th Sus4','Major 9 Sus4','Minor','Minor 6','Minor 7th','Minor 9','Minor 11','Minor 13','Minor add 9','Minor 6 add 9','Minor 7th add 11','Minor 7th add 13','Minor Major 7th','Minor Major 9','Minor Major 11','Minor Major 13','Minor Major 7th add 11','Minor Major 7th add 13','Dominant 7th','Dominant 7th add 11','Dominant 7th add 13','Sus 2','Sus 4','6sus4','7sus4','9sus4'];
var numcode = [['B1',0],['1',1],['#1',2],['B2',2],['2',3],['#2',4],['B3',4],['3',5],['#3',6],['B4',5],['4',6],['#4',7],['B5',7],['5',8],['#5',9],['B6',9],['6',10],['#6',11],['B7',11],['7',12],['#7',13],['Cb',0],['C',1],['C#',2],['Db',2],['D',3],['D#',4],['Eb',4],['E',5],['E#',6],['Fb',5],['F',6],['F#',7],['Gb',7],['G',8],['G#',9],['Ab',9],['A',10],['A#',11],['Bb',11],['B',12],['B#',13]];
document.getElementsByClassName = function(cl) {var retnode = [];var myclass = new RegExp('\\b'+cl+'\\b');var elem = this.getElementsByTagName('*');for (var i = 0; i < elem.length; i++) {var classes = elem[i].className;if (myclass.test(classes)) retnode.push(elem[i]);}return retnode;}; var inv = 0;function dispKeys() {var str = []; for (var i=0; i<3;i++) {for (var j=0;j<12;j++) {var cl = document.getElementById('kt'+ (i*12+j)).style.backgroundColor; if (cl != '' && cl != '#000000' && cl != '#ffffff' && cl != '#000' && cl != '#fff' && cl != 'rgb(0, 0, 0)' && cl != 'rgb(255, 255, 255)') str.push(disp[j]);}}document.getElementById('code').value = str.join(',');} function undo() {for (var i = clwt.length - 1; i >= 0; i--)clwt[i].style.backgroundColor = '#fff';for (var i = clwb.length - 1; i >= 0; i--)clwb[i].style.backgroundColor = '#fff';for (var i = clbl.length - 1; i >= 0; i--)clbl[i].style.backgroundColor = '#000';}function chg(k,c) {document.getElementById('kt'+k).style.backgroundColor = c;if(document.getElementById('kb'+k))document.getElementById('kb'+k).style.backgroundColor = c;dispKeys();}function setall(t,f,c) {undo(); var b = parseInt(t.value)-1;var a = f.value.split(','); if (inv >= a.length) inv = 0; for (var i=a.length -1; i >= 0; i--) {var k = b + parseInt(a[i]); if (inv > 0 && inv == i) k -= 12; chg(k,c);}}function decode(f,c) {undo(); g = f.value.toUpperCase(); var a = g.split(','); for (var i=a.length -1; i >= 0; i--) {for (var j = numcode.length - 1; j >= 0; j--) {if(a[i] == numcode[j][0]) chg(numcode[j][1]+11,c);}}}function start() {var divo = '<div class="';var divc = '"><\/div>';var draw = '<div class="clear">';var len = topArray.length;for (var i = 0; i < len; i++) {draw += divo + topArray[i] + '" id="kt' + i + '" onmouseover="chg(\''+i+'\',\'#ff0\')" onmouseout="undo()' + divc;}draw += '<\/div><div class="clear">';for (var i = 0; i < len; i++) {if (bottomArray[i] != '') draw += divo + bottomArray[i] + '" id="kb' + i + '" onmouseover="chg(\''+i+'\',\'#ff0\')" onmouseout="undo()' + divc;}draw += '<\/div><div class="clear"><\/div><form><div id="key"><select name="chord" size="12" onchange="inv=0;setall(this.form.chord,this.form.formula,\'#cfc\');">';len = notes.length;for (var i = 0; i < len; i++) {draw += '<option value="'+(12+i)+ '"';if (i == len-1) draw += ' selected="selected"';draw += '">'+notes[i]+'<\/option>';}draw += '<\/select><\/div><div id="chord"><select name="formula" size="10" onchange="inv=0;setall(this.form.chord,this.form.formula,\'#cfc\');">';len = keys.length;for (var i = 0; i < len; i++) {draw += '<option value="'+keys[i]+'"';if (i == 0) draw += ' selected="selected"';draw += '>'+keynames[i]+'<\/option>';}draw += '<\/select><div class="gap"><\/div><span class="indent"><input type="button" value=" Invert Chord " onclick="inv++;setall(this.form.chord,this.form.formula,\'#cfc\');" /><\/span><\/div><div id="formula"><label for="code">Formula:<br /><input type="text" size="20" name="code" id="code" \/><\/label><div class="gap"><\/div><span class="indent"><input type="button" value="Display" onclick="decode(this.form.code,\'#ccf\')" \/><\/span><div class="gap"><\/div><p class="small">Enter formula using a comma separated list of<br \/> <b>Numbers :<\/b><br \/>b1,1,#1,b2,2,...b7,7,#7<br \/>and\/or<br \/><b>Notes :<\/b><br \/>Cb,C,C#,Db,....Bb,B,B#<\/p><\/div><\/form>';document.getElementById('keybd').innerHTML = draw+'<div class="clear"><\/div><div class="small">Calculator provided by : <a href="http:\/\/javascript.about.com\/">http:\/\/javascript.about.com\/<\/a><\/div>';clwt = document.getElementsByClassName('wt');clwb = document.getElementsByClassName('wb');clbl = document.getElementsByClassName('bl');}

var pageLoaded = 0;
window.onload = function() {pageLoaded = 1;}
function loaded(i,f) {
if (document.getElementById &&
document.getElementById(i) != null) f();
else if (!pageLoaded) setTimeout('loaded(\''+i+'\','+f+')',100);
}
loaded('keybd',start);

Next select the code from the text box below and copy it into a file called keybd.css.

body, html {margin:0; padding:0;}
.clear {clear:both;height:1%;font-size:0;}
.l {border-left:1px solid #ccc;border-right:1px solid #fff;}
.lr1 {float:left; width:1px;height:60px;border-left:1px solid #ccc;}
.lr2 {float:left; width:1px;height:30px;border-left:1px solid #ccc;}
.wt {float:left; height:60px; background-color:#fff;border-top:1px solid #ccc}
.wb {float:left; height:30px; background-color:#fff;border-bottom:1px solid   #ccc; border-left:1px solid #ccc;border-right:1px solid #fff;}
.bl {float:left;width:11px; height:60px; background-color:#000;border:1px solid #ccc}
.w12 {width:9px;}
.w14 {width:12px;}
.w19 {width:17px;}
.w20 {width:18px;}
.w23 {width:20px;}
.gap {height:8px;}
.indent {margin-left:20px;}
.small {font-size:80%;}
#keybd {width:100%;padding:2px;margin:5px;border-top:1px solid #000;border-bottom:1px solid #000;}
#key {float:left;margin-top:10px;}
#chord {float:left;margin-top:10px;width:160px;}
#formula {float:left;margin-top:10px;padding:0 10px;width:160px;margin-left:5px;border-left:1px solid #000;}

You next attach these into the head section of your page.

The final step is to insert the following code into the body of your web page where you want the keyboard chord calculator to appear:

<div id="keybd"></div>
<noscript><div align="center"><b>The Piano Chord Calculator requires Javascript</b>
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></noscript>

Guide since 2004

Stephen Chapman
JavaScript Guide

Sign up for my Newsletter

About.com Special Features

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

Connect Your Home Computers

Easy ways to connect two computers for networking purposes. More >

JavaScript

Piano Chord Calculator

2. Obtain the Script

Join the Discussion

More of this Feature

Related Articles