<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Piano Playing - RJM Programming - April, 2017 ... Thanks to http://openclipart.org (help with image) and http://www.mobilefish.com/services/image_map/image_map.php (help with map tag)</title>
<style>
margin { 0,0,0,0; }
</style>


<script type='text/javascript'>
var dnas=";";
var lasta=null;
var caboffrank=0, soo=0;
var pwhat='', prewhat='', four=4, five=5;
var anoctave=["C","D","E","F","G","A","B","C5"];
var oneoctave=["A","Bb","B","C","Db","D","Eb","E","F","Gb","G","Ab"];
var majorgaps=[2,2,1,2,2,2,1,0];
var minorgaps=[2,1,2,2,1,3,1,0];
var stype=location.search.split('type=')[1] ? ((location.search.split('type=')[1].split('&')[0])) : 'Scale';
var notespeed=location.search.split('speed=')[1] ? eval((location.search.split('speed=')[1].split('&')[0])) : 1000;
var numtogether=location.search.split('octaves=')[1] ? eval((location.search.split('octaves=')[1].split('&')[0])) : 1;
var numo=location.search.split('number=')[1] ? eval((location.search.split('number=')[1].split('&')[0])) : 1;
var minor=location.search.split('minor=')[1] ? ((location.search.split('minor=')[1].split('&')[0])) : '';
var major=location.search.split('major=')[1] ? ((location.search.split('major=')[1].split('&')[0])) : 'major';
var tonic=location.search.split('tonic=')[1] ? tmap(decodeURIComponent(location.search.split('tonic=')[1].split('&')[0])) : tmap('C');
var aleft=10;
var zoomx=1, zoomy=1, bigw=0, bigh=0;
var areas=[];
var rawurl="";
var rawhtml="";
var widths=[], heights=[];
var href=[], onclick=[], names=[];
var cmdf=" ";
var KEYDN_space = false;
var KEYDN_shift = false;
var KEYDN_ctrl = false;
var notediff=[0];
var inoted=0;
var stsarr=[];
var istsarr=0;
var cist='';
var whatx='';
var notdone=true;
var arectsleft=0, arectstop=0;

function dodely() {
var pianocmd=stsarr[istsarr];
istsarr++;
console.log(pianocmd);
//document.title=pianocmd + ' ' + document.title;
if (cist.indexOf(pianocmd) == -1) { eval(pianocmd); }
cist+=pianocmd;
}

function asifchord(basenoteid) {
var ip=0, ipthen=0, dely=10;
if (notediff[0] != 0) {
cist='';
stsarr=[];
istsarr=0;
for (ip=0; ip<areas.length; ip++) {
if (areas[ip].outerHTML.indexOf(basenoteid) != -1) {
console.log('base found for ' + basenoteid);
for (ipthen=0; ipthen<notediff.length; ipthen++) {
if (notediff[ipthen] != 0) {
console.log('' + areas.length + ' ip=' + ip + ' and notediff[' + ipthen + ']=' + notediff[ipthen] + ' leads to [] as ' + eval(eval('' + notediff[ipthen]) + ip));
if (areas[eval(eval('' + notediff[ipthen]) + ip)]) {
stsarr.push(areas[eval(eval('' + notediff[ipthen]) + ip)].outerHTML.split(' onclick="')[1].split('"')[0]);
setTimeout(dodely, dely);
dely+=10;
}
}
}
}
}
}
for (ip=0; ip<notediff.length; ip++) {
notediff[ip]=0;
}
KEYDN_space = false;
KEYDN_shift = false;
KEYDN_ctrl = false;
inoted=0;
}

function dodna() {
var hm=0,dna=dnas.split(";");
var was=dnas;
areas=document.getElementsByTagName('area');
for (var ihuh=0; ihuh<dna.length; ihuh++) {
if (dna[ihuh].indexOf(',') != -1) {
hm=eval(dna[ihuh].split(',')[1]);
if (eval(hm) == 1) {
document.getElementById(dna[ihuh].split(',')[0]).style.display='none';
document.getElementById(dna[ihuh].split(',')[0]).style.opacity=1.0;
document.getElementById(dna[ihuh].split(',')[0]).style.border='1px solid red';
dnas=dnas.replace(';' + dna[ihuh] + ';', ';');
} else if (eval(hm) > 1) {
document.getElementById(dna[ihuh].split(',')[0]).style.display='block';
//alert(dna[ihuh].split(',')[0] + ' ... ' + eval(0.1 * hm));
document.getElementById(dna[ihuh].split(',')[0]).style.opacity=eval(0.1 * hm);
if (eval(0.1 * hm) >= 1 && document.getElementById('divo_' + dna[ihuh].split(',')[0].replace(/^d/g,''))) {
if (('' + document.getElementById('divo_' + dna[ihuh].split(',')[0].replace(/^d/g,'')).style.zIndex).indexOf('-') == -1) {
document.getElementById('divo_' + dna[ihuh].split(',')[0].replace(/^d/g,'')).style.zIndex='-1';
}
}
if (eval(0.1 * hm) >= 1 && document.getElementById('divo' + dna[ihuh].split(',')[0].replace(/^d/g,''))) {
if (('' + document.getElementById('divo' + dna[ihuh].split(',')[0].replace(/^d/g,'')).style.zIndex).indexOf('-') == -1) {
document.getElementById('divo' + dna[ihuh].split(',')[0].replace(/^d/g,'')).style.zIndex='-1';
}
}
if (dna[ihuh].split(',')[0].indexOf('b') != -1) {
document.getElementById(dna[ihuh].split(',')[0]).style.border='1px solid blue';
} else {
document.getElementById(dna[ihuh].split(',')[0]).style.border='1px solid pink';
}
dnas=dnas.replace(';' + dna[ihuh] + ';', ';' + dna[ihuh].split(',')[0] + ',' + eval(-1 + hm) + ';');
}
}
}
//document.title=was + ' vs ' + dnas;
if (notdone) {
notdone=false;
areatodiv(1.0);
}
setTimeout(dodna,1000);
}

function res() {
console.log('here 0');
if (1 == 1 || navigator.userAgent.match(/Android|iPhone|iPad|iPod/i)) {
aleft=210;
atop=160;
lasta=null;
caboffrank=0;
soo=0;
pwhat='';
prewhat='';
four=4;
five=5;
anoctave=["C","D","E","F","G","A","B","C5"];
oneoctave=["A","Bb","B","C","Db","D","Eb","E","F","Gb","G","Ab"];
majorgaps=[2,2,1,2,2,2,1,0];
minorgaps=[2,1,2,2,1,3,1,0];
console.log('here 1');
stype=document.getElementById('type').value;
console.log('here 11');
notespeed=document.getElementById('speed').value;
console.log('here 111');
numtogether=document.getElementById('octaves').value;
console.log('here 1111');
numo=document.getElementById('number').value;
console.log('here 11111');
minor=document.getElementById('minor').value;
console.log('here 111111');
major=document.getElementById('major').value;
console.log('here 1111111');
tonic=tmap(document.getElementById('tonic').value);
if (tonic.trim() != '') {
console.log('here 11111117');
atstart();
console.log('here 11111118');
}
return false;
}
return true;
}

function ta(ota) {
ota.style.left="-1200px";
ota.style.top="-1200px";
if (document.getElementById('d' + ota.id)) {
document.getElementById('d' + ota.id).style.display='block';
document.getElementById('d' + ota.id).style.border='1px solid red';
document.getElementById('d' + ota.id).style.opacity=1.0;
if (dnas.indexOf(';' + 'd' + ota.id + ',') == -1) {
dnas+='d' + ota.id + ',10;';
} else {
var dnasb=dnas.split('d' + ota.id + ',')[1].split(';')[0];
dnas=dnas.replace('d' + ota.id + ',' + dnasb, 'd' + what.split("/")[eval(-1 + what.split("/").length)].split('.')[0] + ',10');
}
}
}

function anoctavepush(a,b,c,s) {
var one=0, two=0;
for (var ione=0;ione<a.length;ione++) {
if (a.substring(ione,eval(1 + ione)) >= '0' && a.substring(ione,eval(1 + ione)) <= '9') one=eval(a.substring(ione,eval(1 + ione)));
}
for (var itwo=0;itwo<b.length;itwo++) {
if (b.substring(itwo,eval(1 + itwo)) >= '0' && b.substring(itwo,eval(1 + itwo)) <= '9') two=eval(b.substring(itwo,eval(1 + itwo)));
}
// a=F4 should be bigger than b=Eb5 and we ended up with F4
// a=C7 should be bigger than b=B5 and we ended up with C7
if (eval(two) == eval(one)) {
if (a.substring(0,1) >= 'C' && b.substring(0,1) < 'C') {
anoctave.push(a.replace('' + one,'' + eval(1 + two)));
s='' + eval(1 + two);
} else if (a.substring(0,1) >= b.substring(0,1)) {
anoctave.push(a);
} else if (a.substring(0,1) < 'C') {
anoctave.push(a);
} else {
anoctave.push(a.replace('' + one,'' + eval(1 + two)));
s='' + eval(1 + two);
}
} else if (eval(one) > eval(1 + two)) {
anoctave.push(a.replace('' + one,'' + eval(1 + two)));
s='' + eval(1 + two);
} else if (eval(two) < eval(one)) {
if (a.substring(0,1) >= 'C' && b.substring(0,1) < 'C') {
anoctave.push(a);
} else if (a.substring(0,1) >= b.substring(0,1)) {
anoctave.push(a.replace('' + one,'' + eval(0 + two)));
s='' + eval(0 + two);
} else if (a.substring(0,1) < 'C' && b.substring(0,1) >= 'F') {
anoctave.push(a.replace('' + one,'' + eval(0 + two)));
s='' + eval(0 + two);
} else {
anoctave.push(a.replace('' + one,'' + eval(1 + two)));
s='' + eval(1 + two);
}
} else if (eval(two) > eval(one)) {
anoctave.push(a.replace('' + one,'' + eval(0 + two)));
s='' + eval(1 + two);
} else if (a.substring(0,1) >= 'C') {
anoctave.push(a);
} else {
anoctave.push(a.replace('' + one,'' + eval(0 + two)));
s='' + eval(1 + two);
}
//alert("a=" + a + " should be bigger than b=" + b + " and we ended up with " + anoctave[eval(-1 + anoctave.length)]);
return s;
}

function tmap(what) {
var endwhat='';
if (what.trim() != "") {
//alert(what);
var ofour=4,isoo=soo, suffix="", sofar=-1, postsuffix='';
var ourfour=4, ourfive=5;
if (Math.abs(numo) > 3 || (Math.abs(numo) == 3 && what.substring(0,1) != 'C')) {
ourfour=1;
suffix='1';
endwhat=what + suffix;
}
ofour=ourfour;
ourfive=eval(1 + ourfour);
if (what.indexOf('A#') != -1) what=what.replace('A#','Bb');
if (what.indexOf('G#') != -1) what=what.replace('G#','Ab');
if (what.indexOf('F#') != -1) what=what.replace('F#','Gb');
if (what.indexOf('C#') != -1) what=what.replace('C#','Db');
if (what.indexOf('D#') != -1) what=what.replace('D#','Eb');
//alert(what);
for (var ii=0; ii<oneoctave.length; ii++) {
if (what == oneoctave[ii]) {
isoo=ii;
//alert('ii=' + ii);
anoctave[0] = oneoctave[ii] + suffix;
//alert(anoctave[0]);
anoctave[7] = oneoctave[ii] + eval(ourfour + 1);
for (var iii=1; iii<=6; iii++) {
postsuffix='';
if (minor != '' || (document.URL.indexOf('minor=') != -1 && (document.URL.split('#')[0] + '&').indexOf('minor=&') == -1)) {
isoo=eval((isoo + minorgaps[eval( (-1 + iii) % 8 )]) % oneoctave.length);
if (oneoctave[isoo].substring(0,1) == 'C' && ourfour == ofour) suffix='' + eval(1 + ourfour);
if (oneoctave[isoo].substring(0,1) == 'C' && ourfour == ofour) ourfive=eval(2 + ourfour);
if (oneoctave[isoo].substring(0,1) == 'C' && ourfour == ofour) ourfour++;
if (what != 'Db' && oneoctave[isoo].substring(0,2) == 'Db' && ourfour == ofour) suffix='' + eval(1 + ourfour);
if (what != 'Db' && oneoctave[isoo].substring(0,2) == 'Db' && ourfour == ofour) ourfive=eval(2 + ourfour);
if (what != 'Db' && oneoctave[isoo].substring(0,2) == 'Db' && ourfour == ofour) ourfour++;
if (what != 'Db' && oneoctave[isoo].substring(0,1) == 'D' && anoctave[eval(-1 + iii)].substring(0,1) == 'B' && ourfour == ofour) suffix='' + eval(1 + ourfour);
if (what != 'Db' && oneoctave[isoo].substring(0,1) == 'D' && anoctave[eval(-1 + iii)].substring(0,1) == 'B' && ourfour == ofour) ourfive=eval(2 + ourfour);
if (what != 'Db' && oneoctave[isoo].substring(0,1) == 'D' && anoctave[eval(-1 + iii)].substring(0,1) == 'B' && ourfour == ofour) ourfour++;
if (stype.toLowerCase().replace('scale','') != '' && (iii == 1 || iii == 3 || iii == 5 || iii == 6)) postsuffix=' ';
if (iii >= 7) {
anoctave.push(oneoctave[isoo] + suffix + postsuffix);
} else {
anoctave[iii] = oneoctave[isoo] + suffix + postsuffix;
}
} else {
isoo=eval((isoo + majorgaps[eval( (-1 + iii) % 8 )]) % oneoctave.length);
if (oneoctave[isoo].substring(0,1) == 'C' && ourfour == ofour) suffix='' + eval(1 + ourfour);
if (oneoctave[isoo].substring(0,1) == 'C' && ourfour == ofour) ourfive=eval(2 + ourfour);
if (oneoctave[isoo].substring(0,1) == 'C' && ourfour == ofour) ourfour++;
if (what != 'Db' && oneoctave[isoo].substring(0,2) == 'Db' && ourfour == ofour) suffix='' + eval(1 + ourfour);
if (what != 'Db' && oneoctave[isoo].substring(0,2) == 'Db' && ourfour == ofour) ourfive=eval(2 + ourfour);
if (what != 'Db' && oneoctave[isoo].substring(0,2) == 'Db' && ourfour == ofour) ourfour++;
if (what != 'Db' && oneoctave[isoo].substring(0,1) == 'D' && anoctave[eval(-1 + iii)].substring(0,1) == 'B' && ourfour == ofour) suffix='' + eval(1 + ourfour);
if (what != 'Db' && oneoctave[isoo].substring(0,1) == 'D' && anoctave[eval(-1 + iii)].substring(0,1) == 'B' && ourfour == ofour) ourfive=eval(2 + ourfour);
if (what != 'Db' && oneoctave[isoo].substring(0,1) == 'D' && anoctave[eval(-1 + iii)].substring(0,1) == 'B' && ourfour == ofour) ourfour++;
if (stype.toLowerCase().replace('scale','') != '' && (iii == 1 || iii == 3 || iii == 5 || iii == 6)) postsuffix=' ';
if (iii >= 7) {
anoctave.push(oneoctave[isoo] + suffix + postsuffix);
} else {
anoctave[iii] = oneoctave[isoo] + suffix + postsuffix;
}
}
}
if (Math.abs(numo) > 1) {
var doonce=true;
//if (what.substring(0,2) == 'Eb') alert(776);
if (what == 'C' || (anoctave[eval(-1 + anoctave.length)].indexOf('D') == -1 && anoctave[eval(-1 + anoctave.length)].indexOf('Eb') == -1 && stype.toLowerCase() != 'scale')) {
// document.title=anoctave[eval(-1 + anoctave.length)];
ourfour++;
//if (what.substring(0,2) == 'Eb') alert(1776 + ' ' + anoctave[eval(-1 + anoctave.length)]);
}
suffix='' + eval(ourfour + 0);
//alert(what + ' ' + ourfour + ' ii=' + ii);
for (var jj=2; jj<=Math.abs(numo); jj++) {
isoo=ii;
doonce=true;
for (var jjj=1; jjj<=7; jjj++) {
postsuffix='';
if (minor != '' || (document.URL.indexOf('minor=') != -1 && (document.URL.split('#')[0] + '&').indexOf('minor=&') == -1)) {
isoo=eval((isoo + minorgaps[eval( (-1 + jjj) % 8 )]) % oneoctave.length);
} else {
isoo=eval((isoo + majorgaps[eval( (-1 + jjj) % 8 )]) % oneoctave.length);
}
//if (oneoctave[isoo].substring(0,1) == 'C') alert('here at C with ourfour=' + ourfour);
if (stype.toLowerCase().replace('scale','') != '' && (jjj == 1 || jjj == 3 || jjj == 5 || jjj == 6)) postsuffix=' ';
if (doonce && postsuffix == '') {
doonce=false;
if (oneoctave[isoo].substring(0,1) >= 'C' && anoctave[eval(-1 + anoctave.length)].substring(0,1) <= 'C' && eval(1 + ourfour) == ourfive) {
//if (what.substring(0,2) == 'Eb') alert(76);
ourfour++;
suffix='' + eval(ourfour + 0);
} //else {
//document.title=anoctave[eval(-1 + anoctave.length)];
//}
ourfive=eval(1 + ourfour);
} else if (postsuffix == '') {
if ((what == 'Db' && jjj == 7 && stype.toLowerCase() != 'scale') || (what == 'Eb' && jjj == 7 && stype.toLowerCase() != 'scale') || oneoctave[isoo].substring(0,1) == 'C') suffix='' + eval(1 + ourfour);
if ((what == 'Db' && jjj == 7 && stype.toLowerCase() != 'scale') || (what == 'Eb' && jjj == 7 && stype.toLowerCase() != 'scale') || oneoctave[isoo].substring(0,1) == 'C') ourfour++;
if ((what == 'Db' && jjj == 7 && stype.toLowerCase() != 'scale') || (what == 'Eb' && jjj == 7 && stype.toLowerCase() != 'scale') || oneoctave[isoo].substring(0,1) == 'C') ourfive=eval(1 + ourfour);
//if ((what != 'Db' || stype.toLowerCase() != 'scale') && oneoctave[isoo].substring(0,2) == 'Db' && anoctave[eval(-1 + anoctave.length)].substring(0,1) != 'C') suffix='' + eval(1 + ourfour);
//if ((what != 'Db' || stype.toLowerCase() != 'scale') && oneoctave[isoo].substring(0,2) == 'Db' && anoctave[eval(-1 + anoctave.length)].substring(0,1) != 'C') ourfour++;
//if ((what != 'Db' || stype.toLowerCase() != 'scale') && oneoctave[isoo].substring(0,2) == 'Db' && anoctave[eval(-1 + anoctave.length)].substring(0,1) != 'C') ourfive=eval(1 + ourfour);
}
//if (jjj == 7 && what == 'Eb') document.title='*' + what + anoctave[eval(-1 + anoctave.length)] + stype.toLowerCase() + oneoctave[isoo] + suffix + postsuffix + '*';
suffix=anoctavepush(oneoctave[isoo] + suffix + postsuffix,anoctave[eval(-1 + anoctave.length)],stype.toLowerCase(),suffix);
}
}
}
if (numo < 0) {
for (var kkk=eval(-2 + anoctave.length); kkk>=0; kkk--) {
anoctave.push(anoctave[kkk]);
}
}
}
}
if (stype.toLowerCase() == "chord") notespeed=12;
//alert(anoctave);
}
if (endwhat != '') return endwhat;
return what;
}

function atstart() {
var inu,ppwhat="";
if (pwhat == '' && prewhat == '') {
sofar=0;
pwhat=tonic; // 'C';
prewhat=tonic; // 'C';
if (numtogether > 1) {
for (inu=1; inu<numtogether; inu++) {
caboffrank=inu;
console.log('a');
play(prewhat.replace('4','').replace('5','').replace('0','').replace('1','').replace('2','').replace('3','').replace('6','').replace('7','') + eval((four + inu) % 8));
}
}
//alert(prewhat);
if (stype.toLowerCase() == "chord") caboffrank=sofar;
setTimeout(splay, 10);
setTimeout(atstart,notespeed);
sofar=1;
} else if (sofar == eval(-1 + anoctave.length)) { // pwhat == anoctave[eval(-1 + anoctave.length)]) {
pwhat='';
prewhat=anoctave[eval(-1 + anoctave.length)].trim(); //'C5';
sofar++;
if (prewhat.substring(0,1) == 'C') four++; //=five;
if (numtogether > 1) {
for (inu=1; inu<numtogether; inu++) {
caboffrank=inu;
//play(prewhat.replace('4','').replace('5','').replace('0','').replace('1','').replace('2','').replace('3','').replace('6','').replace('7','') + eval((five + inu) % 8));
console.log('ab');
play(prewhat.replace('4','').replace('5','').replace('0','').replace('1','').replace('2','').replace('3','').replace('6','').replace('7','') + eval((four + inu) % 8));
}
}
//alert(prewhat);
if (stype.toLowerCase() == "chord") caboffrank=eval(sofar % 8);
console.log('af');
splay();
numtogether=1;
} else if (sofar < eval(-1 + anoctave.length)) { //pwhat == anoctave[0]) {
pwhat=anoctave[sofar].trim(); //'D';
prewhat=anoctave[sofar].trim(); //'D';
if (prewhat.substring(0,1) == 'C') four++; //=five;
if (numtogether > 1) {
for (inu=1; inu<numtogether; inu++) {
caboffrank=inu;
console.log('ac');
play(prewhat.replace('4','').replace('5','').replace('0','').replace('1','').replace('2','').replace('3','').replace('6','').replace('7','') + eval((four + inu) % 8));
}
}
if (stype.toLowerCase() == "chord") caboffrank=eval(sofar % 8);
if (anoctave[sofar].indexOf(' ') != -1) {
setTimeout(atstart,10);
} else {
//alert(prewhat);
console.log(prewhat + ' ad');
setTimeout(splay, 10);
setTimeout(atstart,notespeed);
}
sofar++;
} else if (ppwhat == anoctave[1]) {
pwhat=anoctave[2]; //'E';
prewhat=anoctave[2]; //'E';
if (prewhat.substring(0,1) == 'C') four++; //=five;
if (numtogether > 1) {
for (inu=1; inu<numtogether; inu++) {
caboffrank=inu;
console.log('ae');
play(prewhat.replace('4','').replace('5','').replace('0','').replace('1','').replace('2','').replace('3','').replace('6','').replace('7','') + eval((four + inu) % 8));
}
}
console.log('ag');
setTimeout(splay, 10);
setTimeout(atstart,notespeed);
} else if (ppwhat == anoctave[2]) {
pwhat=anoctave[3]; //'F';
prewhat=anoctave[3]; //'F';
if (prewhat.substring(0,1) == 'C') four=five;
if (numtogether > 1) {
for (inu=1; inu<numtogether; inu++) {
caboffrank=inu;
console.log('ah');
play(prewhat.replace('4','').replace('5','').replace('0','').replace('1','').replace('2','').replace('3','').replace('6','').replace('7','') + eval((four + inu) % 8));
}
}
console.log('ai');
setTimeout(splay, 10);
setTimeout(atstart,notespeed);
} else if (ppwhat == anoctave[3]) {
pwhat=anoctave[4]; //'G';
prewhat=anoctave[4]; //'G';
if (prewhat.substring(0,1) == 'C') four=five;
if (numtogether > 1) {
for (inu=1; inu<numtogether; inu++) {
caboffrank=inu;
console.log('aj');
play(prewhat.replace('4','').replace('5','').replace('0','').replace('1','').replace('2','').replace('3','').replace('6','').replace('7','') + eval((four + inu) % 8));
}
}
console.log('ak');
setTimeout(splay, 10);
setTimeout(atstart,notespeed);
} else if (ppwhat == anoctave[4]) {
pwhat=anoctave[5]; //'A';
prewhat=anoctave[5]; //'A';
if (prewhat.substring(0,1) == 'C') four=five;
if (numtogether > 1) {
for (inu=1; inu<numtogether; inu++) {
caboffrank=inu;
console.log('al');
play(prewhat.replace('4','').replace('5','').replace('0','').replace('1','').replace('2','').replace('3','').replace('6','').replace('7','') + eval((four + inu) % 8));
}
}
console.log('am');
setTimeout(splay, 10);
setTimeout(atstart,notespeed);
} else if (ppwhat == anoctave[5]) {
pwhat=anoctave[6]; //'B';
prewhat=anoctave[6]; //'B';
if (prewhat.substring(0,1) == 'C') four=five;
if (numtogether > 1) {
for (inu=1; inu<numtogether; inu++) {
caboffrank=inu;
console.log('an');
play(prewhat.replace('4','').replace('5','').replace('0','').replace('1','').replace('2','').replace('3','').replace('6','').replace('7','') + eval(four + inu));
}
}
console.log('ao');
setTimeout(splay, 10);
setTimeout(atstart,notespeed);
} else if (ppwhat == anoctave[6]) {
pwhat='';
prewhat=anoctave[7]; //'C5';
if (prewhat.substring(0,1) == 'C') four=five;
if (numtogether > 1) {
for (inu=1; inu<numtogether; inu++) {
caboffrank=inu;
console.log('ap');
play(prewhat.replace('4','').replace('5','').replace('0','').replace('1','').replace('2','').replace('3','').replace('6','').replace('7','') + eval((five + inu) % 8));
}
}
console.log('aq');
splay();
numtogether=1;
} else if (prewhat != '') {
play('');
}
}

function splay() {
play('');
}

function play(wht) {
var dnasb;
if (wht != '') {
whatx=wht;
console.log('whatx=' + whatx);
if (document.getElementById('kanimation').value == 'y') {
if (document.getElementById('divo_' + whatx.split('/')[eval(-1 + whatx.split('/').length)].split('.')[0])) {
setTimeout(function(){ document.getElementById('divo_' + whatx.split('/')[eval(-1 + whatx.split('/').length)].split('.')[0]).style.zIndex='12'; }, 2);
setTimeout(function(){ document.getElementById('divo_' + whatx.split('/')[eval(-1 + whatx.split('/').length)].split('.')[0]).style.zIndex='-1'; }, 902);
}
if (document.getElementById('divo' + whatx.split('/')[eval(-1 + whatx.split('/').length)].split('.')[0])) {
setTimeout(function(){ document.getElementById('divo' + whatx.split('/')[eval(-1 + whatx.split('/').length)].split('.')[0]).style.zIndex='12'; }, 3);
setTimeout(function(){ document.getElementById('divo' + whatx.split('/')[eval(-1 + whatx.split('/').length)].split('.')[0]).style.zIndex='-1'; }, 903);
}
}
if (notediff[0] != 0) {
asifchord(document.getElementById(whatx.split("/")[eval(-1 + whatx.split("/").length)].split('.')[0]).id);
for (var ipxx=0; ipxx<notediff.length; ipxx++) {
notediff[ipx]=0;
}
KEYDN_space = false;
KEYDN_shift = false;
KEYDN_ctrl = false;
inoted=0;
} else {
for (var ipx=0; ipx<notediff.length; ipx++) {
notediff[ipx]=0;
}
KEYDN_space = false;
KEYDN_shift = false;
KEYDN_ctrl = false;
inoted=0;
}
}
if (wht == '' && prewhat != '') {
wht=prewhat;
prewhat='';
} else if (wht.indexOf('piano/') != -1) {
caboffrank=9;
}
if (wht != '') {
what=wht;
if (what.toLowerCase().indexOf('.mp3') == -1) what=what + '.mp3';
if (what.toLowerCase().indexOf('piano/') == -1) what='piano/' + what;
if (what.indexOf('A#') != -1) what=what.replace('A#','Bb');
if (what.indexOf('G#') != -1) what=what.replace('G#','Ab');
if (what.indexOf('F#') != -1) what=what.replace('F#','Gb');
if (what.indexOf('C#') != -1) what=what.replace('C#','Db');
if (what.indexOf('D#') != -1) what=what.replace('D#','Eb');
if (what.length == 11) what=what.split('.')[0] + '4.mp3';
if (what.length == 12 && what.indexOf('b') != -1) what=what.split('.')[0] + '4.mp3';
//alert('d' + what.split("/")[eval(-1 + what.split("/").length)].split('.')[0]);
if (document.getElementById('kanimation').value == 'y') {
if (document.getElementById('divo_' + what.split('/')[eval(-1 + what.split('/').length)].split('.')[0])) {
setTimeout(function(){ document.getElementById('divo_' + what.split('/')[eval(-1 + what.split('/').length)].split('.')[0]).style.zIndex='12'; }, 2);
setTimeout(function(){ document.getElementById('divo_' + what.split('/')[eval(-1 + what.split('/').length)].split('.')[0]).style.zIndex='-1'; }, 902);
}
if (document.getElementById('divo' + what.split('/')[eval(-1 + what.split('/').length)].split('.')[0])) {
setTimeout(function(){ document.getElementById('divo' + what.split('/')[eval(-1 + what.split('/').length)].split('.')[0]).style.zIndex='12'; }, 3);
setTimeout(function(){ document.getElementById('divo' + what.split('/')[eval(-1 + what.split('/').length)].split('.')[0]).style.zIndex='-1'; }, 903);
}
}
if (document.getElementById('d' + what.split("/")[eval(-1 + what.split("/").length)].split('.')[0])) {
document.getElementById('d' + what.split("/")[eval(-1 + what.split("/").length)].split('.')[0]).style.display='block';
document.getElementById('d' + what.split("/")[eval(-1 + what.split("/").length)].split('.')[0]).style.border='1px solid red';
document.getElementById('d' + what.split("/")[eval(-1 + what.split("/").length)].split('.')[0]).style.opacity=1.0;
if (dnas.indexOf(';' + 'd' + what.split("/")[eval(-1 + what.split("/").length)].split('.')[0] + ',') == -1) {
dnas+='d' + what.split("/")[eval(-1 + what.split("/").length)].split('.')[0] + ',10;';
} else {
dnasb=dnas.split('d' + what.split("/")[eval(-1 + what.split("/").length)].split('.')[0] + ',')[1].split(';')[0];
dnas=dnas.replace('d' + what.split("/")[eval(-1 + what.split("/").length)].split('.')[0] + ',' + dnasb, 'd' + what.split("/")[eval(-1 + what.split("/").length)].split('.')[0] + ',10');
}
}
if (navigator.userAgent.match(/Android|iPhone|iPad|iPod/i)) {

if (document.getElementById('conduit').value != '') {
//alert(1);
console.log('b ' + what);

document.getElementById('cmdconduit').value+="parent.document.getElementById('iaudio" + caboffrank + "').src='" + what + "'; ";
document.getElementById('conduit').value+=what.replace('/','').replace('.','') + ' ';
} else {
console.log('c '); // + document.getElementById(whatx.split("/")[eval(-1 + whatx.split("/").length)].split('.')[0]).id + ' ... ' + notediff[0]);
//alert(aleft + ',' + atop + ' ... ' + what.split("/")[eval(-1 + what.split("/").length)].split('.')[0]);
//if (lasta != null) {
// lasta.pause();
// lasta.currentTime = 0;
//}
lasta=document.getElementById(what.split("/")[eval(-1 + what.split("/").length)].split('.')[0]);
//var evt = document.createEvent("MouseEvents");
//evt.initMouseEvent("click", true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
//lasta.dispatchEvent(evt);
lasta.load();
//lasta.click();
if (wht.toLowerCase().indexOf('piano/') != -1) {
lasta.play();
} else {
lasta.style.left='' + aleft + 'px';
lasta.style.top='' + atop + "px";
aleft+=240; // 210 450 690
if (eval(aleft % 930) == 0) {
aleft=210;
atop+=50;
}
//lasta.play();
}

}

} else if (document.getElementById('conduit').value != '') {
document.getElementById('cmdconduit').value+="parent.document.getElementById('iaudio" + caboffrank + "').src='" + what + "'; ";
document.getElementById('conduit').value+=what.replace('/','').replace('.','') + ' ';
} else {
document.getElementById('iaudio' + caboffrank).src=what;
}
caboffrank=0;
}
}

function legendbits() {
var iw, blackdivs="", whitedivs="", leastw=0, greatestw=0, j=0;
var xco=[],rawhtml=document.body.innerHTML.replace(/ shape="rect"/g, ' shape="poly"').replace(/onClick=/g, "onclick=");
if (rawhtml.indexOf('coords="') != -1) {
bits=rawhtml.split('coords="');
//if ((location.search.split('url=')[1] ? decodeURIComponent(location.search.split('url=')[1]).split('&')[0] : '') != '') alert(bits.length);
for (j=1; j<bits.length; j++) {
if (bits[eval(-1 + j)].indexOf('<area ') != -1) {
xco=bits[j].split('"')[0].split(',');
//coords="1067,2,1078,92" 1067,2,1067,92,1078,92,1078,2,1067,2
if (xco.length == 4) {
rawhtml=rawhtml.replace(bits[j].split('"')[0], '' + xco[0] + ',' + xco[1] + ',' + xco[0] + ',' + xco[3] + ',' + xco[2] + ',' + xco[3] + ',' + xco[2] + ',' + xco[1] + ',' + xco[0] + ',' + xco[1]);
blackdivs+="<div id='d" + bits[eval(-1 + j)].split(' title="')[eval(-1 + bits[eval(-1 + j)].split(' title="').length)].split('"')[0] + "' style='display:none;background-color:black;z-index:9;border:1px solid red;position:absolute;top:138;height:7;left:" + xco[0] + ";width:" + eval(eval(xco[2]) - eval(xco[0])) + ";'> </div>";
} else {
leastw=xco[0];
greatestw=xco[0];
for (iw=2; iw<xco.length; iw+=2) {
if (eval(xco[iw]) < leastw) leastw=xco[iw];
if (eval(xco[iw]) > greatestw) greatestw=xco[iw];
}
whitedivs+="<div id='d" + bits[eval(-1 + j)].split(' title="')[eval(-1 + bits[eval(-1 + j)].split(' title="').length)].split('"')[0] + "' style='display:none;background-color:white;z-index:9;border:1px solid red;position:absolute;top:146;height:7;left:" + leastw + ";width:" + eval(eval(greatestw) - eval(leastw)) + ";'> </div>";
}
}
}
document.getElementById('table_content').innerHTML = blackdivs + whitedivs; //tablehtml.replace(/polygon style="/g, 'polygon style="position:absolute;top:0;left:0;').replace(/" width=/g, '" style="position:absolute;top:0;left:0;" width=');
}
}

function tpi(e) {
//document.title=('e.keyCode=' + e.keyCode + ' for e.target=' + e.target.id + ' and e.path=' + e.path);
console.log('e.target=' + e.target.id + ' and e.path=' + e.path);
if (('' + e.target.id).replace('octave','speedfactor').replace('number','speedfactor') != 'speedfactor') {
//document.title=('E.keyCode=' + e.keyCode + ' for e.target=' + e.target.id + ' and e.path=' + e.path);
switch( e.keyCode ){
case 32 : // SPACE BAR
KEYDN_space = true;
inoted++;
console.log('e.keyCode increment to ' + inoted);
if (eval('' + inoted) >= eval('' + notediff.length)) { notediff.push(0); }
break;
case 188 : // COMMA
case 44 : // COMMA
KEYDN_space = true;
inoted++;
console.log('e.keyCode Increment to ' + inoted);
if (eval('' + inoted) >= eval('' + notediff.length)) { notediff.push(0); }
break;
case 190 : // DOT
case 46 : // DOT
KEYDN_space = true;
inoted++;
console.log('e.keyCode Increment To ' + inoted);
if (eval('' + inoted) >= eval('' + notediff.length)) { notediff.push(0); }
break;
case 16 : // SHIFT
KEYDN_shift = true;
if (eval('' + inoted) >= eval('' + notediff.length)) { notediff.push(0); }
notediff[inoted]=1;
break;
case 17 : // CTRL
KEYDN_ctrl = true;
if (eval('' + inoted) >= eval('' + notediff.length)) { notediff.push(0); }
notediff[inoted]=-1;
break;
case 8 : // BACKSPACE
break;
case 46 : // DELETE
break;
default:
console.log('iNOTed=' + inoted + ' vs notediff.length=' + notediff.length);
if (eval('' + inoted) >= eval('' + notediff.length)) { notediff.push(0); }
console.log('iNoTeD=' + inoted + ' vs notediff.length=' + notediff.length);
if (eval('' + e.keyCode) >= 65 && eval('' + e.keyCode) <= 90) {
console.log('iNoTed=' + inoted + ' vs notediff.length=' + notediff.length);
if (notediff[inoted] == 0) { notediff[inoted]=1; }
if (eval('' + eval(notediff[inoted] * (eval('' + e.keyCode) - 55))) <= eval('' + areas.length)) {
notediff[inoted]*=(eval('' + e.keyCode) - 55);
}
} else if (eval('' + e.keyCode) >= 97 && eval('' + e.keyCode) <= 122) {
console.log('inoTed=' + inoted + ' vs notediff.length=' + notediff.length);
if (notediff[inoted] == 0) { notediff[inoted]=1; }
if (eval('' + eval(notediff[inoted] * (eval('' + e.keyCode) - 87))) <= eval('' + areas.length)) {
notediff[inoted]*=(eval('' + e.keyCode) - 87);
}
} else if (eval('' + e.keyCode) == 189 || eval('' + e.keyCode) == 187 || (eval('' + e.keyCode) >= 48 && eval('' + e.keyCode) <= 57)) {
if (eval('' + e.keyCode) == 189) {
notediff[inoted]=-1;
} else if (eval('' + e.keyCode) == 187) {
notediff[inoted]=1;
} else if (notediff[inoted] == 0) {
notediff[inoted]=(eval('' + e.keyCode) - 48);
} else if (notediff[inoted] == 1) {
notediff[inoted]=(eval('' + e.keyCode) - 48);
} else if (notediff[inoted] == -1) {
notediff[inoted]=eval('-' + (eval('' + e.keyCode) - 48));
} else if (eval( ('' + notediff[inoted] + eval(eval('' + e.keyCode) - 48) )) <= eval('' + areas.length)) {
notediff[inoted]=eval( ('' + notediff[inoted] + eval(eval('' + e.keyCode) - 48) ));
}
//document.title='e.keyCode = ' + e.keyCode + ' ' + document.title;
console.log('e.keyCode=' + e.keyCode);
}
//document.title='E.keyCode = ' + e.keyCode + ' ' + document.title;
console.log('E.keyCode=' + e.keyCode);
break;
}
}
}

function areatodiv(scalar) {
var areas=document.getElementsByTagName('area'), coordsare=[], arects, stylebit='', onbit='', abefore='', aafter='', i=0, j=0;
var sxs=[], sys=[];
var leftp=0.0, widthp=0.0;
var topp=0.0, heightp=0.0;
var nx=0, ny=0, xx=0, xy=0, dx=0, dy=0;
var idsuffix='', ih='';
document.getElementById('ddarea').innerHTML='';
//alert('0:' + areas.length);
var imgs=document.getElementsByTagName('img');
if (eval('' + zoomx) == 1) {
bigw=eval('' + ('' + imgs[0].width).replace('px',''));
bigh=eval('' + ('' + imgs[0].height).replace('px',''));
zoomx=eval('' + screen.width) / eval('' + bigw);
zoomy=eval('' + screen.height) / eval('' + bigh);
}
//alert('1:' + areas.length);
//alert('2:' + areas.length);
for (i=0; i<areas.length; i++) {
nx=0;
ny=0;
xx=0;
xy=0;
dx=0;
dy=0;
idsuffix=('' + areas[i].id).replace(/^undefined/g,'').replace(/^null/g,'');
if (idsuffix == '') { areas[i].id='area' + areas[i].title; }
if (('' + areas[i].coords).indexOf(',') != -1) {
coordsare=('' + areas[i].coords).replace(/\ /g,',').split(',');
nx=eval('' + coordsare[0]);
ny=eval('' + coordsare[1]);
dx=[nx];
dy=[ny];
xx=eval('' + coordsare[0]);
xy=eval('' + coordsare[1]);
sxs=[nx];
sys=[ny];
for (j=2; j<coordsare.length; j+=2) {
sxs.push(eval('' + coordsare[j]));
sys.push(eval('' + coordsare[j + 1]));
if (eval('' + coordsare[j]) > xx) {
xx=eval('' + coordsare[j]);
} else if (eval('' + coordsare[j]) < nx) {
nx=eval('' + coordsare[j]);
} else if (Math.abs(eval('' + coordsare[j]) - dx) > 8 && Math.abs(eval('' + coordsare[j]) - nx) > 8 && Math.abs(eval('' + coordsare[j]) - xx) > 8) {
dx=eval('' + coordsare[j]);
}
if (eval('' + coordsare[j + 1]) > xy) {
xy=eval('' + coordsare[j + 1]);
} else if (eval('' + coordsare[j + 1]) < ny) {
ny=eval('' + coordsare[j + 1]);
} else if (Math.abs(eval('' + coordsare[j + 1]) - dy) > 8 && Math.abs(eval('' + coordsare[j + 1]) - ny) > 8 && Math.abs(eval('' + coordsare[j + 1]) - xy) > 8) {
//if (eval('' + coordsare.length) == 12) {
//alert('' + areas[i].coords + ' ... ny=' + ny + ' and xy=' + xy + ' and dy about to become ' + coordsare[j + 1]);
//}
dy=eval('' + coordsare[j + 1]);
}
}
sxs.sort(function(a, b){return a - b});
sys.sort(function(a, b){return a - b});
if (eval('' + coordsare.length) == 16) {
ih+='<div class=ivory id=divo_' + areas[i].title + ' style="position:absolute;left:' + coordsare[12] + 'px;top:' + coordsare[13] + 'px;width:' + Math.abs(eval('' + coordsare[12]) - eval('' + coordsare[8])) + 'px;height:' + eval(0 + Math.abs(eval('' + coordsare[13]) - eval('' + coordsare[9]))) + 'px;background-color:#f0f0f0;border-left:1px solid black;border-right:1px solid black;z-index:-1;"></div>';
ih+='<div class=ivory id=divo' + areas[i].title + ' style="position:absolute;left:' + coordsare[0] + 'px;top:' + Math.min(0,eval('' + coordsare[1])) + 'px;width:' + Math.abs(eval('' + coordsare[0]) - eval('' + coordsare[4])) + 'px;height:' + eval(10 + Math.abs(eval('' + coordsare[1]) - eval('' + coordsare[5]))) + 'px;background-color:#f0f0f0;border-left:1px solid black;border-right:1px solid black;z-index:-1;"></div>';
} else if (eval('' + coordsare.length) == 12) {
ih+='<div class=ivory id=divo_' + areas[i].title + ' style="position:absolute;left:' + sxs[0] + 'px;top:' + sys[2] + 'px;width:' + Math.max(Math.abs(eval('' + sxs[0]) - eval('' + sxs[5])), Math.abs(eval('' + sxs[0]) - eval('' + sxs[5]))) + 'px;height:' + Math.min(Math.abs(eval('' + sys[5]) - eval('' + sys[2])), Math.abs(eval('' + sys[2]) - eval('' + sys[5]))) + 'px;background-color:#f0f0f0;border-left:1px solid black;border-right:1px solid black;z-index:-1;"></div>';
ih+='<div class=ivory id=divo' + areas[i].title + ' style="position:absolute;left:' + Math.min(dx, Math.max(sxs[3],Math.min(sxs[1],sxs[2]))) + 'px;top:' + Math.min(0,eval('' + sys[0])) + 'px;width:' + Math.max(Math.abs(eval('' + sxs[4]) - eval('' + sxs[2])), Math.abs(eval('' + sxs[2]) - eval('' + sxs[4]))) + 'px;height:' + eval(10 + Math.abs(eval('' + sys[2]) - eval('' + sys[0]))) + 'px;background-color:#f0f0f0;border-left:1px solid black;border-right:1px solid black;z-index:-1;"></div>';
} else if (eval('' + coordsare.length) == 4) {
ih+='<div class=ebony id=divo' + areas[i].title + ' style="position:absolute;left:' + sxs[0] + 'px;top:' + Math.min(0,eval('' + sys[0])) + 'px;width:' + Math.max(Math.abs(eval('' + sxs[1]) - eval('' + sxs[0])), Math.abs(eval('' + sxs[0]) - eval('' + sxs[1]))) + 'px;height:' + Math.abs(eval('' + sys[1]) - eval('' + sys[0])) + 'px;background-color:#0f0f0f;border-left:1px solid black;border-right:1px solid black;z-index:-1;"></div>';
} else if (1 == 11) {
alert('Oops with ' + areas[i].outerHTML);
}
}
}
document.getElementById('ddarea').innerHTML=ih;
}

function recolour(tothiscol) {
var cthings='01234567890abcdef';
var ivorycol=tothiscol.toLowerCase();
var ebonycol='', ij;
for (var ii=0; ii<ivorycol.length; ii++) {
if (ivorycol.substring(ii).substring(0,1) == '#') {
ebonycol+=ivorycol.substring(ii).substring(0,1);
} else {
ij=eval(eval(eval('' + cthings.split(ivorycol.substring(ii).substring(0,1))[0].length) + 8) % 16);
ebonycol+=cthings.substring(ij).substring(0,1);
}
}
var dvs=document.getElementsByTagName('div');
for (var ijkh=0; ijkh<dvs.length; ijkh++) {
if (('' + dvs[ijkh].className) == 'ivory') {
dvs[ijkh].style.backgroundColor='' + ivorycol;
} else if (('' + dvs[ijkh].className) == 'ebony') {
dvs[ijkh].style.backgroundColor='' + ebonycol;
}
}
}

</script>
</head>
<body onkeydown="tpi(event);" onload=" dodna(); legendbits(); if (('' + tonic).replace(' ','') != '') { atstart(); }" style="background-color:orange;">


<img src="piano.jpg" usemap="#bz14285" width="1090" height="138" alt="click map" border="0" style="border-bottom: 16px solid yellow; border-right: 13px solid red;position:absolute;top:0;left:0;" />
<map id="bz14285" name="bz14285">

<area shape="poly" alt="A0" title="A0" coords="4,4,17,4,17,90,22,92,22,138,2,136" onClick="play('piano/A0.mp3');" />

<area shape="rect" alt="Bb0" title="Bb0" coords="18,2,29,92" onClick="play('piano/Bb0.mp3');" />

<area shape="poly" alt="B0" title="B0" coords="24,93,29,92,31,4,43,4,43,138,24,138" onClick="play('piano/B0.mp3');" />

<area shape="poly" alt="C1" title="C1" coords="45,2,56,4,56,92,65,88,63,136,45,136" onClick="play('piano/C1.mp3');" />

<area shape="rect" alt="Db1" title="Db1" coords="56,2,68,93" onClick="play('piano/Db1.mp3');" />

<area shape="poly" alt="D1" title="D1" coords="68,2,81,2,79,90,86,90,86,136,63,138,65,90,68,90" onClick="play('piano/D1.mp3');" />

<area shape="rect" alt="Eb1" title="Eb1" coords="83,2,92,90" onClick="play('piano/Eb1.mp3');" />

<area shape="poly" alt="E1" title="E1" coords="95,2,109,4,108,138,84,138,88,92,95,90" onClick="play('piano/E1.mp3');" />

<area shape="poly" alt="F1" title="F1" coords="109,4,118,4,120,90,129,88,129,136,108,135" onClick="play('piano/F1.mp3');" />

<area shape="rect" alt="Gb1" title="Gb1" coords="120,4,131,83" onClick="play('piano/Gb1.mp3');" />

<area shape="poly" alt="G1" title="G1" coords="135,4,143,2,143,92,151,92,151,138,129,138,129,90,131,90" onClick="play('piano/G1.mp3');" />

<area shape="rect" alt="Ab1" title="Ab1" coords="147,2,156,84" onClick="play('piano/Ab1.mp3');" />

<area shape="poly" alt="A1" title="A1" coords="158,2,167,2,165,90,172,90,172,136,152,138,152,90,160,90" onClick="play('piano/A1.mp3');" />

<area shape="rect" alt="Bb1" title="Bb1" coords="170,2,179,92" onClick="play('piano/Bb1.mp3');" />

<area shape="poly" alt="B1" title="B1" coords="181,2,193,4,193,138,172,138,174,92,181,92" onClick="play('piano/B1.mp3');" />

<area shape="poly" alt="C2" title="C2" coords="195,4,206,4,206,93,213,93,213,136,192,138" onClick="play('piano/C2.mp3');" />

<area shape="rect" alt="Db2" title="Db2" coords="206,2,215,92" onClick="play('piano/Db2.mp3');" />

<area shape="poly" alt="D2" title="D2" coords="218,2,231,4,231,92,238,92,238,138,213,138,215,92,218,86" onClick="play('piano/D2.mp3');" />

<area shape="rect" alt="Eb2" title="Eb2" coords="235,2,244,92" onClick="play('piano/Eb2.mp3');" />

<area shape="poly" alt="E2" title="E2" coords="245,4,260,2,258,136,238,136,236,90,245,88" onClick="play('piano/E2.mp3');" />

<area shape="poly" alt="F2" title="F2" coords="260,4,270,2,270,92,277,90,279,138,260,136" onClick="play('piano/F2.mp3');" />

<area shape="rect" alt="Gb2" title="Gb2" coords="272,4,283,92" onClick="play('piano/Gb2.mp3');" />

<area shape="poly" alt="G2" title="G2" coords="283,2,295,4,295,92,302,90,301,138,281,136,277,90,281,90" onClick="play('piano/G2.mp3');" />

<area shape="rect" alt="Ab2" title="Ab2" coords="295,2,306,90" onClick="play('piano/Ab2.mp3');" />

<area shape="poly" alt="A2" title="A2" coords="306,2,317,2,317,90,324,92,324,136,301,138,301,90,308,90" onClick="play('piano/A2.mp3');" />

<area shape="rect" alt="Bb2" title="Bb2" coords="320,2,329,92" onClick="play('piano/Bb2.mp3');" />

<area shape="poly" alt="B2" title="B2" coords="331,2,344,2,344,138,322,138,322,92,331,88" onClick="play('piano/B2.mp3');" />

<area shape="poly" alt="C3" title="C3" coords="344,2,356,4,354,90,365,90,365,136,345,136" onClick="play('piano/C3.mp3');" />

<area shape="rect" alt="Db3" title="Db3" coords="358,2,365,90" onClick="play('piano/Db3.mp3');" />

<area shape="poly" alt="D3" title="D3" coords="369,2,381,2,381,92,388,92,386,138,367,136,365,86,365,86" onClick="play('piano/D3.mp3');" />

<area shape="rect" alt="Eb3" title="Eb3" coords="383,2,392,93" onClick="play('piano/Eb3.mp3');" />

<area shape="poly" alt="E3" title="E3" coords="395,4,410,2,410,138,388,138,386,92,397,92" onClick="play('piano/E3.mp3');" />

<area shape="poly" alt="F3" title="F3" coords="408,2,419,4,420,92,431,92,431,138,408,138" onClick="play('piano/F3.mp3');" />

<area shape="rect" alt="Gb3" title="Gb3" coords="420,2,431,84" onClick="play('piano/Gb3.mp3');" />

<area shape="poly" alt="G3" title="G3" coords="433,2,444,2,445,90,451,90,453,136,431,136,429,90,435,88" onClick="play('piano/G3.mp3');" />

<area shape="rect" alt="Ab3" title="Ab3" coords="445,2,454,92" onClick="play('piano/Ab3.mp3');" />

<area shape="poly" alt="A3" title="A3" coords="458,2,465,2,465,88,472,86,474,138,449,138,451,92,456,90" onClick="play('piano/A3.mp3');" />

<area shape="rect" alt="Bb3" title="Bb3" coords="469,2,479,93" onClick="play('piano/Bb3.mp3');" />

<area shape="poly" alt="B3" title="B3" coords="481,2,494,2,494,136,472,136,472,93,481,90" onClick="play('piano/B3.mp3');" />

<area shape="poly" alt="C4" title="C4" coords="494,2,506,2,504,90,517,90,515,138,494,138" onClick="play('piano/C4.mp3');" />

<area shape="rect" alt="Db4" title="Db4" coords="508,2,517,90" onClick="play('piano/Db4.mp3');" />

<area shape="poly" alt="D4" title="D4" coords="517,2,531,2,531,90,538,92,537,138,515,136,513,92,517,92" onClick="play('piano/D4.mp3');" />

<area shape="rect" alt="Eb4" title="Eb4" coords="533,2,544,90" onClick="play('piano/Eb4.mp3');" />

<area shape="poly" alt="E4" title="E4" coords="545,2,556,2,558,138,537,135,538,90,544,88" onClick="play('piano/E4.mp3');" />

<area shape="poly" alt="F4" title="F4" coords="558,4,569,2,569,92,578,90,579,138,558,138" onClick="play('piano/F4.mp3');" />

<area shape="rect" alt="Gb4" title="Gb4" coords="571,4,581,90" onClick="play('piano/Gb4.mp3');" />

<area shape="poly" alt="G4" title="G4" coords="583,4,596,2,596,90,601,90,601,138,579,138,578,92,585,92" onClick="play('piano/G4.mp3');" />

<area shape="rect" alt="Ab4" title="Ab4" coords="597,2,608,95" onClick="play('piano/Ab4.mp3');" />

<area shape="poly" alt="A4" title="A4" coords="606,4,617,2,617,90,619,90,621,138,599,138,601,90,606,90" onClick="play('piano/A4.mp3');" />

<area shape="rect" alt="Bb4" title="Bb4" coords="619,2,629,93" onClick="play('piano/Bb4.mp3');" />

<area shape="poly" alt="B4" title="B4" coords="631,2,644,2,644,138,622,136,622,93,629,92" onClick="play('piano/B4.mp3');" />

<area shape="poly" alt="C5" title="C5" coords="642,4,656,4,656,92,665,92,665,136,644,136" onClick="play('piano/C5.mp3');" />

<area shape="rect" alt="Db5" title="Db5" coords="656,2,665,92" onClick="play('piano/Db5.mp3');" />

<area shape="poly" alt="D5" title="D5" coords="669,2,681,2,680,90,685,90,685,138,665,136,663,90,667,90" onClick="play('piano/D5.mp3');" />

<area shape="rect" alt="Eb5" title="Eb5" coords="683,2,694,92" onClick="play('piano/Eb5.mp3');" />

<area shape="poly" alt="E5" title="E5" coords="696,2,708,2,706,138,687,136,685,92,694,92" onClick="play('piano/E5.mp3');" />

<area shape="poly" alt="F5" title="F5" coords="708,4,722,2,721,92,730,92,730,136,706,138" onClick="play('piano/F5.mp3');" />

<area shape="rect" alt="Gb5" title="Gb5" coords="722,2,733,93" onClick="play('piano/Gb5.mp3');" />

<area shape="poly" alt="G5" title="G5" coords="733,2,744,2,746,93,751,92,751,138,730,138,726,95,731,92" onClick="play('piano/G5.mp3');" />

<area shape="rect" alt="Ab5" title="Ab5" coords="749,2,758,86" onClick="play('piano/Ab5.mp3');" />

<area shape="poly" alt="A5" title="A5" coords="758,2,767,2,769,88,774,88,774,136,751,136,749,93,758,92" onClick="play('piano/A5.mp3');" />

<area shape="rect" alt="Bb5" title="Bb5" coords="771,2,780,92" onClick="play('piano/Bb5.mp3');" />

<area shape="poly" alt="B5" title="B5" coords="781,4,794,4,794,138,774,136,772,92,780,92" onClick="play('piano/B5.mp3');" />

<area shape="poly" alt="C6" title="C6" coords="792,2,806,2,803,92,814,90,815,136,794,136" onClick="play('piano/C6.mp3');" />

<area shape="rect" alt="Db6" title="Db6" coords="805,4,815,83" onClick="play('piano/Db6.mp3');" />

<area shape="poly" alt="D6" title="D6" coords="817,2,831,2,831,90,837,90,837,138,814,138,815,92,819,92" onClick="play('piano/D6.mp3');" />

<area shape="rect" alt="Eb6" title="Eb6" coords="831,2,842,88" onClick="play('piano/Eb6.mp3');" />

<area shape="poly" alt="E6" title="E6" coords="844,4,858,2,858,138,837,138,835,93,844,92" onClick="play('piano/E6.mp3');" />

<area shape="poly" alt="F6" title="F6" coords="858,2,869,4,869,92,878,90,880,138,858,138" onClick="play('piano/F6.mp3');" />

<area shape="rect" alt="Gb6" title="Gb6" coords="869,2,880,88" onClick="play('piano/Gb6.mp3');" />

<area shape="poly" alt="G6" title="G6" coords="885,2,894,2,892,92,903,93,901,136,880,133,880,93,883,90" onClick="play('piano/G6.mp3');" />

<area shape="rect" alt="Ab6" title="Ab6" coords="896,2,906,88" onClick="play('piano/Ab6.mp3');" />

<area shape="poly" alt="A6" title="A6" coords="908,2,915,2,915,90,923,92,923,138,901,138,899,88,906,88" onClick="play('piano/A6.mp3');" />

<area shape="rect" alt="Bb6" title="Bb6" coords="917,2,930,93" onClick="play('piano/Bb6.mp3');" />

<area shape="poly" alt="B6" title="B6" coords="931,4,944,4,940,136,921,136,924,93,931,92" onClick="play('piano/B6.mp3');" />

<area shape="poly" alt="C7" title="C7" coords="944,4,955,2,955,88,964,88,965,135,944,138" onClick="play('piano/C7.mp3');" />

<area shape="rect" alt="Db7" title="Db7" coords="956,2,965,86" onClick="play('piano/Db7.mp3');" />

<area shape="poly" alt="D7" title="D7" coords="967,2,981,2,978,92,987,93,989,138,964,138,964,86,967,86" onClick="play('piano/D7.mp3');" />

<area shape="rect" alt="Eb7" title="Eb7" coords="981,4,996,90" onClick="play('piano/Eb7.mp3');" />

<area shape="poly" alt="E7" title="E7" coords="994,4,1008,4,1007,138,985,136,987,93,996,92" onClick="play('piano/E7.mp3');" />

<area shape="poly" alt="F7" title="F7" coords="1007,4,1021,4,1021,88,1032,92,1032,135,1008,138" onClick="play('piano/F7.mp3');" />

<area shape="rect" alt="Gb7" title="Gb7" coords="1023,4,1030,90" onClick="play('piano/Gb7.mp3');" />

<area shape="poly" alt="G7" title="G7" coords="1033,2,1044,2,1042,90,1049,90,1051,136,1030,138,1030,90,1035,90" onClick="play('piano/G7.mp3');" />

<area shape="rect" alt="Ab7" title="Ab7" coords="1044,4,1055,90" onClick="play('piano/Ab7.mp3');" />

<area shape="poly" alt="A7" title="A7" coords="1057,2,1067,6,1069,86,1073,86,1073,136,1051,136,1049,92,1057,90" onClick="play('piano/A7.mp3');" />

<area shape="rect" alt="Bb7" title="Bb7" coords="1067,2,1078,92" onClick="play('piano/Bb7.mp3');" />

<area shape="poly" alt="B7" title="B7" coords="1080,2,1087,2,1087,136,1073,135,1071,93,1080,88" onClick="play('piano/B7.mp3');" />
<area shape="default" nohref alt="" />
</map>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1 style='display:inline-block;max-height:28px;'>Piano Playing via </h1>  <iframe class=ask title='versus Audio Web' frameborder=0 scrolling='no' style='border-bottom:1px solid orange;overflow:hidden;background-color:orange;display:inline-block;width:500px;height:28px;max-height:28px;' width=500 height=28 src='web_audio.htm?vscaseyrule=Yes'></iframe><br>
<h3>RJM Programming - April, 2017</h3>
<h4>Thanks to <a target=_blank title='openclipart' href='http://openclipart.org'>openclipart</a> (help with image) and <a target=_blank title='mobilefish' href='http://www.mobilefish.com/services/image_map/image_map.php'>mobilefish</a> (help with map tag) and <a target=_blank title='Useful link, thanks' href='http://www.caseyrule.com/projects/midi/soundfonts/FluidR3_GM/agogo-mp3/'>useful link</a> (help with mp3 audio)</h4>
<input type=hidden id=conduit value=''></input><input type=hidden id=cmdconduit value=''></input>
<input type=text value="" style="position:absolute;top:-200px;left:-200px;"></input>
<form onsubmit='return res()' method='GET' action='./piano.htm' id='fpiano'>
<table cellpadding=15 cellspacing=5 style='width:100%;' border=5><tr><td style='background-color:yellow;'>
Tonic note: <select size=12 id='tonic' name='tonic'>
<option value='C' selected>    C  </option>
<option value='Db'>    C#</option>
<option value='D'>    D  </option>
<option value='Eb'>    D#  </option>
<option value='E'>    E  </option>
<option value='F'>    F  </option>
<option value='Gb'>    F#  </option>
<option value='G'>    G  </option>
<option value='Ab'>    G#  </option>
<option value='A'>    A  </option>
<option value='Bb'>    A#  </option>
<option value='B'>    B  </option>
</select>
  Type: <select size=3 id='type' name='type' onchange='stype=this.value;'><option value='Scale' selected>  Scale  </option><option value='Arpeggio'>  Arpeggio  </option><option value='Chord'>  Chord  </option></select>
<input type='hidden' name='major' id='major' value='Major'></input>
<input type='hidden' name='minor' id='minor' value=''></input>
  Mode: <select size=2 onchange="document.getElementById('minor').value=''; document.getElementById('major').value=''; document.getElementById(this.value).value=this.value;" id='mode'><option value='major' selected>  Major  </option><option value='minor'>  Minor  </option></select>
  Key Animation: <select size=2 onchange="document.getElementById('animcol').style.display='inline-block';" id='kanimation'><option value='n' selected>  No  </option><option value='y'>  Yes  </option></select> <input onchange=recolour(this.value); type=color value='#f0f0f0' id=animcol style=display:none;></input>
<input name='speed' id='speed' value='1000' type='hidden'></input>
</td><td style='background-color:pink;'>
<br>Note speed (relative to default): <input id='speedfactor' onchange=" document.getElementById('speed').value=Math.floor(eval(1000.0 / this.value));" onblur=" document.getElementById('speed').value=Math.floor(eval(1000.0 / this.value));" type="number" step="0.01" value="1.00" min="0.01"></input>
<br>Number of octaves to play (negative returns as well): <input name='number' id='number' value='1' type='number' min='-7' max='7' step='1'></input>
<br>Number of hands to hear: <input name='octaves' id='octaves' value='1' type='number' min='1' max='7' step='1'></input>
</td></tr></table>
<br><br><input style='margin-left:30%;width:20%;font-size:30px;background-color:#f0f0f0;border:2px solid blue;' ontouchstart=' console.log("here -1"); res();' onclick='console.log("here -1"); res();' type='button' value='Play'></input>
</form>
<iframe id='iaudio0' style='display:none;' src='about:none;'></iframe>
<iframe id='iaudio1' style='display:none;' src='about:none;'></iframe>
<iframe id='iaudio2' style='display:none;' src='about:none;'></iframe>
<iframe id='iaudio3' style='display:none;' src='about:none;'></iframe>
<iframe id='iaudio4' style='display:none;' src='about:none;'></iframe>
<iframe id='iaudio5' style='display:none;' src='about:none;'></iframe>
<iframe id='iaudio6' style='display:none;' src='about:none;'></iframe>
<iframe id='iaudio7' style='display:none;' src='about:none;'></iframe>
<iframe id='iaudio8' style='display:none;' src='about:none;'></iframe>
<iframe id='iaudio9' style='display:none;' src='about:none;'></iframe>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Bb0" title="Bb0" coords="18,2,29,92" ><source type='audio/mp3' src="piano/Bb0.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Db1" title="Db1" coords="56,2,68,93" ><source type='audio/mp3' src="piano/Db1.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Eb1" title="Eb1" coords="83,2,92,90" ><source type='audio/mp3' src="piano/Eb1.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Gb1" title="Gb1" coords="120,4,131,83" ><source type='audio/mp3' src="piano/Gb1.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Ab1" title="Ab1" coords="147,2,156,84" ><source type='audio/mp3' src="piano/Ab1.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Bb1" title="Bb1" coords="170,2,179,92" ><source type='audio/mp3' src="piano/Bb1.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Db2" title="Db2" coords="206,2,215,92" ><source type='audio/mp3' src="piano/Db2.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Eb2" title="Eb2" coords="235,2,244,92" ><source type='audio/mp3' src="piano/Eb2.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Gb2" title="Gb2" coords="272,4,283,92" ><source type='audio/mp3' src="piano/Gb2.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Ab2" title="Ab2" coords="295,2,306,90" ><source type='audio/mp3' src="piano/Ab2.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Bb2" title="Bb2" coords="320,2,329,92" ><source type='audio/mp3' src="piano/Bb2.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Db3" title="Db3" coords="358,2,365,90" ><source type='audio/mp3' src="piano/Db3.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Eb3" title="Eb3" coords="383,2,392,93" ><source type='audio/mp3' src="piano/Eb3.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Gb3" title="Gb3" coords="420,2,431,84" ><source type='audio/mp3' src="piano/Gb3.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Ab3" title="Ab3" coords="445,2,454,92" ><source type='audio/mp3' src="piano/Ab3.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Bb3" title="Bb3" coords="469,2,479,93" ><source type='audio/mp3' src="piano/Bb3.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Db4" title="Db4" coords="508,2,517,90" ><source type='audio/mp3' src="piano/Db4.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Eb4" title="Eb4" coords="533,2,544,90" ><source type='audio/mp3' src="piano/Eb4.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Gb4" title="Gb4" coords="571,4,581,90" ><source type='audio/mp3' src="piano/Gb4.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Ab4" title="Ab4" coords="597,2,608,95" ><source type='audio/mp3' src="piano/Ab4.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Bb4" title="Bb4" coords="619,2,629,93" ><source type='audio/mp3' src="piano/Bb4.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Db5" title="Db5" coords="656,2,665,92" ><source type='audio/mp3' src="piano/Db5.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Eb5" title="Eb5" coords="683,2,694,92" ><source type='audio/mp3' src="piano/Eb5.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Gb5" title="Gb5" coords="722,2,733,93" ><source type='audio/mp3' src="piano/Gb5.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Ab5" title="Ab5" coords="749,2,758,86" ><source type='audio/mp3' src="piano/Ab5.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Bb5" title="Bb5" coords="771,2,780,92" ><source type='audio/mp3' src="piano/Bb5.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Db6" title="Db6" coords="805,4,815,83" ><source type='audio/mp3' src="piano/Db6.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Eb6" title="Eb6" coords="831,2,842,88" ><source type='audio/mp3' src="piano/Eb6.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Gb6" title="Gb6" coords="869,2,880,88" ><source type='audio/mp3' src="piano/Gb6.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Ab6" title="Ab6" coords="896,2,906,88" ><source type='audio/mp3' src="piano/Ab6.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Bb6" title="Bb6" coords="917,2,930,93" ><source type='audio/mp3' src="piano/Bb6.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Db7" title="Db7" coords="956,2,965,86" ><source type='audio/mp3' src="piano/Db7.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Eb7" title="Eb7" coords="981,4,996,90" ><source type='audio/mp3' src="piano/Eb7.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Gb7" title="Gb7" coords="1023,4,1030,90" ><source type='audio/mp3' src="piano/Gb7.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Ab7" title="Ab7" coords="1044,4,1055,90" ><source type='audio/mp3' src="piano/Ab7.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="Bb7" title="Bb7" coords="1067,2,1078,92" ><source type='audio/mp3' src="piano/Bb7.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="A0" title="A0" coords="4,4,17,4,17,90,22,92,22,138,2,136" ><source type='audio/mp3' src="piano/A0.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="B0" title="B0" coords="24,93,29,92,31,4,43,4,43,138,24,138" ><source type='audio/mp3' src="piano/B0.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="C1" title="C1" coords="45,2,56,4,56,92,65,88,63,136,45,136" ><source type='audio/mp3' src="piano/C1.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="D1" title="D1" coords="68,2,81,2,79,90,86,90,86,136,63,138,65,90,68,90" ><source type='audio/mp3' src="piano/D1.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="E1" title="E1" coords="95,2,109,4,108,138,84,138,88,92,95,90" ><source type='audio/mp3' src="piano/E1.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="F1" title="F1" coords="109,4,118,4,120,90,129,88,129,136,108,135" ><source type='audio/mp3' src="piano/F1.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="G1" title="G1" coords="135,4,143,2,143,92,151,92,151,138,129,138,129,90,131,90" ><source type='audio/mp3' src="piano/G1.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="A1" title="A1" coords="158,2,167,2,165,90,172,90,172,136,152,138,152,90,160,90" ><source type='audio/mp3' src="piano/A1.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="B1" title="B1" coords="181,2,193,4,193,138,172,138,174,92,181,92" ><source type='audio/mp3' src="piano/B1.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="C2" title="C2" coords="195,4,206,4,206,93,213,93,213,136,192,138" ><source type='audio/mp3' src="piano/C2.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="D2" title="D2" coords="218,2,231,4,231,92,238,92,238,138,213,138,215,92,218,86" ><source type='audio/mp3' src="piano/D2.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="E2" title="E2" coords="245,4,260,2,258,136,238,136,236,90,245,88" ><source type='audio/mp3' src="piano/E2.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="F2" title="F2" coords="260,4,270,2,270,92,277,90,279,138,260,136" ><source type='audio/mp3' src="piano/F2.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="G2" title="G2" coords="283,2,295,4,295,92,302,90,301,138,281,136,277,90,281,90" ><source type='audio/mp3' src="piano/G2.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="A2" title="A2" coords="306,2,317,2,317,90,324,92,324,136,301,138,301,90,308,90" ><source type='audio/mp3' src="piano/A2.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="B2" title="B2" coords="331,2,344,2,344,138,322,138,322,92,331,88" ><source type='audio/mp3' src="piano/B2.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="C3" title="C3" coords="344,2,356,4,354,90,365,90,365,136,345,136" ><source type='audio/mp3' src="piano/C3.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="D3" title="D3" coords="369,2,381,2,381,92,388,92,386,138,367,136,365,86,365,86" ><source type='audio/mp3' src="piano/D3.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="E3" title="E3" coords="395,4,410,2,410,138,388,138,386,92,397,92" ><source type='audio/mp3' src="piano/E3.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="F3" title="F3" coords="408,2,419,4,420,92,431,92,431,138,408,138" ><source type='audio/mp3' src="piano/F3.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="G3" title="G3" coords="433,2,444,2,445,90,451,90,453,136,431,136,429,90,435,88" ><source type='audio/mp3' src="piano/G3.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="A3" title="A3" coords="458,2,465,2,465,88,472,86,474,138,449,138,451,92,456,90" ><source type='audio/mp3' src="piano/A3.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="B3" title="B3" coords="481,2,494,2,494,136,472,136,472,93,481,90" ><source type='audio/mp3' src="piano/B3.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="C4" title="C4" coords="494,2,506,2,504,90,517,90,515,138,494,138" ><source type='audio/mp3' src="piano/C4.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="D4" title="D4" coords="517,2,531,2,531,90,538,92,537,138,515,136,513,92,517,92" ><source type='audio/mp3' src="piano/D4.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="E4" title="E4" coords="545,2,556,2,558,138,537,135,538,90,544,88" ><source type='audio/mp3' src="piano/E4.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="C5" title="C5" coords="642,4,656,4,656,92,665,92,665,136,644,136" ><source type='audio/mp3' src="piano/C5.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="C6" title="C6" coords="792,2,806,2,803,92,814,90,815,136,794,136" ><source type='audio/mp3' src="piano/C6.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="D6" title="D6" coords="817,2,831,2,831,90,837,90,837,138,814,138,815,92,819,92" ><source type='audio/mp3' src="piano/D6.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="E6" title="E6" coords="844,4,858,2,858,138,837,138,835,93,844,92" ><source type='audio/mp3' src="piano/E6.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="F6" title="F6" coords="858,2,869,4,869,92,878,90,880,138,858,138" ><source type='audio/mp3' src="piano/F6.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="B5" title="B5" coords="781,4,794,4,794,138,774,136,772,92,780,92" ><source type='audio/mp3' src="piano/B5.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="A5" title="A5" coords="758,2,767,2,769,88,774,88,774,136,751,136,749,93,758,92" ><source type='audio/mp3' src="piano/A5.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="G5" title="G5" coords="733,2,744,2,746,93,751,92,751,138,730,138,726,95,731,92" ><source type='audio/mp3' src="piano/G5.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="F5" title="F5" coords="708,4,722,2,721,92,730,92,730,136,706,138" ><source type='audio/mp3' src="piano/F5.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="E5" title="E5" coords="696,2,708,2,706,138,687,136,685,92,694,92" ><source type='audio/mp3' src="piano/E5.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="D5" title="D5" coords="669,2,681,2,680,90,685,90,685,138,665,136,663,90,667,90" ><source type='audio/mp3' src="piano/D5.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="B4" title="B4" coords="631,2,644,2,644,138,622,136,622,93,629,92" ><source type='audio/mp3' src="piano/B4.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="A4" title="A4" coords="606,4,617,2,617,90,619,90,621,138,599,138,601,90,606,90" ><source type='audio/mp3' src="piano/A4.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="G4" title="G4" coords="583,4,596,2,596,90,601,90,601,138,579,138,578,92,585,92" ><source type='audio/mp3' src="piano/G4.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="F4" title="F4" coords="558,4,569,2,569,92,578,90,579,138,558,138" ><source type='audio/mp3' src="piano/F4.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="G6" title="G6" coords="885,2,894,2,892,92,903,93,901,136,880,133,880,93,883,90" ><source type='audio/mp3' src="piano/G6.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="A6" title="A6" coords="908,2,915,2,915,90,923,92,923,138,901,138,899,88,906,88" ><source type='audio/mp3' src="piano/A6.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="B6" title="B6" coords="931,4,944,4,940,136,921,136,924,93,931,92" ><source type='audio/mp3' src="piano/B6.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="C7" title="C7" coords="944,4,955,2,955,88,964,88,965,135,944,138" ><source type='audio/mp3' src="piano/C7.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="D7" title="D7" coords="967,2,981,2,978,92,987,93,989,138,964,138,964,86,967,86" ><source type='audio/mp3' src="piano/D7.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="E7" title="E7" coords="994,4,1008,4,1007,138,985,136,987,93,996,92" ><source type='audio/mp3' src="piano/E7.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="F7" title="F7" coords="1007,4,1021,4,1021,88,1032,92,1032,135,1008,138" ><source type='audio/mp3' src="piano/F7.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="G7" title="G7" coords="1033,2,1044,2,1042,90,1049,90,1051,136,1030,138,1030,90,1035,90" ><source type='audio/mp3' src="piano/G7.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="A7" title="A7" coords="1057,2,1067,6,1069,86,1073,86,1073,136,1051,136,1049,92,1057,90" ><source type='audio/mp3' src="piano/A7.mp3"></source></audio>

<audio onplay="ta(this);" controls style="display:block;width:200px;position:absolute;left:-1200px;top:-1200px;" id="B7" title="B7" coords="1080,2,1087,2,1087,136,1073,135,1071,93,1080,88" ><source type='audio/mp3' src="piano/B7.mp3"></source></audio>

<div id='ddarea'></div>
<div id='table_content'></div>

</body>
</html>