<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Music Note Player and Scale Player - RJM Programming - May, 2015</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script src="../inc/shim/Base64.js" type="text/javascript"></script>
<script src="../inc/shim/Base64binary.js" type="text/javascript"></script>
<script src="../inc/shim/WebAudioAPI.js" type="text/javascript"></script>

<script src="../js/midi/audioDetect.js" type="text/javascript"></script>
<script src="../js/midi/gm.js" type="text/javascript"></script>
<script src="../js/midi/loader.js" type="text/javascript"></script>
<script src="../js/midi/plugin.audiotag.js" type="text/javascript"></script>
<script src="../js/midi/plugin.webaudio.js" type="text/javascript"></script>
<script src="../js/midi/plugin.webmidi.js" type="text/javascript"></script>

<script src="../js/util/dom_request_xhr.js" type="text/javascript"></script>
<script src="../js/util/dom_request_script.js" type="text/javascript"></script>

<style>

.singleright {
text-decoration: underline;
cursor: crosshair;
}

.cmeter {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}

#myxtbody {
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
align: top;
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
transform: rotate(-90deg);
margin-top: -800px;
margin-left: 850px;
opacity: 1.0;
background-color: white;
}

#myxtd2 {
float: right;
}

#myxh1right {
margin-top: 200px;
}

</style>
<script type='text/javascript'>
var globvar=0;
var startnote;
var allhis="";
var thism=1;
var prevtr=-1;
var pinnote=-1;
var delay=0;
var lastn=-1;
var sm="";
var maxfactor=1.0;

function noteworth(notenum) {
factor = eval((document.getElementById('speed').value * Math.abs(notenum)) / maxfactor);
return factor;
}

function insong(sheetmusic) { // assumes comma separators
// add a suffix of + if two hands are playing together
// normal word is a speed descriptor
// normal number is a note
// -1 is crotchet, -2 is minum, -0.5 is quaver, -0.25 is semi-quaver etcetera
// 0 (alone) is for a rest of the duration above
// 0127 is normal loudness, etcetera
var done="", offset=0.0, offset2=0.0, planbit="", isrest=false, delaydelim='', notedelim='', curnote=-1, curvelocity=127, curdelay=-1, jk, ijk, prevvelocity=-1, prefix="", curval=1, kji=0, allhhh, bitshhbefore, notes, curnotes="", delays, curdelays="";
var plan=" MIDI.loadPlugin({ \n";
plan += "soundfontUrl: './soundfont/', \n";
plan += "instrument: document.getElementById('instrument').value.toLowerCase(), \n";
plan += "onprogress: function(state, progress) { \n";
plan += " console.log(state, progress); \n";
plan += "}, \n";
plan += "onsuccess: function() { \n";
plan += " delay = 0.0; \n";
plan += " var note = 21; \n";
plan += " var velocity = 127; \n";
plan += " thism=1; \n";
plan += " setTimeout(cleartd, 1000); \n";
plan += "}}); \n\n";

var mididata=sheetmusic.split(',');
if (mididata[0].substring(0,1) >= 'A') {
kji = 1;
if (mididata[0].toLowerCase().indexOf("slowx") != -1) maxfactor=eval(mididata[0].toLowerCase().replace("slowx", ""));
if (mididata[0].toLowerCase().indexOf("fastx") != -1) maxfactor=eval(mididata[0].toLowerCase().replace("fastx", ""));
if (mididata[0].toLowerCase().indexOf("slowby") != -1) maxfactor=eval(1.0 / mididata[0].toLowerCase().replace("slowby", ""));
if (mididata[0].toLowerCase().indexOf("fastby") != -1) maxfactor=eval(1.0 / mididata[0].toLowerCase().replace("fastby", ""));
if (mididata[0].toLowerCase() == "largo") document.getElementById('speed').value='0.30';
if (mididata[0].toLowerCase() == "larghetto") document.getElementById('speed').value='0.25';
if (mididata[0].toLowerCase() == "adagio") document.getElementById('speed').value='0.20';
if (mididata[0].toLowerCase() == "andante") document.getElementById('speed').value='0.15';
if (mididata[0].toLowerCase() == "moderato") document.getElementById('speed').value='0.10';
if (mididata[0].toLowerCase() == "allegro") document.getElementById('speed').value='0.05';
if (mididata[0].toLowerCase() == "presto") document.getElementById('speed').value='0.025';
}
if (mididata[1].substring(0,1) >= 'A') {
kji = 2;
if (mididata[1].toLowerCase().indexOf("slowx") != -1) maxfactor=eval(mididata[1].toLowerCase().replace("slowx", ""));
if (mididata[1].toLowerCase().indexOf("fastx") != -1) maxfactor=eval(mididata[1].toLowerCase().replace("fastx", ""));
if (mididata[1].toLowerCase().indexOf("slowby") != -1) maxfactor=eval(1.0 / mididata[1].toLowerCase().replace("slowby", ""));
if (mididata[1].toLowerCase().indexOf("fastby") != -1) maxfactor=eval(1.0 / mididata[1].toLowerCase().replace("fastby", ""));
if (mididata[1].toLowerCase() == "largo") document.getElementById('speed').value='0.30';
if (mididata[1].toLowerCase() == "larghetto") document.getElementById('speed').value='0.25';
if (mididata[1].toLowerCase() == "adagio") document.getElementById('speed').value='0.20';
if (mididata[1].toLowerCase() == "andante") document.getElementById('speed').value='0.15';
if (mididata[1].toLowerCase() == "moderato") document.getElementById('speed').value='0.10';
if (mididata[1].toLowerCase() == "allegro") document.getElementById('speed').value='0.05';
if (mididata[1].toLowerCase() == "presto") document.getElementById('speed').value='0.025';
}
for (ijk=kji; ijk<mididata.length; ijk++) {

if (mididata[ijk].indexOf("+") == -1 && curnotes.indexOf(",") != -1) {

if (curnote >= 0 && curvelocity >= 0 && curdelay >= 0) { // is valid data here
if (prevvelocity == curvelocity) {
prefix="";
} else {
prefix=" MIDI.setVolume(0, " + curvelocity + "); ";
prevvelocity = curvelocity;
}

if (curnote == 0) { // rest
plan=plan.replace("}});", prefix + "delay+=" + curdelay + "; \n }}); \n");
prefix = "";
} else if (curnotes.indexOf(",") != -1) {
notes=curnotes.split(',');
delays=curdelays.split(',');
//alert(notes.length);
offset=0.0;
offset2=0.0;
done="";
for (jk=0; jk<notes.length; jk++) {
planbit=prefix + "\n";
planbit += " MIDI.noteOn(0, " + notes[jk] + ", " + curvelocity + ", delay + " + offset + "); \n";
if (jk != 0) {
offset2=0.0;
offset2+=eval(offset);
offset2+=eval(delays[jk]);
planbit += " MIDI.noteOff(0, " + notes[jk] + ", delay + " + offset2 + "); \n";
offset+=eval(delays[jk]);
if (offset >= delays[0]) {
planbit += done;
done="";
delays[0]=-1.0;
}
} else {
done = " MIDI.noteOff(0, " + notes[0] + ", delay + " + delays[0] + "); \n";
}
planbit += " }}); \n";
plan=plan.replace("}});", planbit);
prefix = "";
}
planbit += done;
planbit = "setmeter(" + notes[0] + "); \n";
planbit += "thism++; lastn=" + notes[0] + "; \n";
planbit += "delay+=" + Math.max(delays[0], offset2) + "; \n";
planbit += " }}); \n";
plan=plan.replace("}});", planbit);
} else if (isrest) { // rest
plan=plan.replace("}});", prefix + "delay+=" + curdelay + "; \n }}); \n");
prefix = "";
} else {
planbit=prefix + "\n";
planbit += " MIDI.noteOn(0, " + curnote + ", " + curvelocity + ", delay); \n";
planbit += " MIDI.noteOff(0, " + curnote + ", delay + " + curdelay + "); \n";
planbit += "setmeter(" + curnote + "); \n";
planbit += "thism++; lastn=" + curnote + "; \n";
planbit += "delay+=" + curdelay + "; \n";
planbit += " }}); \n";
plan=plan.replace("}});", planbit);
prefix = "";
}
curnote = -1;
curnotes = "";
curdelays = "";
curdelay = -1;
prefix = "";
delaydelim='';
notedelim='';
isrest = false;
}
}
//}

if (mididata[ijk].substring(0,1) == "-") {
curval=mididata[ijk].replace("+","");
curdelay = noteworth(curval);
curdelays = curdelays + delaydelim + curdelay;
delaydelim = ',';
} else if (mididata[ijk].replace("+","") == "0") {
isrest = true;
if (curnote < 0) curnote=0;
} else if (mididata[ijk].substring(0,1) == "0") {
curvelocity = mididata[ijk].substring(1).replace("+","");
} else if (mididata[ijk].indexOf(".") != -1) {
if (allhis == "") allhis = document.body.innerHTML;
allhhh=allhis.split(">" + mididata[ijk].replace("+","") + "<");
bitshhbefore=allhhh[0].split(">");
curnote = bitshhbefore[bitshhbefore.length - 4].replace("</td", "");
curnotes = curnotes + notedelim + curnote;
notedelim = ',';
} else {
curnote = mididata[ijk].replace("+","");
curnotes = curnotes + notedelim + curnote;
notedelim = ',';
}

if (curnote >= 0 && curvelocity >= 0 && curdelay >= 0 && mididata[ijk].indexOf("+") == -1) { // is valid data here
if (prevvelocity == curvelocity) {
prefix="";
} else {
prefix=" MIDI.setVolume(0, " + curvelocity + "); ";
prevvelocity = curvelocity;
}

if (curnote == 0) { // rest
plan=plan.replace("}});", prefix + "delay+=" + curdelay + "; \n }}); \n");
prefix = "";
} else if (curnotes.indexOf(",") != -1) {
notes=curnotes.split(',');
delays=curdelays.split(',');
done="";
offset=0.0;
offset2=0.0;
for (jk=0; jk<notes.length; jk++) {
planbit=prefix + "\n";
planbit += " MIDI.noteOn(0, " + notes[jk] + ", " + curvelocity + ", delay + " + offset + "); \n";
if (jk != 0) {
offset2=0.0;
offset2+=eval(offset);
offset2+=eval(delays[jk]);
planbit += " MIDI.noteOff(0, " + notes[jk] + ", delay + " + offset2 + "); \n";
offset+=eval(delays[jk]);
if (offset >= delays[0]) {
planbit += done;
done="";
delays[0]=-1.0;
}
} else {
done = " MIDI.noteOff(0, " + notes[0] + ", delay + " + delays[0] + "); \n";
}
planbit += " }}); \n";
plan=plan.replace("}});", planbit);
prefix = "";
}
planbit += done;
planbit = "setmeter(" + notes[0] + "); \n";
planbit += "thism++; lastn=" + notes[0] + "; \n";
planbit += "delay+=" + Math.max(delays[0], offset2) + "; \n";
planbit += " }}); \n";
plan=plan.replace("}});", planbit);
} else if (isrest) { // rest
plan=plan.replace("}});", prefix + "delay+=" + curdelay + "; \n }}); \n");
prefix = "";
} else {
planbit=prefix + "\n";
planbit += " MIDI.noteOn(0, " + curnote + ", " + curvelocity + ", delay); \n";
planbit += " MIDI.noteOff(0, " + curnote + ", delay + " + curdelay + "); \n";
planbit += "setmeter(" + curnote + "); \n";
planbit += "thism++; lastn=" + curnote + "; \n";
planbit += "delay+=" + curdelay + "; \n";
planbit += " }}); \n";
plan=plan.replace("}});", planbit);
prefix = "";
}
curnote = -1;
curnotes = "";
curdelays = "";
curdelay = -1;
prefix = "";
delaydelim='';
notedelim='';
isrest = false;
}
}

//alert(plan);
eval(plan); // play music
}

function rotatemaybe(isel) {
var jj=21;
if (isel.id == 'instrument') {
var iv=document.getElementById('instrument').value;
if (iv == document.getElementById('instrument').value.toLowerCase()) {
if (1 == 2) location.href='./MyScale.html?instrument=' + document.getElementById('instrument').value + "&myselpos=left&mode=" + document.getElementById('mode').value + "&speed=" + document.getElementById('speed').value;
} else {
alert(99);
document.body.innerHTML = document.body.innerHTML.replace('"mytbody"', '"myxtbody"').replace('"mytd2"', '"myxtd2"').replace('"myh1right"', '"myxh1right"');
document.getElementById('myselpos').value='top';
while (jj < 109) {
document.getElementById('tr' + jj).style.backgroundColor='white';
jj = eval(1 + jj);
}
}
} else if (isel.value == "top") {
document.body.innerHTML = document.body.innerHTML.replace('"mytbody"', '"myxtbody"').replace('"mytd2"', '"myxtd2"').replace('"myh1right"', '"myxh1right"');
document.getElementById('myselpos').value='top';
while (jj < 109) {
document.getElementById('tr' + jj).style.backgroundColor='white';
jj = eval(1 + jj);
}
} else {
location.href='./MyScale.html?instrument=' + document.getElementById('instrument').value + "&myselpos=left&mode=" + document.getElementById('mode').value + "&speed=" + document.getElementById('speed').value;
}
}

function cleartd() {
var jj=0;
var ourinnerHTML="";
var oi = document.getElementById('mytbody');
if (oi == null) jj=21;
if (oi == null) oi = document.getElementById('myxtbody');
ourinnerHTML=oi.innerHTML.replace(/style="background-color: rgb(255, 192, 203);"/g, '').replace(/style="background-color: pink;"/g, '').replace(/style="background-color:pink;"/g, '').replace(/style="background-color: yellow;"/g, '').replace(/style="background-color:yellow;"/g, '').replace(/style=.background-color:/g, '');
while (ourinnerHTML.indexOf("rgb(255") != -1) {
ourinnerHTML = ourinnerHTML.replace("rgb(255,","");
ourinnerHTML = ourinnerHTML.replace("192,","");
ourinnerHTML = ourinnerHTML.replace('203);"','');
}
oi.innerHTML = ourinnerHTML;
if (jj > 0) {
while (jj < 109) {
document.getElementById('tr' + jj).style.backgroundColor='white';
jj = eval(1 + jj);
}
}
}

function settd() {
if (prevtr >= 0 && 1 == 2) {
//alert(prevtr);
document.getElementById('tr' + prevtr).innerHTML = document.getElementById('tr' + prevtr).innerHTML.replace('style="background-color:pink;"', "");
}
prevtr = pinnote;
document.getElementById('tr' + prevtr).innerHTML = document.getElementById('tr' + prevtr).innerHTML.replace('class="singleright"', ' style="background-color:pink;" class="singleright"');
}

function sett() {
analyzerequest("-1");
globvar=eval(1 + globvar);
}

function setmeter(innote) {
//pinnote=innote;
//setTimeout(settd, eval(delay * 1000));
document.getElementById('tr' + innote).style.backgroundColor='pink';
if (allhis == "") allhis = document.body.innerHTML;
var alln=allhis.split(">" + innote + "<");
var allns=alln[1].split(">");
if (allns.length > 4) {
var freqs=allns[4].split("<");
//alert(freqs[0]);
var mism=document.getElementById('mymeter' + thism);
if (mism == null) {
//document.getElementById('dmeter').innerHTML = document.getElementById('dmeter').innerHTML.replace("</tr>", "<td><meter class='cmeter' id='mymeter" + thism + "' min='0.0' max='5000.0' value='0.0' style='width:180px;'></meter></td></tr>");
document.getElementById('dmeter').innerHTML = document.getElementById('dmeter').innerHTML.replace("</tbody>", "<tr><td><meter class='cmeter' id='mymeter" + thism + "' min='0.0' max='5000.0' value='0.0' style='width:480px;'></meter></td></tr></tbody>");
mism=document.getElementById('mymeter' + thism);
}
mism.value = freqs[0];
}
}

function analyzerequest(whatis,whatyouaskedfor) {
whatis.style.backgroundColor='yellow';
if (whatyouaskedfor != "") {
if (whatyouaskedfor.substring(0,1) == "-") whatyouaskedfor=globvar;
if (whatyouaskedfor.indexOf(".") == -1 && whatyouaskedfor.substring(0,1) >= "0" && whatyouaskedfor.substring(0,1) <= "9") {
MIDI.loadPlugin({
soundfontUrl: "./soundfont/",
instrument: document.getElementById('instrument').value.toLowerCase(),
onprogress: function(state, progress) {
console.log(state, progress);
},
onsuccess: function() {
delay = 0.0; // play one note every quarter second
var note = whatyouaskedfor; // the MIDI note
var velocity = 127; // how hard the note hits
var huh = document.URL.split("?");
thism=1;
setTimeout(cleartd, 1000);
// play the note
MIDI.setVolume(0, 127);
MIDI.noteOn(0, note, velocity, delay);
MIDI.noteOff(0, note, delay + 0.75);
setmeter(note);
lastn=note;
}
});
} else if (whatyouaskedfor.indexOf(".") != -1) {
//alert(99);
setTimeout(cleartd, 1000);
document.getElementById('mymeter1').value = whatyouaskedfor.replace(/ /g, "");
if (allhis == "") allhis = document.body.innerHTML;
var allhh=allhis.split(">" + whatyouaskedfor + "<");
//alert(allhh.length);
var bitshbefore=allhh[0].split(">");
startnote=bitshbefore[bitshbefore.length - 4].replace("</td", "");
lastn=startnote;
MIDI.loadPlugin({
soundfontUrl: "./soundfont/",
instrument: document.getElementById('instrument').value.toLowerCase(),
onprogress: function(state, progress) {
console.log(state, progress);
},
onsuccess: function() {
delay = 0.0; // play one note every quarter second
var note = startnote; // the MIDI note
var velocity = 127; // how hard the note hits
var huh = document.URL.split("?");
thism=1;
// play the note
MIDI.setVolume(0, 127);
MIDI.noteOn(0, note, velocity, delay);
MIDI.noteOff(0, note, delay + 0.75);
setmeter(note);
}
});
} else { // try scale
setTimeout(cleartd, 8000);
if (allhis == "") allhis = document.body.innerHTML;
var allh=allhis.split(">" + whatyouaskedfor + "<");
var bitsbefore=allh[0].split(">");
startnote=bitsbefore[bitsbefore.length - 2].replace("</td", "");
lastn=startnote;
MIDI.loadPlugin({
soundfontUrl: "./soundfont/",
instrument: document.getElementById('instrument').value.toLowerCase(),
onprogress: function(state, progress) {
console.log(state, progress);
},
onsuccess: function() {
var ournumo=document.getElementById('mode').value.length;
var mode=document.getElementById('mode').value;
var i, numo;
delay = 0.0; // play one note every quarter second
var note = startnote; // the MIDI note
var velocity = 127; // how hard the note hits
var factor = eval(document.getElementById('speed').value); //0.15; //0.75;
var huh = document.URL.split("?");
// play the major scale
globvar = startnote;
//for (i=startnote; i=(startnote + 12); i++) {
//setTimeout(sett, delay);
//delay = eval(250 + delay);
//}
//alert(note);
thism=1;
MIDI.setVolume(0, 127);
MIDI.noteOn(0, note, velocity, delay);
setmeter(note);
delay += factor;
MIDI.noteOff(0, note, delay); // + factor);
for (numo=1; numo<=ournumo; numo++) {
note++;
note++; // tone major and minor
if (mode < 2) {
delay += factor;
MIDI.noteOn(0, note, velocity, delay); // + factor * 2);
delay += factor;
MIDI.noteOff(0, note, delay); // + factor * 3);
thism++;
setmeter(note);
}
note++;
if (eval(mode % 2) != 1) note++; // tone
if (mode >= 0) {
delay += factor;
MIDI.noteOn(0, note, velocity, delay); // + 3.0);
delay += factor;
MIDI.noteOff(0, note, delay); // + 3.75);
thism++;
setmeter(note);
}
note++; // semitone
if (eval(mode % 2) == 1) note++; // tone
if (mode < 2) {
delay += factor;
MIDI.noteOn(0, note, velocity, delay); // + 4.5);
delay += factor;
MIDI.noteOff(0, note, delay); // + 5.25);
thism++;
setmeter(note);
}
note++;
note++; // tone major and minor
if (mode >= 0) {
delay += factor;
MIDI.noteOn(0, note, velocity, delay); // + 6.0);
delay += factor;
MIDI.noteOff(0, note, delay); // + 6.75);
thism++;
setmeter(note);
}
note++;
if (eval(mode % 2) != 1) note++; // tone
if (mode < 2) {
delay += factor;
MIDI.noteOn(0, note, velocity, delay); // + 7.5);
delay += factor;
MIDI.noteOff(0, note, delay); // + 8.25);
thism++;
setmeter(note);
}
note++;
note++; // tone
if (eval(mode % 2) == 1) note++; // minor raised
if (mode < 2) {
delay += factor;
MIDI.noteOn(0, note, velocity, delay); // + 9.0);
delay += factor;
MIDI.noteOff(0, note, delay); // + 9.75);
thism++;
setmeter(note);
}
note++; // semitone
if (mode >= 0) {
delay += factor;
MIDI.noteOn(0, note, velocity, delay); // + 10.5);
delay += factor;
MIDI.noteOff(0, note, delay); // + 11.25);
thism++;
setmeter(note);
}
}

for (numo=1; numo<=ournumo; numo++) {
// Going back
note--; // semitone
if (mode < 2) {
delay += factor;
MIDI.noteOn(0, note, velocity, delay); // + 12.0);
delay += factor;
MIDI.noteOff(0, note, delay); // + 12.75);
thism--;
setmeter(note);
}
note--;
note--; // tone
if (eval(mode % 2) == 1) note--; // minor raised
if (mode < 2) {
delay += factor;
MIDI.noteOn(0, note, velocity, delay); // + 13.5);
delay += factor;
MIDI.noteOff(0, note, delay); // + 14.25);
thism--;
setmeter(note);
}
note--;
if (eval(mode % 2) != 1) note--; // tone
if (mode >= 0) {
delay += factor;
MIDI.noteOn(0, note, velocity, delay); // + 15.0);
delay += factor;
MIDI.noteOff(0, note, delay); // + 15.75);
thism--;
setmeter(note);
}
note--;
note--; // tone major and minor
if (mode < 2) {
delay += factor;
MIDI.noteOn(0, note, velocity, delay); // + 16.5);
delay += factor;
MIDI.noteOff(0, note, delay); // + 17.25);
thism--;
setmeter(note);
}
note--; // semitone
if (eval(mode % 2) == 1) note--; // tone
if (mode >= 0) {
delay += factor;
MIDI.noteOn(0, note, velocity, delay); // + 18.0);
delay += factor;
MIDI.noteOff(0, note, delay); // + 18.75);
thism--;
setmeter(note);
}
note--;
if (eval(mode % 2) != 1) note--; // tone
if (mode < 2) {
delay += factor;
MIDI.noteOn(0, note, velocity, delay); // + 19.5);
delay += factor;
MIDI.noteOff(0, note, delay); // + 20.25);
thism--;
setmeter(note);
}
note--;
note--; // tone major and minor
if (mode >= 0) {
delay += factor;
MIDI.noteOn(0, note, velocity, delay); // + 21.0);
delay += factor;
MIDI.noteOff(0, note, delay); // + 21.75);
thism--;
setmeter(note);
}
}

}
});

//setTimeout(cleartd, 8000);
}
}
}

function populatesel() {
document.getElementById('instrument').value=location.search.split('instrument=')[1] ? location.search.split('instrument=')[1].split('&')[0] : 'acoustic_grand_piano';
document.getElementById('mode').value=location.search.split('mode=')[1] ? location.search.split('mode=')[1].split('&')[0] : '0';
document.getElementById('speed').value=location.search.split('speed=')[1] ? location.search.split('speed=')[1].split('&')[0] : 'Andante';
document.getElementById('myselpos').value=location.search.split('myselpos=')[1] ? location.search.split('myselpos=')[1].split('&')[0] : 'left';
sm=location.search.split('sheetmusic=')[1] ? location.search.split('sheetmusic=')[1].split('&')[0] : '';
if (sm != '') {
insong(sm);
}
}
</script>
</head>
<body style='background-color: yellow;'>


<table align='center'>
<tbody>
<tr>
<td id='mytd1'>
<table id='mytable' class="single" style='background-color: white; border: 5px solid brown;'>
<thead>
<tr>
<th title='Click to hear this note'>MIDI Note <select onchange'rotatemaybe(this);' id='instrument'>
<option value="acoustic_grand_piano">Acoustic Grand Piano</option>
<option value="synth_drum">Synthesised Drum</option>

</select></th>
<th title='Click to hear scale or arpeggio for this note'>ANSI Note <select id='mode'>
<option value="0">Major Scale</option><option value="1">Minor Scale</option><option value="2">Major Arpeggio</option><option value="3">Minor Arpeggio</option>
<option value="00">Major Scale (2 octaves)</option><option value="01">Minor Scale (2 octaves)</option><option value="02">Major Arpeggio (2 octaves)</option><option value="03">Minor Arpeggio (2 octaves)</option>
<option value="000">Major Scale (3 octaves)</option><option value="001">Minor Scale (3 octaves)</option><option value="002">Major Arpeggio (3 octaves)</option><option value="003">Minor Arpeggio (3 octaves)</option>
<option value="0000">Major Scale (4 octaves)</option><option value="0001">Minor Scale (4 octaves)</option><option value="0002">Major Arpeggio (4 octaves)</option><option value="0003">Minor Arpeggio (4 octaves)</option>
</select></th>
<th title='Click to hear this frequency'>Frequency (hz) <select id='speed'>
<option value="0.30">Largo</option>
<option value="0.25">Larghetto</option>
<option value="0.20">Adagio</option>
<option value="0.15" selected>Andante</option>
<option value="0.10">Moderato</option>
<option value="0.05">Allegro</option>
<option value="0.025">Presto</option>
</select></th></tr>
</thead><tbody id='mytbody'>
<tr><td id='tr21' class="singleright" onclick="analyzerequest(this, this.innerHTML);">21</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">A0</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 27.5</td></tr>
<tr bgcolor="#cccccc"><td id='tr22' class="singleright" onclick="analyzerequest(this, this.innerHTML);">22</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">A#0</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 29.1</td></tr>
<tr><td id='tr23' class="singleright" onclick="analyzerequest(this, this.innerHTML);">23</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">B0</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 30.9</td></tr>
<tr><td id='tr24' class="singleright" onclick="analyzerequest(this, this.innerHTML);">24</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">C1</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 32.7</td></tr>
<tr bgcolor="#cccccc"><td id='tr25' class="singleright" onclick="analyzerequest(this, this.innerHTML);">25</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">C#1</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 34.6</td></tr>
<tr><td id='tr26' class="singleright" onclick="analyzerequest(this, this.innerHTML);">26</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">D1</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 36.7</td></tr>
<tr bgcolor="#cccccc"><td id='tr27' class="singleright" onclick="analyzerequest(this, this.innerHTML);">27</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">D#1</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 38.9</td></tr>
<tr><td id='tr28' class="singleright" onclick="analyzerequest(this, this.innerHTML);">28</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">E1</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 41.2</td></tr>
<tr><td id='tr29' class="singleright" onclick="analyzerequest(this, this.innerHTML);">29</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">F1</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 43.7</td></tr>
<tr bgcolor="#cccccc"><td id='tr30' class="singleright" onclick="analyzerequest(this, this.innerHTML);">30</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">F#1</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 46.2</td></tr>
<tr><td id='tr31' class="singleright" onclick="analyzerequest(this, this.innerHTML);">31</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">G1</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 49.0</td></tr>
<tr bgcolor="#cccccc"><td id='tr32' class="singleright" onclick="analyzerequest(this, this.innerHTML);">32</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">G#1</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 51.9</td></tr>
<tr><td id='tr33' class="singleright" onclick="analyzerequest(this, this.innerHTML);">33</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">A1</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 55.0</td></tr>
<tr bgcolor="#cccccc"><td id='tr34' class="singleright" onclick="analyzerequest(this, this.innerHTML);">34</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">A#1</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 58.3</td></tr>
<tr><td id='tr35' class="singleright" onclick="analyzerequest(this, this.innerHTML);">35</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">B1</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 61.7</td></tr>
<tr><td id='tr36' class="singleright" onclick="analyzerequest(this, this.innerHTML);">36</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">C2</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 65.4</td></tr>
<tr bgcolor="#cccccc"><td id='tr37' class="singleright" onclick="analyzerequest(this, this.innerHTML);">37</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">C#2</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 69.3</td></tr>
<tr><td id='tr38' class="singleright" onclick="analyzerequest(this, this.innerHTML);">38</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">D2</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 73.4</td></tr>
<tr bgcolor="#cccccc"><td id='tr39' class="singleright" onclick="analyzerequest(this, this.innerHTML);">39</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">D#2</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 77.8</td></tr>
<tr><td id='tr40' class="singleright" onclick="analyzerequest(this, this.innerHTML);">40</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">E2</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 82.4</td></tr>
<tr><td id='tr41' class="singleright" onclick="analyzerequest(this, this.innerHTML);">41</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">F2</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 87.3</td></tr>
<tr bgcolor="#cccccc"><td id='tr42' class="singleright" onclick="analyzerequest(this, this.innerHTML);">42</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">F#2</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 92.5</td></tr>
<tr><td id='tr43' class="singleright" onclick="analyzerequest(this, this.innerHTML);">43</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">G2</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);"> 98.0</td></tr>
<tr bgcolor="#cccccc"><td id='tr44' class="singleright" onclick="analyzerequest(this, this.innerHTML);">44</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">G#2</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">103.8</td></tr>
<tr><td id='tr45' class="singleright" onclick="analyzerequest(this, this.innerHTML);">45</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">A2</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">110.0</td></tr>
<tr bgcolor="#cccccc"><td id='tr46' class="singleright" onclick="analyzerequest(this, this.innerHTML);">46</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">A#2</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">116.5</td></tr>
<tr><td id='tr47' class="singleright" onclick="analyzerequest(this, this.innerHTML);">47</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">B2</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">123.5</td></tr>
<tr><td id='tr48' class="singleright" onclick="analyzerequest(this, this.innerHTML);">48</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">C3</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">130.8</td></tr>
<tr bgcolor="#cccccc"><td id='tr49' class="singleright" onclick="analyzerequest(this, this.innerHTML);">49</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">C#3</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">138.6</td></tr>
<tr><td id='tr50' class="singleright" onclick="analyzerequest(this, this.innerHTML);">50</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">D3</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">146.8</td></tr>
<tr bgcolor="#cccccc"><td id='tr51' class="singleright" onclick="analyzerequest(this, this.innerHTML);">51</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">D#3</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">155.6</td></tr>
<tr><td id='tr52' class="singleright" onclick="analyzerequest(this, this.innerHTML);">52</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">E3</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">164.8</td></tr>
<tr><td id='tr53' class="singleright" onclick="analyzerequest(this, this.innerHTML);">53</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">F3</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">174.6</td></tr>
<tr bgcolor="#cccccc"><td id='tr54' class="singleright" onclick="analyzerequest(this, this.innerHTML);">54</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">F#3</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">185.0</td></tr>
<tr><td id='tr55' class="singleright" onclick="analyzerequest(this, this.innerHTML);">55</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">G3</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">196.0</td></tr>
<tr bgcolor="#cccccc"><td id='tr56' class="singleright" onclick="analyzerequest(this, this.innerHTML);">56</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">G#3</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">207.7</td></tr>
<tr><td id='tr57' class="singleright" onclick="analyzerequest(this, this.innerHTML);">57</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">A3</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">220.0</td></tr>
<tr bgcolor="#cccccc"><td id='tr58' class="singleright" onclick="analyzerequest(this, this.innerHTML);">58</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">A#3</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">233.1</td></tr>
<tr><td id='tr59' class="singleright" onclick="analyzerequest(this, this.innerHTML);">59</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">B3</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">246.9</td></tr>
<tr><td id='tr60' class="singleright" onclick="analyzerequest(this, this.innerHTML);">60</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">C4 (middle C)</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">261.6</td></tr>
<tr bgcolor="#cccccc"><td id='tr61' class="singleright" onclick="analyzerequest(this, this.innerHTML);">61</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">C#4</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">277.2</td></tr>
<tr><td id='tr62' class="singleright" onclick="analyzerequest(this, this.innerHTML);">62</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">D4</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">293.7</td></tr>
<tr bgcolor="#cccccc"><td id='tr63' class="singleright" onclick="analyzerequest(this, this.innerHTML);">63</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">D#4</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">311.1</td></tr>
<tr><td id='tr64' class="singleright" onclick="analyzerequest(this, this.innerHTML);">64</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">E4</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">329.6</td></tr>
<tr><td id='tr65' class="singleright" onclick="analyzerequest(this, this.innerHTML);">65</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">F4</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">349.2</td></tr>
<tr bgcolor="#cccccc"><td id='tr66' class="singleright" onclick="analyzerequest(this, this.innerHTML);">66</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">F#4</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">370.0</td></tr>
<tr><td id='tr67' class="singleright" onclick="analyzerequest(this, this.innerHTML);">67</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">G4</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">392.0</td></tr>
<tr bgcolor="#cccccc"><td id='tr68' class="singleright" onclick="analyzerequest(this, this.innerHTML);">68</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">G#4</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">415.3</td></tr>
<tr><td id='tr69' class="singleright" onclick="analyzerequest(this, this.innerHTML);">69</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">A4</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">440.0</td></tr>
<tr bgcolor="#cccccc"><td id='tr70' class="singleright" onclick="analyzerequest(this, this.innerHTML);">70</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">A#4</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">466.2</td></tr>
<tr><td id='tr71' class="singleright" onclick="analyzerequest(this, this.innerHTML);">71</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">B4</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">493.9</td></tr>
<tr><td id='tr72' class="singleright" onclick="analyzerequest(this, this.innerHTML);">72</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">C5</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">523.3</td></tr>
<tr bgcolor="#cccccc"><td id='tr73' class="singleright" onclick="analyzerequest(this, this.innerHTML);">73</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">C#5</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">554.4</td></tr>
<tr><td id='tr74' class="singleright" onclick="analyzerequest(this, this.innerHTML);">74</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">D5</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">587.3</td></tr>
<tr bgcolor="#cccccc"><td id='tr75' class="singleright" onclick="analyzerequest(this, this.innerHTML);">75</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">D#5</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">622.3</td></tr>
<tr><td id='tr76' class="singleright" onclick="analyzerequest(this, this.innerHTML);">76</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">E5</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">659.3</td></tr>
<tr><td id='tr77' class="singleright" onclick="analyzerequest(this, this.innerHTML);">77</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">F5</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">698.5</td></tr>
<tr bgcolor="#cccccc"><td id='tr78' class="singleright" onclick="analyzerequest(this, this.innerHTML);">78</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">F#5</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">740.0</td></tr>
<tr><td id='tr79' class="singleright" onclick="analyzerequest(this, this.innerHTML);">79</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">G5</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">784.0</td></tr>
<tr bgcolor="#cccccc"><td id='tr80' class="singleright" onclick="analyzerequest(this, this.innerHTML);">80</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">G#5</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">830.6</td></tr>
<tr><td id='tr81' class="singleright" onclick="analyzerequest(this, this.innerHTML);">81</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">A5</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">880.0</td></tr>
<tr bgcolor="#cccccc"><td id='tr82' class="singleright" onclick="analyzerequest(this, this.innerHTML);">82</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">A#5</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">932.3</td></tr>
<tr><td id='tr83' class="singleright" onclick="analyzerequest(this, this.innerHTML);">83</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">B5</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">987.8</td></tr>
<tr><td id='tr84' class="singleright" onclick="analyzerequest(this, this.innerHTML);">84</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">C6</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">1046.5</td></tr>
<tr bgcolor="#cccccc"><td id='tr85' class="singleright" onclick="analyzerequest(this, this.innerHTML);">85</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">C#6</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">1108.7</td></tr>
<tr><td id='tr86' class="singleright" onclick="analyzerequest(this, this.innerHTML);">86</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">D6</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">1174.7</td></tr>
<tr bgcolor="#cccccc"><td id='tr87' class="singleright" onclick="analyzerequest(this, this.innerHTML);">87</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">D#6</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">1244.5</td></tr>
<tr><td id='tr88' class="singleright" onclick="analyzerequest(this, this.innerHTML);">88</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">E6</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">1318.5</td></tr>
<tr><td id='tr89' class="singleright" onclick="analyzerequest(this, this.innerHTML);">89</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">F6</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">1396.9</td></tr>
<tr bgcolor="#cccccc"><td id='tr90' class="singleright" onclick="analyzerequest(this, this.innerHTML);">90</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">F#6</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">1480.0</td></tr>
<tr><td id='tr91' class="singleright" onclick="analyzerequest(this, this.innerHTML);">91</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">G6</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">1568.0</td></tr>
<tr bgcolor="#cccccc"><td id='tr92' class="singleright" onclick="analyzerequest(this, this.innerHTML);">92</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">G#6</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">1661.2</td></tr>
<tr><td id='tr93' class="singleright" onclick="analyzerequest(this, this.innerHTML);">93</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">A6</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">1760.0</td></tr>
<tr bgcolor="#cccccc"><td id='tr94' class="singleright" onclick="analyzerequest(this, this.innerHTML);">94</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">A#6</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">1864.7</td></tr>
<tr><td id='tr95' class="singleright" onclick="analyzerequest(this, this.innerHTML);">95</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">B6</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">1975.5</td></tr>
<tr><td id='tr96' class="singleright" onclick="analyzerequest(this, this.innerHTML);">96</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">C7</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">2093.0</td></tr>
<tr bgcolor="#cccccc"><td id='tr97' class="singleright" onclick="analyzerequest(this, this.innerHTML);">97</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">C#7</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">2217.5</td></tr>
<tr><td id='tr98' class="singleright" onclick="analyzerequest(this, this.innerHTML);">98</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">D7</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">2349.3</td></tr>
<tr bgcolor="#cccccc"><td id='tr99' class="singleright" onclick="analyzerequest(this, this.innerHTML);">99</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">D#7</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">2489.0</td></tr>
<tr><td id='tr100' class="singleright" onclick="analyzerequest(this, this.innerHTML);">100</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">E7</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">2637.0</td></tr>
<tr><td id='tr101' class="singleright" onclick="analyzerequest(this, this.innerHTML);">101</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">F7</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">2793.8</td></tr>
<tr bgcolor="#cccccc"><td id='tr102' class="singleright" onclick="analyzerequest(this, this.innerHTML);">102</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">F#7</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">2960.0</td></tr>
<tr><td id='tr103' class="singleright" onclick="analyzerequest(this, this.innerHTML);">103</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">G7</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">3136.0</td></tr>
<tr bgcolor="#cccccc"><td id='tr104' class="singleright" onclick="analyzerequest(this, this.innerHTML);">104</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">G#7</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">3322.4</td></tr>
<tr><td id='tr105' class="singleright" onclick="analyzerequest(this, this.innerHTML);">105</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">A7</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">3520.0</td></tr>
<tr bgcolor="#cccccc"><td id='tr106' class="singleright" onclick="analyzerequest(this, this.innerHTML);">106</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">A#7</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">3729.3</td></tr>
<tr><td id='tr107' class="singleright" onclick="analyzerequest(this, this.innerHTML);">107</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">B7</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">3951.1</td></tr>
<tr><td id='tr108' class="singleright" onclick="analyzerequest(this, this.innerHTML);">108</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">C8</td>
<td class="singleright" onclick="analyzerequest(this, this.innerHTML);">4186.0</td>
</tr></tbody></table>

</td>
<td width="195" id='mytd2'> </td>
<td valign="top">
<h1 align='center' id='myh1right'>Music Note Player and Scale Player</h1>
<h2 align='center'>Thanks to <a target=_blank href='https://github.com/mudcube/MIDI.js' title='wow!'>mudcube</a> and <a target=_blank href='http://www.glassarmonica.com/science/frequency_midi.php' title='great table!'>The Glass Armonica</a></h2>
<h3 align='center'>RJM Programming - May, 2015</h3>
<h4 align='center'>Click on links in table at <select onchange='rotatemaybe(this);' id='myselpos'><option value='left'>left</option><option value='top'>top</option></select> for music</h4>

<h4 align='center'>Equations:</h4>
<p align='center'>
f = frequency<br>
m = midi note number</p>
<p align='center'>f = 27.5 * 2<sup>((m - 21)/12)</sup></p>
<p align='center'>m = (12/ln(2)) * ln(f/27.5) + 21</p>
<p align='center'>Note: Fractional midi note number will give you 'cents'<br> from standard pitch: e.g. 66.33 would be 33 cents above F#4</p>
<br><br><div class='cdmeter' id='dmeter' style='margin-top:0px;'>
<table align='center'><tbody><tr><td>
<meter align='center' class='cmeter' id='mymeter1' min="0.0" max="5000.0" value="0.0" style='width:480px;'></meter>
</td></tr></tbody></table></div></td></tr>
</tbody>
</table>


<script type="text/javascript">

window.onload = function () {
populatesel();
if (sm == "") {
MIDI.loadPlugin({
soundfontUrl: "./soundfont/",
instrument: "acoustic_grand_piano",
onprogress: function(state, progress) {
console.log(state, progress);
},
onsuccess: function() {
var delay = 0; // play one note every quarter second
var note = 50; // the MIDI note
var velocity = 127; // how hard the note hits
var huh = document.URL.split("?");
// play the note
MIDI.setVolume(0, 127);
MIDI.noteOn(0, note, velocity, delay);
MIDI.noteOff(0, note, delay + 0.75);
}
});
}
};

</script>

</body>
</html>