<!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>


<script type='text/javascript'>
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');

function tmap(what) {
if (what.trim() != "") {
var isoo=soo, suffix="", sofar=-1, postsuffix='';
var ourfour=4;
if (Math.abs(numo) > 3 || (Math.abs(numo) == 3 && what.substring(0,1) != 'C')) {
ourfour=1;
suffix='1';
}
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');
for (var ii=0; ii<oneoctave.length; ii++) {
if (what == oneoctave[ii]) {
isoo=ii;
//alert('ii=' + ii);
anoctave[0] = oneoctave[ii] + suffix;
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++;
if (oneoctave[isoo].substring(0,1) == 'C') suffix='' + ourfour;
if (what != 'Db' && oneoctave[isoo].substring(0,2) == 'Db') ourfour++;
if (what != 'Db' && oneoctave[isoo].substring(0,2) == 'Db') suffix='' + 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++;
if (oneoctave[isoo].substring(0,1) == 'C') suffix='' + ourfour;
if (what != 'Db' && oneoctave[isoo].substring(0,2) == 'Db') ourfour++;
if (what != 'Db' && oneoctave[isoo].substring(0,2) == 'Db') suffix='' + 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) {
if (what != 'Db') ourfour++;
suffix='' + eval(ourfour + 0);
//alert(what + ' ' + ourfour + ' ii=' + ii);
for (var jj=2; jj<=Math.abs(numo); jj++) {
isoo=ii;
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') ourfour++;
if (oneoctave[isoo].substring(0,1) == 'C') suffix='' + ourfour;
if (what != 'Db' && oneoctave[isoo].substring(0,2) == 'Db') ourfour++;
if (what != 'Db' && oneoctave[isoo].substring(0,2) == 'Db') suffix='' + ourfour;
//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=' ';
anoctave.push(oneoctave[isoo] + suffix + postsuffix);
}
}
}
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);
}
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;
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));
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);
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;
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);
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;
play(prewhat.replace('4','').replace('5','').replace('0','').replace('1','').replace('2','').replace('3','').replace('6','').replace('7','') + eval((four + inu) % 8));
}
}
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;
play(prewhat.replace('4','').replace('5','').replace('0','').replace('1','').replace('2','').replace('3','').replace('6','').replace('7','') + eval((four + inu) % 8));
}
}
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;
play(prewhat.replace('4','').replace('5','').replace('0','').replace('1','').replace('2','').replace('3','').replace('6','').replace('7','') + eval((four + inu) % 8));
}
}
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;
play(prewhat.replace('4','').replace('5','').replace('0','').replace('1','').replace('2','').replace('3','').replace('6','').replace('7','') + eval((four + inu) % 8));
}
}
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;
play(prewhat.replace('4','').replace('5','').replace('0','').replace('1','').replace('2','').replace('3','').replace('6','').replace('7','') + eval(four + inu));
}
}
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;
play(prewhat.replace('4','').replace('5','').replace('0','').replace('1','').replace('2','').replace('3','').replace('6','').replace('7','') + eval((five + inu) % 8));
}
}
splay();
numtogether=1;
} else if (prewhat != '') {
play('');
}
}

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

function play(wht) {
if (wht == '' && prewhat != '') {
wht=prewhat;
prewhat='';
} else if (wht.indexOf('piano/') != -1) {
caboffrank=9;
}
if (wht != '') {
var 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';
document.getElementById('iaudio' + caboffrank).src=what;
caboffrank=0;
}
}
</script>
</head>
<body onload=" if (navigator.userAgent.match(/Android|iPhone|iPad|iPod/i)) { location.href=document.URL.replace('.html','.htm'); } if (tonic.trim() != '') { 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;" />
<map id="bz14285" name="bz14285">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="C5" title="C5" coords="642,4,656,4,656,92,665,92,665,136,644,136" onClick="play('piano/C5.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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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>
<h1>Piano Playing</h1>
<h3>RJM Programming</h3>
<h3>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>
<form method='GET' action='./piano.html' id='fpiano'>
<table><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'><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>
<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 type='submit' 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>
</body>
</html>