{"id":52747,"date":"2021-07-18T03:01:34","date_gmt":"2021-07-17T17:01:34","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=52747"},"modified":"2021-07-17T18:59:18","modified_gmt":"2021-07-17T08:59:18","slug":"html5-web-audio-mudcube-piano-integration-chord-composing-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-web-audio-mudcube-piano-integration-chord-composing-tutorial\/","title":{"rendered":"HTML5 Web Audio Mudcube Piano Integration Chord Composing Tutorial"},"content":{"rendered":"
\"HTML5<\/a>

HTML5 Web Audio Mudcube Piano Integration Chord Composing Tutorial<\/p><\/div>\n

Yesterday’s HTML5 Web Audio Piano Keyboard Tutorial<\/a> had us integrating keyboard functionality for non-mobile users of our piano playing web application, and today, building on the previous HTML5 Web Audio Mudcube Piano Integration Composing Tutorial<\/a>, we involve those similar keyboard functionality principles into the music composing functionality parts of today’s changed<\/a> MyScale.html<\/a>‘s live run<\/a> link.<\/p>\n

You may recall with this web application how we developed an “inhouse language” not as good as sheet music, but able to convey the meaning of simple musical compositions. Of course, it was only a start, and we expected days like today to arrive whereby we extend its scope to make room for musical chord writing<\/font> …<\/p>\n


\nslowby4,51;c<\/font>,-0.5,53,-0.5,51,-0.5,46,-0.5,51,-3.0,51,-0.5,53,-0.5,51,-0.5,53,-0.5,56,-0.5,53,-0.5,51,-0.5,53,-0.5,51,-0.5,46,-0.5,49,-3.0,61,-1.0,60,-0.5,56,-0.5,53,-1.0,51,-0.5,53,-0.5,51,-0.5,46,-0.5,51,-3.0,51,-0.5,53,-0.5,51,-0.5,53,-0.5,56,-0.5,53,-0.5,51,-0.5,53,-0.5,51,-0.5,46,-0.5,49,-3.0
\n<\/code><\/p>\n

… establishing an octave chord on the first note of the inhouse composition above, and involving this changed code<\/font> below …<\/p>\n


\n function abscissacheck(whatsm) {
\n \/\/ slowby4,51,-0.5,53,-0.5,51,-0.5,46,-0.5,51,-3.0,51,-0.5,53,-0.5,51,-0.5,53,-0.5,56,-0.5,53,-0.5,51,-0.5,53,-0.5,51,-0.5,46,-0.5,49,-3.0,61,-1.0,60,-0.5,56,-0.5,53,-1.0,51,-0.5,53,-0.5,51,-0.5,46,-0.5,51,-3.0,51,-0.5,53,-0.5,51,-0.5,53,-0.5,56,-0.5,53,-0.5,51,-0.5,53,-0.5,51,-0.5,46,-0.5,49,-3.0
\n var iout=\"\", zdelim=\"\", jou=0, jout=\"\", kout=\"\", newchordnote=0, xz=\"\";
\n var xmididata=whatsm.split(',');
\n var atend=eval(-2 + xmididata.length);
\n var usual=true;
\n var ioffs=0;
\n var xzsuff='';
\n var xzpref='';
\n var subhuhs=[];
\n var isubj=0;
\n var jusubj=0;
\n var numc='';<\/font>
\n showr=false;
\n if (xmididata[0].substring(0,1) >= 'A') {
\n ioffs=1;
\n kout=xmididata[0] + \",\";
\n }
\n for (var iu=atend; iu>=ioffs; iu-=2) {
\n jout=iout;
\n if (jout != \"\") { zdelim=\",\"; }
\n usual=true;
\n if ((\"\" + xmididata[iu]).indexOf('.') != -1) { \/\/ an abscissa chord scenario
\n for (jou=0; jou<xmididata[iu].split('.')[1].length; jou+=3) {
\n if (xmididata[iu].indexOf(';') != -1) {
\n xzsuff=';' + xmididata[iu].split(';')[1].split('.')[0];
\n xmididata[iu]=xmididata[iu].replace(xzsuff,'');
\n subhuhs=xzsuff.substring(1).split(' ');
\n if (eval('' + subhuhs.length) == 1) { subhuhs=xzsuff.substring(1).split(','); }
\n if (eval('' + subhuhs.length) == 1) { subhuhs=xzsuff.substring(1).split('.'); }
\n for (isubj=0; isubj<subhuhs.length; isubj++) {
\n numc='';
\n for (jsubj = ('A').charCodeAt(0); jsubj <= ('Z').charCodeAt(0); jsubj++) {
\n while (subhuhs[isubj].indexOf(String.fromCharCode(jsubj)) != -1) {
\n if (('' + numc) == '') { numc=0; }
\n subhuhs[isubj]=subhuhs[isubj].replace(String.fromCharCode(jsubj), '' + eval(10 + eval(jsubj - ('A').charCodeAt(0)))); \/\/numc+=eval(10 + eval(jsubj - ('A').charAt(0)));
\n }
\n }
\n for (jsubj = ('a').charCodeAt(0); jsubj <= ('z').charCodeAt(0); jsubj++) {
\n while (subhuhs[isubj].indexOf(String.fromCharCode(jsubj)) != -1) {
\n if (('' + numc) == '') { numc=0; }
\n subhuhs[isubj]=subhuhs[isubj].replace(String.fromCharCode(jsubj), '' + eval(10 + eval(jsubj - ('a').charCodeAt(0)))); \/\/numc+=eval(10 + eval(jsubj - ('A').charAt(0)));
\n }
\n }
\n if (('' + numc) != '') { numc='' + subhuhs[isubj]; subhuhs[isubj]='' + numc; }
\n xzpref+='' + eval(eval('' + subhuhs[isubj]) + eval('' + xmididata[iu])) + ',-0.01,';
\n console.log('xzpref=' + xzpref);
\n }
\n xzsuff='';
\n }<\/font>
\n xz=xmididata[iu].split('.')[1].substring(jou, eval(3 + jou))
\n if (xz.substring(0,1) == \"0\") {
\n newchordnote=eval('' + xz.substring(1));
\n if (usual) { iout=xmididata[iu].split('.')[0] + \",\" + xmididata[eval(1 + eval('' + iu))] + zdelim + jout; zdelim=\",\"; jout=iout; }
\n usual=false;
\n } else {
\n newchordnote=eval('' + xz);
\n if (usual) { iout=xmididata[iu].split('.')[0] + \",\" + xmididata[eval(1 + eval('' + iu))] + zdelim + jout; zdelim=\",\"; jout=iout; }
\n usual=false;
\n }
\n showr=true;
\n iout=xzpref + <\/font>newchordnote + xzsuff<\/font> + \",\" + \"-0.1\" + zdelim + jout;
\n jout=iout;
\n xzsuff='';
\n xzpref='';<\/font>
\n zdelim=\",\";
\n \/\/alert('' + newchordnote);
\n }
\n if (usual) { iout=xmididata[iu].split('.')[0] + \",\" + xmididata[eval(1 + eval('' + iu))] + zdelim + jout; }
\n } else {
\n if (xmididata[iu].indexOf(';') != -1) {
\n xzsuff=';' + xmididata[iu].split(';')[1].split('.')[0];
\n xmididata[iu]=xmididata[iu].replace(xzsuff,'');
\n subhuhs=xzsuff.substring(1).split(' ');
\n if (eval('' + subhuhs.length) == 1) { subhuhs=xzsuff.substring(1).split(','); }
\n if (eval('' + subhuhs.length) == 1) { subhuhs=xzsuff.substring(1).split('.'); }
\n for (isubj=0; isubj<subhuhs.length; isubj++) {
\n numc='';
\n for (jsubj = ('A').charCodeAt(0); jsubj <= ('Z').charCodeAt(0); jsubj++) {
\n while (subhuhs[isubj].indexOf(String.fromCharCode(jsubj)) != -1) {
\n if (('' + numc) == '') { numc=0; }
\n subhuhs[isubj]=subhuhs[isubj].replace(String.fromCharCode(jsubj), '' + eval(10 + eval(jsubj - ('A').charCodeAt(0)))); \/\/numc+=eval(10 + eval(jsubj - ('A').charAt(0)));
\n }
\n }
\n for (jsubj = ('a').charCodeAt(0); jsubj <= ('z').charCodeAt(0); jsubj++) {
\n while (subhuhs[isubj].indexOf(String.fromCharCode(jsubj)) != -1) {
\n if (('' + numc) == '') { numc=0; }
\n subhuhs[isubj]=subhuhs[isubj].replace(String.fromCharCode(jsubj), '' + eval(10 + eval(jsubj - ('a').charCodeAt(0)))); \/\/numc+=eval(10 + eval(jsubj - ('A').charAt(0)));
\n }
\n }
\n if (('' + numc) != '') { numc='' + subhuhs[isubj]; subhuhs[isubj]='' + numc; }
\n xzpref+='' + eval(eval('' + subhuhs[isubj]) + eval('' + xmididata[iu])) + ',-0.01,';
\n console.log('xzpref=' + xzpref);
\n }
\n xzsuff='';
\n }<\/font>
\n iout=xzpref + <\/font>xmididata[iu] + xzsuff<\/font> + \",\" + xmididata[eval(1 + eval('' + iu))] + zdelim + jout;
\n xzsuff='';
\n xzpref='';<\/font>
\n }
\n }
\n jout=iout;
\n if (kout != \"\") { iout=kout + jout; }
\n showr=false;
\n if (showr) { alert(iout.slice(-100)); }
\n return iout;
\n }
\n<\/code><\/p>\n

Just remember that a (delimiter of) semicolon (ie. \ud83d\ude09 is the delimiter for non base note chord definition on top of the base note number, the number of semitones above on a chromatic scale, expressed in base36 (ie, 0-9,a-z) notation, and delimited within the semicolon section by comma or space or dot.<\/p>\n

\n

\n

Previous relevant HTML5 Web Audio Mudcube Piano Integration Composing Tutorial<\/a> is shown below.<\/p>\n

\"HTML5<\/a>

HTML5 Web Audio Mudcube Piano Integration Composing Tutorial<\/p><\/div>\n

As promised in yesterday’s HTML5 Web Audio Mudcube Piano Integration Keyboard Tutorial<\/a> as we left it with …<\/p>\n

\nNext stop “Work out a Protocol to Compose Chords”, maybe, into the future …\n<\/p><\/blockquote>\n

… we’re back to the future<\/i> (tee hee)<\/font> today. And in the spirit of “I never promised you a Rose Garden”<\/a> we had to settle for “near to music chords” with today’s endeavours. But look at it this way … you may have dodged a rose thorn bullet here!?<\/p>\n

It is a personal favourite programming choice of ours to look for cute “delimitation” solutions, an example being PHP Geo Map Google Chart Offset Tutorial<\/a>. And one of our favourites is to add complexity by turning what used to be an integer<\/i> data “type” into a float<\/i> (ie. real number with decimal (fractional) parts called the “mantissa”) data “type” (eg. starting with 60 as Middle C, and turning that into 60.048 for Middle C and an Octave C lower, or 60.048072 for Middle C and an Octave C lower and higher). Extra joy comes if that resultant “number” (covering both of those data types in scope) when “rounded” would result in the original “integer” number anyway. Today we have such joy (because the highest note number of our piano is only 108 … much less than 499 even) as we allow the user to, within their textarea “composing pallette” now<\/b> say that a …<\/p>\n

\nnormal number is a note (and mantissa sets of 3 characters (zero left padded) play notes close behind, like chords)<\/b>\n<\/p><\/blockquote>\n

In order to make this happen we intervene where a composition takes Javascript variable form and encase that into a Javascript function return value “mapping” as per<\/b> …<\/p>\n


\n function abscissacheck(whatsm) {
\n \/\/ slowby4,51,-0.5,53,-0.5,51,-0.5,46,-0.5,51,-3.0,51,-0.5,53,-0.5,51,-0.5,53,-0.5,56,-0.5,53,-0.5,51,-0.5,53,-0.5,51,-0.5,46,-0.5,49,-3.0,61,-1.0,60,-0.5,56,-0.5,53,-1.0,51,-0.5,53,-0.5,51,-0.5,46,-0.5,51,-3.0,51,-0.5,53,-0.5,51,-0.5,53,-0.5,56,-0.5,53,-0.5,51,-0.5,53,-0.5,51,-0.5,46,-0.5,49,-3.0
\n var iout=\"\", zdelim=\"\", jou=0, jout=\"\", kout=\"\", newchordnote=0, xz=\"\";
\n var xmididata=whatsm.split(',');
\n var atend=eval(-2 + xmididata.length);
\n var usual=true;
\n var ioffs=0;
\n showr=false;
\n if (xmididata[0].substring(0,1) >= 'A') {
\n ioffs=1;
\n kout=xmididata[0] + \",\";
\n }
\n for (var iu=atend; iu>=ioffs; iu-=2) {
\n jout=iout;
\n if (jout != \"\") { zdelim=\",\"; }
\n usual=true;
\n if ((\"\" + xmididata[iu]).indexOf('.') != -1) { \/\/ a mantissa chord scenario
\n for (jou=0; jou<xmididata[iu].split('.')[1].length; jou+=3) {
\n xz=xmididata[iu].split('.')[1].substring(jou, eval(3 + jou))
\n if (xz.substring(0,1) == \"0\") {
\n newchordnote=eval('' + xz.substring(1));
\n if (usual) { iout=xmididata[iu].split('.')[0] + \",\" + xmididata[eval(1 + eval('' + iu))] + zdelim + jout; zdelim=\",\"; jout=iout; }
\n usual=false;
\n } else {
\n newchordnote=eval('' + xz);
\n if (usual) { iout=xmididata[iu].split('.')[0] + \",\" + xmididata[eval(1 + eval('' + iu))] + zdelim + jout; zdelim=\",\"; jout=iout; }
\n usual=false;
\n }
\n showr=true;
\n iout=newchordnote + \",\" + \"-0.1\" + zdelim + jout;
\n jout=iout;
\n zdelim=\",\";
\n \/\/alert('' + newchordnote);
\n }
\n if (usual) { iout=xmididata[iu].split('.')[0] + \",\" + xmididata[eval(1 + eval('' + iu))] + zdelim + jout; }
\n } else {
\n iout=xmididata[iu] + \",\" + xmididata[eval(1 + eval('' + iu))] + zdelim + jout;
\n }
\n }
\n jout=iout;
\n if (kout != \"\") { iout=kout + jout; }
\n showr=false;
\n if (showr) { alert(iout.slice(-100)); }
\n return iout;
\n }<\/b>
\n

\n function insong(sheetmusic) { \/\/ assumes comma separators
\n if (sheetmusic != \"\") {
\n \/\/ add a suffix of + if two hands are playing together
\n \/\/ normal word is a speed descriptor
\n \/\/ normal number is a note (and mantissa sets of 3 characters (zero left padded) play notes close behind, like chords)
\n \/\/ -1 is crotchet, -2 is minum, -0.5 is quaver, -0.25 is semi-quaver etcetera
\n\t\t\t\/\/ 0 (alone) is for a rest of the duration above
\n \/\/ 0127 is normal loudness, etcetera
\n 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=\"\";
\n var plan=\"\t MIDI.loadPlugin({ \\n\";
\n \/\/ etcetera etcetera etcetera
\n

\n var mididata=abscissacheck(<\/b>sheetmusic)<\/b>.split(',');
\n \/\/ etcetera etcetera etcetera
\n }
\n \/\/ etcetera etcetera etcetera
\n }
\n<\/code><\/p>\n

… for transcribed music or brand new compositions like (the new three octave version of Merry Christmas, Mr Lawrence<\/a> theme) …<\/p>\n