{"id":14679,"date":"2015-05-08T05:01:24","date_gmt":"2015-05-07T19:01:24","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=14679"},"modified":"2015-05-07T22:35:53","modified_gmt":"2015-05-07T12:35:53","slug":"htmljavascript-music-follow-up-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-music-follow-up-tutorial\/","title":{"rendered":"HTML\/Javascript Music Follow Up Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/MyScale.html?sheetmusic=largo,slowby3,64,-0.50,63,-0.50,64,-0.50,63,-0.50,64,-0.50,59,-0.50,62,-0.50,60,-0.50,+57,-1.0+,+33,-0.50+,+40,-0.50+,45,-0.50,48,-0.50,52,-0.50,57,-0.50\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Music Follow Up Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/music_note.gif\" title=\"HTML\/Javascript Music Follow Up Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Music Follow Up Tutorial<\/p><\/div>\n<p>We follow up on our <a target=_blank title='HTML\/Javascript Music Primer Tutorial' href='#hjmpt'>HTML\/Javascript Music Primer Tutorial<\/a> as shown below, today, by setting our minds to a &#8220;first draft&#8221; of a method to construct a tune in MIDI &#8230; say &#8220;first draft&#8221; because, it is often easier on a &#8220;first draft&#8221; to involve GET parameters with a URL, for ease of testing.  This idea is a &#8220;first draft&#8221; because there are limits with URL lengths allowable this way, and in order to get around more involved examples than today&#8217;s first few bars of F\u00fcr Elise (by Beethoven), we&#8217;ll need a subsequent draft that caters for POST parameters involving, perhaps, an HTML form and maybe calling on server-side PHP work &#8230; we&#8217;ll have to see.<\/p>\n<p>So what can get sorted out with this &#8220;first draft&#8221; idea?  How about sorting out an internal protocol of communication of data?  This type of decision is a hugely important part of the design phases of a project.  We&#8217;ve opted for &#8230;<\/p>\n<ul>\n<li>comma separated word list<\/li>\n<li>special rules for the user regarding these, with respect to &#8230;<\/li>\n<ol>\n<li>one &#8220;+&#8221; sign at start or end signifies two notes are playing at once (during any and all ideas of below)<\/li>\n<li>rests &#8230; via &#8220;0&#8221;<\/li>\n<li>volume &#8230; via leading &#8220;0&#8221; value<\/li>\n<li>note (or rest) length &#8230; via negative number (loosely) based on -1 = crotchet<\/li>\n<li>MIDI note (ie. sound frequency) &#8230; via number as the MIDI note code or decimal frequency<\/li>\n<li>speed &#8230; Italian words Largo or Larghetto or Adagio or Andante or Moderato or Allegro or Presto or slowx? or slowby? or fastx? or fastby?<\/li>\n<\/ol>\n<\/ul>\n<p> &#8230; eg. first few bars of F\u00fcr Elise &#8230; URL &#8230; <\/p>\n<p><code>http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/MyScale.html?sheetmusic=largo,slowby3,64,-0.50,63,-0.50,64,-0.50,63,-0.50,64,-0.50,59,-0.50,62,-0.50,60,-0.50,+57,-1.0+,+33,-0.50+,+40,-0.50+,45,-0.50,48,-0.50,52,-0.50,57,-0.50<\/code><\/p>\n<p> &#8230; and, yes, realize sheet music can cater for much more functionality than above &#8230; today is just a start, but feel free to &#8230;<\/p>\n<ul>\n<li>See the downloadable HTML and Javascript source code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/MyScale.html-GETME\" title='MyScale.html'>MyScale.html<\/a><\/li>\n<li>Try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/MyScale.html?sheetmusic=largo,slowby3,64,-0.50,63,-0.50,64,-0.50,63,-0.50,64,-0.50,59,-0.50,62,-0.50,60,-0.50,+57,-1.0+,+33,-0.50+,+40,-0.50+,45,-0.50,48,-0.50,52,-0.50,57,-0.50\" title='F\u00fcr Elise'>live run of first few bars of F\u00fcr Elise<\/a>. Thanks to <a target=_blank title='F\u00fcr Elise information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/F%C3%BCr_Elise'>Wikipedia<\/a> for help.<\/li>\n<li>Try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/MyScale.html\" title='Live Run'>live run<\/a>.<\/li>\n<li>See the downloadable HTML and Javascript source code differences from two days ago via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/MyScale.html-GETME\" title='MyScale.html'>MyScale.html<\/a><\/li>\n<\/ul>\n<p>Hopefully more to come, but, &#8220;consider this&#8221;.<\/p>\n<hr>\n<p id='hjmpt'>Previous relevant <a target=_blank title='HTML\/Javascript Music Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-music-primer-tutorial\/'>HTML\/Javascript Music Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/MyScale.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Music Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/music_note.jpg\" title=\"HTML\/Javascript Music Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Music Primer Tutorial<\/p><\/div>\n<p>We discovered some great HTML and Javascript code to help make music with a web application, and for this we want to thank and congratulate <a target=_blank href='https:\/\/github.com\/mudcube\/MIDI.js' title='wow!'>mudcube<\/a> for some really great software.<\/p>\n<p>In addition to that we found at <a target=_blank href='http:\/\/www.glassarmonica.com\/science\/frequency_midi.php' title='great table!'>The Glass Armonica<\/a> a wonderfully useful table to use as a basis for the user to &#8220;make music&#8221;.<\/p>\n<p>If you&#8217;ve learnt a musical instrument, you may have self-taught yourself by playing songs, maybe on a guitar, by working out the basic chords, but, here, today, we start the &#8220;music&#8221; ball rolling with some scales and arpeggios.  If it was good enough for J.S. Bach, who are we mere mortals, to complain &#8230; whinge, maybe &#8230; but never complain.  Learning the piano was given this book we just called &#8220;Hanon&#8221; which did a thorough job of making scale type practice more interesting, but personally, couldn&#8217;t wait to get to more melodic music.<\/p>\n<p>Anyway, how do you feel about synthesised music?  Guess a lot of people are okay with it, but there&#8217;ll be others who &#8220;try&#8221; to avoid it &#8230; but think it might be pretty hard to completely avoid it now with so much involvement with computers and such.  Maybe we should see some of this history according to Wikipedia, and what it has written regarding <a target=_blank title='Synthesiser information from Wikipedia' href='http:\/\/en.wikipedia.org\/wiki\/Synthesizer'>synthesiser<\/a> (and while you are there, read about <a target=_blank title='MIDI information from Wikipedia' href='http:\/\/en.wikipedia.org\/wiki\/MIDI'>MIDI<\/a>).<\/p>\n<p>So the software, in its &#8220;innards&#8221; will be concerned with calculating sound frequencies &#8230; because it&#8217;s all about waves <strike>man<\/strike> person.  If the music is long lasting, maybe a bit like a permanent wave, <strike>man<\/strike> person.<\/p>\n<p>If you like, take a look at the HTML and Javascript code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/MyScale.html_GETME\" title='MyScale.html'>MyScale.html<\/a> or execute a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/MyScale.html\" title='Click picture'>live run<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d14657' onclick='var dv=document.getElementById(\"d14657\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=music\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d14657' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d14679' onclick='var dv=document.getElementById(\"d14679\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=URL\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d14679' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We follow up on our HTML\/Javascript Music Primer Tutorial as shown below, today, by setting our minds to a &#8220;first draft&#8221; of a method to construct a tune in MIDI &#8230; say &#8220;first draft&#8221; because, it is often easier on &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-music-follow-up-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[1533,822,970,997,999,1319,1345],"class_list":["post-14679","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-get","tag-music-2","tag-post","tag-programming","tag-project","tag-tutorial","tag-url"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14679"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=14679"}],"version-history":[{"count":21,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14679\/revisions"}],"predecessor-version":[{"id":14701,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14679\/revisions\/14701"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=14679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=14679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=14679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}