<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Music Note or Scale Player and Composer - RJM Programming - May, 2015</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- polyfill -->
<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>
<!-- midi.js package -->
<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>
<!-- utils -->
<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 songmode=0;
var askmode=0;
var nonred=-1;
var composingform='';
var lastsong='';
var globvar=0;
var startnote;
var stuff="";
var allhis="";
var thism=1;
var prevtr=-1;
var pinnote=-1;
var delay=0;
var lastn=-1;
var sm="";
var maxfactor=1.0;
var fifty=50;
var one_twenty_seven=127;
var nlength=0.75;
var tasimh='';
function noteworth(notenum) {
factor = eval((document.getElementById('speed').value * Math.abs(notenum)) / maxfactor);
return factor;
}
function insong(sheetmusic) { // assumes comma separators
if (sheetmusic != "") {
// 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.toLowerCase() == "top") {
document.body.innerHTML = document.body.innerHTML.replace('"mytbody"', '"myxtbody"').replace('"mytd2"', '"myxtd2"').replace('"myh1right"', '"myxh1right"');
document.getElementById('myselpos').value=isel.value;
while (jj < 109) {
document.getElementById('tr' + jj).style.backgroundColor='white';
jj = eval(1 + jj);
}
if (isel.value == 'Top') {
rejig(isel.value,'');
document.getElementById('mode').innerHTML='<option value="Composing">Composing</option>';
}
} else {
location.href='./MyScale.html?instrument=' + document.getElementById('instrument').value + "&myselpos=" + isel.value + "&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 ask() {
askmode=0;
var maxis=0, def='', delim='', thisblurb='', thiscontent='', thismidi, thisansi, jg, cells, incells, rds=document.body.innerHTML.split('r' + 'ed;');
if (rds.length == 1) {
var restlength=prompt("Enter (negative) length of rest ... (loosely, -1.0 = crotchet)?", "-1.0");
delim=',';
if (document.getElementById('sheetmusic').value == "") delim = '';
document.getElementById('sheetmusic').value+=(delim + "0," + restlength);
delim=',';
} else {
for (jg=1; jg<rds.length; jg++) {
cells=rds[jg].split(">");
incells=cells[1].split("<");
thismidi=incells[0];
incells=cells[3].split("<");
thisansi=incells[0];
thisblurb=thisblurb + delim + thisansi;
thiscontent=thiscontent + delim + thismidi;
def=def + delim + "-1.0";
delim=',';
}
var notelength=prompt("Enter (negative) length(s) of note(s) ... " + thisblurb + " ... (loosely, -1.0 = crotchet ... please comma separate)?", def);
var midibits=thiscontent.split(',');
if (notelength != null) {
var notebits=notelength.split(',');
delim=',';
if (document.getElementById('sheetmusic').value == "") delim = '';
if (notebits.length == 1) {
document.getElementById('sheetmusic').value+=(delim + thiscontent + "," + notelength);
delim=',';
} else {
maxis=0;
for (jg=1; jg<notebits.length; jg++) {
if (eval((notebits[jg]) - (notebits[maxis])) < 0.0) {
maxis=jg;
}
}
document.getElementById('sheetmusic').value+=(delim + "+" + midibits[maxis] + "," + notebits[maxis] + "+");
delim=',';
for (jg=0; jg<notebits.length; jg++) {
if (jg != maxis) {
document.getElementById('sheetmusic').value+=(delim + "+" + midibits[jg] + "," + notebits[jg] + "+");
}
}
}
}
for (jg=0; jg<midibits.length; jg++) {
document.getElementById('tr' + midibits[jg]).style.backgroundColor='white';
}
}
document.getElementById('savemusic').value=document.getElementById('sheetmusic').value;
if (document.getElementById('savemusic').value != "") {
document.getElementById('myform').style.display='inline';
} else {
document.getElementById('myform').style.display='none';
}
}
function analyzerequest(whatis,whatyouaskedfor) {
if (songmode == 1) {
if (whatyouaskedfor.indexOf(".") == -1 && whatyouaskedfor.substring(0,1) >= "0" && whatyouaskedfor.substring(0,1) <= "9") {
whatis.style.backgroundColor='r' + 'ed';
if (askmode == 0) {
askmode=1;
setTimeout(ask, 5000);
}
} else if (whatyouaskedfor.indexOf(".") != -1) {
if (allhis == "") allhis = document.body.innerHTML;
var xallhh=allhis.split(">" + whatyouaskedfor + "<");
var xbitshbefore=xallhh[0].split(">");
startnote=xbitshbefore[xbitshbefore.length - 4].replace("</td", "");
document.getElementById('tr' + startnote).style.backgroundColor='r' + 'ed';
if (document.getElementById('sheetmusic').value == "") {
document.getElementById('sheetmusic').value=startnote + ",-1.0";
askmode=0;
nonred=startnote;
} else {
document.getElementById('sheetmusic').value+=("," + startnote + ",-1.0");
askmode=0;
nonred=startnote;
}
if (nonred < 0) document.getElementById('tr' + startnote).style.backgroundColor='white';
document.getElementById('savemusic').value=document.getElementById('sheetmusic').value;
if (document.getElementById('savemusic').value != "") {
document.getElementById('myform').style.display='inline';
} else {
document.getElementById('myform').style.display='none';
}
} else {
if (allhis == "") allhis = document.body.innerHTML;
var xxallhh=allhis.split(">" + whatyouaskedfor + "<");
var xxbitshbefore=xxallhh[0].split(">");
startnote=xxbitshbefore[xxbitshbefore.length - 2].replace("</td", "");
document.getElementById('tr' + startnote).style.backgroundColor='r' + 'ed';
if (askmode == 0) {
askmode=1;
setTimeout(ask, 5000);
}
}
} else {
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);
}
if (document.getElementById('myselpos').value.substring(0,1) == 'L') {
if (sm == "") sm=" ";
rejig(document.getElementById('myselpos').value,'');
document.getElementById('mode').innerHTML='<option value="Composing">Composing</option>';
} else if (document.getElementById('myselpos').value.substring(0,1) == 'T') {
if (sm == "") sm=" ";
rejig(document.getElementById('myselpos').value,'');
rotatemaybe('Top');
document.getElementById('mode').innerHTML='<option value="Composing">Composing</option>';
}
// Name those Notes game
nlength=location.search.split('nlength=')[1] ? location.search.split('nlength=')[1].split('&')[0] : '0.75';
one_twenty_seven=location.search.split('volume=')[1] ? location.search.split('volume=')[1].split('&')[0] : '127';
fifty=location.search.split('note=')[1] ? location.search.split('note=')[1].split('&')[0] : '50';
tasimh=location.search.split('song=')[1] ? location.search.split('song=')[1].split('&')[0] : '';
}
function rejig(topvsleft, csong) {
songmode=1;
document.getElementById('ac').style.textDecoration='none';
//composingform='<iframe style="display:none;" id="myciframe" src="./MyScale.php"></iframe><input type="hidden" name="hsheetmusic" id="hsheetmusic" value="" /><form target="myciframe" id="myform" action="./MyScale.php" method="POST"><br><select id='playlist' onchange="document.getElementById('myciframe').src='./MyScale.php?retrieve=' + this.value;"><option value="">MIDI code</option></select>: <input type="text" name="sheetmusic" id="sheetmusic" value="' + csong + '" /><br<br><input onclick="thism=1;" type="submit" value="Play" /></form>';
//document.getElementById('eqd').innerHTML = composingform;
document.getElementById('scales').style.display='none';
document.getElementById('composition').style.display='block';
document.getElementById('th1').title='Click to add this note to composition ... will wait for 5 seconds before asking about length of note(s)';
document.getElementById('th2').title='Click to add this note to composition ... will wait for 5 seconds before asking about length of note(s)';
document.getElementById('th3').title='Click to add this note to composition as a crotchet (which you can change manually as you require)';
setInterval(lookoutforit, 1000);
}
function badnews() {
alert(stuff);
}
function lookoutforit() {
if (document.title.indexOf("Illegal MIDI") != -1) {
stuff=document.title;
document.title="Music Note/Scale Player and Composer - RJM Programming - May, 2015";
setTimeout(badnews, 700);
}
if (nonred >= 0) document.getElementById('tr' + nonred).style.backgroundColor='white';
nonred=-1;
var thissong=document.getElementById('hsheetmusic').value.replace(/~/g, '+');
if (thissong != '') {
//alert(thissong);
lastsong=thissong;
document.getElementById('hsheetmusic').value='';
//alert(98);
insong(thissong);
//alert(99);
}
}
function preask(tval) {
if (tval != "") {
var things=document.getElementById('sheetmusic').value.split(",");
if (tval == 'rest') {
ask();
} else if (tval == 'clear') {
document.getElementById('sheetmusic').value='';
} else if (tval == '0') {
var vhowmuch=prompt("What volume level?", "127");
if (vhowmuch != null) {
if (vhowmuch != "") {
if (document.getElementById('sheetmusic').value != "") document.getElementById('sheetmusic').value+=',';
document.getElementById('sheetmusic').value+=(tval + vhowmuch);
}
}
} else if (tval != '') {
if (" largo larghetto adagio andante moderato allegro presto ".indexOf(" " + tval + " ") != -1 && things.length > 1) {
if (document.getElementById('sheetmusic').value != "") {
if (things[1].substring(0,1) >= 'A') {
document.getElementById('sheetmusic').value=document.getElementById('sheetmusic').value.replace("," + things[1], "," + tval);
} else if (things[0].substring(0,1) >= 'A') {
document.getElementById('sheetmusic').value=document.getElementById('sheetmusic').value.replace(things[0] + ",", tval + ",");
} else {
document.getElementById('sheetmusic').value=tval + ',' + document.getElementById('sheetmusic').value;
}
} else {
document.getElementById('sheetmusic').value=tval;
}
} else if (" largo larghetto adagio andante moderato allegro presto ".indexOf(" " + tval + " ") != -1) {
if (document.getElementById('sheetmusic').value != "") {
if (things[0].substring(0,1) >= 'A') {
document.getElementById('sheetmusic').value=document.getElementById('sheetmusic').value.replace(things[0] + ",", tval + ",");
} else {
document.getElementById('sheetmusic').value=tval + ',' + document.getElementById('sheetmusic').value;
}
} else {
document.getElementById('sheetmusic').value=tval;
}
} else if (things.length > 1) {
var zhowmuch=prompt("By how much to " + tval + "?", "1");
if (zhowmuch != null) {
if (zhowmuch != "") {
if (document.getElementById('sheetmusic').value != "") {
if (things[1].substring(0,1) >= 'A') {
document.getElementById('sheetmusic').value=document.getElementById('sheetmusic').value.replace("," + things[1], "," + tval + zhowmuch);
} else if (things[0].substring(0,1) >= 'A') {
document.getElementById('sheetmusic').value=document.getElementById('sheetmusic').value.replace(things[0] + ",", tval + zhowmuch + ",");
} else {
document.getElementById('sheetmusic').value=tval + zhowmuch + ',' + document.getElementById('sheetmusic').value;
}
} else {
document.getElementById('sheetmusic').value+=(tval + zhowmuch);
}
}
}
} else {
var howmuch=prompt("By how much to " + tval + "?", "1");
if (howmuch != null) {
if (howmuch != "") {
if (document.getElementById('sheetmusic').value != "") {
if (things[0].substring(0,1) >= 'A') {
document.getElementById('sheetmusic').value=document.getElementById('sheetmusic').value.replace(things[0] + ",", tval + howmuch + ",");
} else {
document.getElementById('sheetmusic').value=tval + howmuch + ',' + document.getElementById('sheetmusic').value;
}
} else {
document.getElementById('sheetmusic').value+=(tval + howmuch);
}
}
}
}
}
if (document.getElementById('sheetmusic').value != "") {
document.getElementById('myform').style.display='inline';
document.getElementById('savemusic').value=document.getElementById('sheetmusic').value;
document.getElementById('hsheetmusic').value=document.getElementById('sheetmusic').value;
} else {
document.getElementById('myform').style.display='none';
document.getElementById('savemusic').value=document.getElementById('sheetmusic').value;
document.getElementById('hsheetmusic').value=document.getElementById('sheetmusic').value;
document.getElementById('playlist').value = '';
}
document.getElementById('oselt').value = '';
}
}
</script>
</head>
<body style='background-color: yellow;'>
<!--h1 align='center'>Music Note or Scale Player and Composer</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 for music</h4-->
<!--div align='center'-->
<table align='center'>
<tbody>
<tr>
<td id='mytd1'>
<table id='mytable' class="single" style='background-color: white; border: 5px solid brown;'>
<thead>
<tr>
<th id='th1' 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>
<!--option value="ACOUSTIC_GRAND_PIANO">Acoustic Grand Piano (rotated -90 degrees)</option>
<option value="SYNCH_DRUM">Synthesised Drum (rotated -90 degrees)</option-->
</select></th>
<th id='th2' 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 id='th3' 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 <a title='Note/Scale Player' onclick=" document.getElementById('myselpos').value='left'; rotatemaybe(document.getElementById('myselpos')); this.style.textDecoration='none'; document.getElementById('ac').style.textDecoration='underline'; " href='#' style='text-decoration: none;' id='ans'>Note/Scale</a> Player & <a title='Composer Mode' onclick=" document.getElementById('myselpos').value='Top'; rotatemaybe(document.getElementById('myselpos')); this.style.textDecoration='none'; document.getElementById('ans').style.textDecoration='underline'; " href='#top' style='text-decoration: underline;' id='ac'>Composer</a></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><option value='Left'>Left</option><option value='Top'>Top</option></select> for scales/Song Creation</h4>
<div id='eqd'>
<div id='scales' style='display:block;'>
<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><!--/td></tr-->
<!--tr><td-->
</div>
<div id='composition' style='display:none;'>
<iframe style="display:none;" id="myciframe" src="./MyScale.php?pleasecheck=y"></iframe><input type="hidden" name="hsheetmusic" id="hsheetmusic" value="" />
<br><input onclick="thism=1; document.getElementById('hsheetmusic').value=document.getElementById('sheetmusic').value;" id="play" type="submit" value="Play" /> <select id='playlist' onchange="document.getElementById('myciframe').src='./MyScale.php?retrieve=' + this.value;"><option value="">MIDI code</option></select> (<select id='oselt' onchange='preask(this.value);'><option value=''>Others ...</option><option value='rest'>Rest</option><option value='clear'>Clear</option><option value='0'>Volume</option><option value='largo'>Largo</option><option value='larghetto'>Larghetto</option><option value='adagio'>Adagio</option><option value='andante'>Andante</option><option value='moderato'>Moderato</option><option value='allegro'>Allegro</option><option value='presto'>Presto</option><option value='slowby'>slowby</option><option value='fastx'>fastx</option></select>) as below:
<form target="myciframe" style='display:none;' id="myform" action="./MyScale.php" method="POST">
<input type="hidden" name="savemusic" id="savemusic" value="" />
<input onclick=" if (document.getElementById('savename').value != '' && document.getElementById('sheetmusic').value != '' && document.getElementById('playlist').innerHTML.indexOf('>' + document.getElementById('savename').value + '<') == -1) { document.getElementById('playlist').innerHTML+='<option value=' + document.getElementById('savename').value.replace(/ /g, '%20') + '>' + document.getElementById('savename').value + '</option>'; document.getElementById('savemusic').value=document.getElementById('sheetmusic').value; } document.getElementById('playlist').value=''; " type="submit" name="save" id="save" value="Save As ... " /><input size=30 type="text" name="savename" id="savename" value="" />
</form>
<textarea onchange=" document.getElementById('savemusic').value=this.value; document.getElementById('hsheetmusic').value=this.value; if (this.value != '') { document.getElementById('myform').style.display='inline'; } else { document.getElementById('myform').style.display='none'; } " rows=10 cols=80 name="sheetmusic" id="sheetmusic" value=""></textarea><br<br>
</div>
<br><br>
</div><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>
<!--/div-->
<script type="text/javascript">
window.onload = function () {
var doit=1;
populatesel();
if (document.URL.indexOf("#") != -1) document.getElementById('mode').innerHTML='<option value="Composing">Composing</option>';
if (document.URL.indexOf("#top") != -1) {
document.getElementById('ac').style.textDecoration='none';
}
if (sm == "" && document.URL.indexOf("#") == -1) {
// Name those Notes game
if ((location.search.split('note=')[1] ? location.search.split('note=')[1].split('&')[0] : '') != '' ||
(location.search.split('song=')[1] ? location.search.split('song=')[1].split('&')[0] : '') != '') {
var pih=null, additionals="", found=0;
var tdsare=document.getElementsByTagName('td');
var pselans=parent.document.getElementById('selans');
if (eval(fifty) == 0) {
if ((location.search.split('nlength=')[1] ? location.search.split('nlength=')[1].split('&')[0] : '') == '') {
nlength = (Math.floor(Math.random() * (6000 - 250) + 250) / 1000);
}
}
if (pselans != null) {
if (eval(fifty) == 0) {
fifty = Math.floor(Math.random() * (108 - 21) + 21);
pih=parent.document.getElementById('pih');
if (pih != null) {
pih.value=fifty;
}
}
if (pselans.innerHTML.indexOf(".") == -1) { // || 11 == 11) {
var itd=0, ih="";
for (itd=0; itd<tdsare.length; itd++) {
if (tdsare[itd].innerHTML.indexOf("<") == -1) {
if (tdsare[itd].innerHTML.indexOf(".") == -1 && tdsare[itd].innerHTML.substring(0,1) >= '1' && tdsare[itd].innerHTML.substring(0,1) <= '9') {
additionals+='<option value="' + tdsare[itd].innerHTML + ',';
if (eval(tdsare[itd].innerHTML) == fifty) {
found=1; //Math.floor(Math.random() * (3 - 1) + 1);
doit=eval(found % 2);
}
} else if (tdsare[itd].innerHTML.indexOf(".") == -1) {
ih=tdsare[itd].innerHTML.replace(" (middle C)", "");
if (found > 0) {
found=0;
if (pih != null) {
pih.value=ih;
}
}
additionals+=(tdsare[itd].innerHTML.replace(" (middle C)", "") + ',');
if (doit == 0) {
tdsare[itd].click();
}
} else {
additionals+=(tdsare[itd].innerHTML + '">' + ih + '</option>');
}
}
}
} else {
var getnote=pselans.innerHTML.split('"' + fifty + ',');
var thenote=getnote[1].split(",");
if (pih != null) {
pih.value=thenote[0];
}
}
if (pselans.innerHTML.indexOf(".") == -1) pselans.innerHTML+=additionals;
}
if (eval(fifty) == 0) {
fifty = Math.floor(Math.random() * (108 - 21) + 21);
pih=parent.document.getElementById('pih');
if (pih != null) {
pih.value=fifty;
}
}
if (fifty >= 21 && fifty <= 108) {
var thingtodo=" MIDI.loadPlugin({ \n";
thingtodo+=" soundfontUrl: './soundfont/', \n";
thingtodo+=" instrument: 'acoustic_grand_piano', \n";
thingtodo+=" onprogress: function(state, progress) { \n";
thingtodo+=" console.log(state, progress); \n";
thingtodo+=" }, \n";
thingtodo+=" onsuccess: function() { \n";
thingtodo+=" var delay = 0; \n";
thingtodo+=" var note = " + fifty + "; \n";
thingtodo+=" var velocity = " + one_twenty_seven + "; \n";
thingtodo+=" MIDI.setVolume(0, " + one_twenty_seven + "); \n";
thingtodo+=" MIDI.noteOn(0, note, velocity, delay); \n";
thingtodo+=" MIDI.noteOff(0, note, delay + " + nlength + "); \n\n";
thingtodo+=" } \n";
thingtodo+=" }); \n";
if (doit == 1) eval(thingtodo);
}
} else {
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; //fifty; // the MIDI note
var velocity = 127; //one_twenty_seven; // how hard the note hits
// play the note
MIDI.setVolume(0, 127);
MIDI.noteOn(0, note, velocity, delay);
MIDI.noteOff(0, note, delay + 0.75);
}
});
}
}
};
</script>
</body>
</html>