<html> <head> <title>Music Transposer</TITLE> <style> .h { font-family:arial; font-size:19pt; text-align:center; color:aquamarine; background-Color:navy; } .tt { background-Color:silver; } </style> <script language=javascript> ////////////////////////////////////////////// function doTranspose() { var nKey1=findNote(txtKey.value); var nKey2=findNote(txtTranspose.value); var sw; var i; var n; var nv; var nd; // number of step difference between keys if (nKey1<nKey2) nv=nKey2-nKey1; else nv=nKey1-nKey2; nd=nKey1-nKey2; if (nd==1 || nd==-1) sw=" Step"; else sw=" Steps"; if (nd<0) txtResults.innerHTML=(-nd)+sw+" Up"; else txtResults.innerHTML=(-nd)+sw+" Down"; for (i=1;i<=16;i++) // 16 max notes to transpose { sw=document.getElementById("txtN"+i).value; if (sw!="") { n=findNote(sw); n+=nv; if (n<0) n+=12; // wrapping incremented/decremented note index around so it lies between 0 and 11 if (n>11) n-=12; // 0 = C and 11 = B document.getElementById("txtT"+i).value=getNote(n); } } } /////////////////////////////////////////// function findNote(sNote) { switch(sNote) { case "C": return 0; case "C#": return 1; case "Db": return 1; case "D": return 2; case "D#": return 3; case "Eb": return 3; case "E": return 4; case "F": return 5; case "F#": return 6; case "Gb": return 6; case "G": return 7; case "G#": return 8; case "Ab": return 8; case "A": return 9; case "A#": return 10; case "Bb": return 10; case "B": return 11; } alert("Invalid Note Syntax -- "+sNote); } //////////////////////////////////////////// function getNote(n) { switch(n) { case 0: return "C"; case 1: return "C#/Db"; case 2: return "D"; case 3: return "D#/Eb"; case 4: return "E"; case 5: return "F"; case 6: return "F#/Gb"; case 7: return "G"; case 8: return "G#/Ab"; case 9: return "A"; case 10: return "A#/Bb"; case 11: return "B"; } alert("Invalid Note Index -- "+n); } ////////////////////////////////////////// function noteKeyDown(e) { var keyNum,keyChar; var ctrl=window.event.srcElement; if (window.event) // figure out the keystroke { keyNum=e.keyCode; } else { if (e.which) keyNum=e.which; else alert("keydown event handler cannot determine keydown value"); } keyChar=String.fromCharCode(keyNum); if (ctrl.value.length==0) { keyChar=keyChar.toUpperCase(); // uppercase note ctrl.value=keyChar; return false; // event handled } if (ctrl.value.length==1) { keyChar=keyChar.toLowerCase(); if (keyChar=='b') { switch(ctrl.value) { case 'D': case 'E': case 'G': case 'A': case 'B': { ctrl.value+=keyChar; return false; } // append the b } } if (keyChar=='#') { switch(ctrl.value) { case 'C': case 'D': case 'F': case 'G': case 'A': { ctrl.value+=keyChar; return false; } // append the # } } } return false; } //////////////////////////////////////////////// function doClearAll() { var i; for(i=1;i<=16;i++) { document.getElementById("txtN"+i).value=""; document.getElementById("txtT"+i).value=""; } txtKey.value=""; txtTranspose.value=""; txtResults.innerHTML=""; } </script> </head> <body> <table> <tr> <td></td> <td class=h>j&</td><td class=h>j&</td><td class=h>k&</td><td class=h>j&</td><td> </td><td class=h>k&</td><td class=h>j&</td><td class=h>j&</td><td class=h>j&</td> <td></td> <td class=h>j&</td><td class=h>k&</td><td class=h>j&</td><td class=h>j&</td><td> </td><td class=h>j&</td><td class=h>j&</td><td class=h>k&</td><td class=h>j&</td> </tr> <tr> <td align=center>Key</td> <td align=center>1</td> <td align=center>2</td> <td align=center>3</td> <td align=center>4</td> <td></td> <td align=center>5</td> <td align=center>6</td> <td align=center>7</td> <td align=center>8</td> <td></td> <td align=center>9</td> <td align=center>10</td> <td align=center>11</td> <td align=center>12</td> <td></td> <td align=center>13</td> <td align=center>14</td> <td align=center>15</td> <td align=center>16</td> </tr> <tr> <td><input type=text size=5 onkeypress='return noteKeyDown(event);' id=txtKey></td> <td><input type=text size=5 onkeypress='return noteKeyDown(event);' id=txtN1></td> <td><input type=text size=5 onkeypress='return noteKeyDown(event);' id=txtN2></td> <td><input type=text size=5 onkeypress='return noteKeyDown(event);' id=txtN3></td> <td><input type=text size=5 onkeypress='return noteKeyDown(event);' id=txtN4></td> <td></td> <td><input type=text size=5 onkeypress='return noteKeyDown(event);' id=txtN5></td> <td><input type=text size=5 onkeypress='return noteKeyDown(event);' id=txtN6></td> <td><input type=text size=5 onkeypress='return noteKeyDown(event);' id=txtN7></td> <td><input type=text size=5 onkeypress='noteKeyDown(event);' id=txtN8></td> <td></td> <td><input type=text size=5 onkeypress='return noteKeyDown(event);' id=txtN9></td> <td><input type=text size=5 onkeypress='return noteKeyDown(event);' id=txtN10></td> <td><input type=text size=5 onkeypress='return noteKeyDown(event);' id=txtN11></td> <td><input type=text size=5 onkeypress='return noteKeyDown(event);' id=txtN12></td> <td></td> <td><input type=text size=5 onkeypress='return noteKeyDown(event);' id=txtN13></td> <td><input type=text size=5 onkeypress='return noteKeyDown(event);' id=txtN14></td> <td><input type=text size=5 onkeypress='return noteKeyDown(event);' id=txtN15></td> <td><input type=text size=5 onkeypress='return noteKeyDown(event);' id=txtN16></td> </tr> <tr> <td><input type=text size=5 onkeypress='return noteKeyDown(event);' id=txtTranspose></td> <td><input type=text size=5 READONLY CLASS=tt id=txtT1></td> <td><input type=text size=5 READONLY CLASS=tt id=txtT2></td> <td><input type=text size=5 READONLY CLASS=tt id=txtT3></td> <td><input type=text size=5 READONLY CLASS=tt id=txtT4></td> <td></td> <td><input type=text size=5 READONLY CLASS=tt id=txtT5></td> <td><input type=text size=5 READONLY CLASS=tt id=txtT6></td> <td><input type=text size=5 READONLY CLASS=tt id=txtT7></td> <td><input type=text size=5 READONLY CLASS=tt id=txtT8></td> <td></td> <td><input type=text size=5 READONLY CLASS=tt id=txtT9></td> <td><input type=text size=5 READONLY CLASS=tt id=txtT10></td> <td><input type=text size=5 READONLY CLASS=tt id=txtT11></td> <td><input type=text size=5 READONLY CLASS=tt id=txtT12></td> <td></td> <td><input type=text size=5 READONLY CLASS=tt id=txtT13></td> <td><input type=text size=5 READONLY CLASS=tt id=txtT14></td> <td><input type=text size=5 READONLY CLASS=tt id=txtT15></td> <td><input type=text size=5 READONLY CLASS=tt id=txtT16></td> </tr> </table> <br> <table> <tr> <td valign=top><input type=button value="Transpose" onclick="doTranspose();"></td> <td valign=top><input type=button value="Clear All" onclick="doClearAll();"></td> <td valign=top>&nbsp;&nbsp;<span id=txtResults></span></td> </tr> </table> <br> <br> 2012 Brian L Hughes </body> </html>