{"id":14749,"date":"2015-05-11T05:01:14","date_gmt":"2015-05-10T19:01:14","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=14749"},"modified":"2024-11-02T14:26:53","modified_gmt":"2024-11-02T04:26:53","slug":"htmljavascript-music-chord-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-music-chord-game-tutorial\/","title":{"rendered":"HTML\/Javascript Music Chord Game 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\/name_those_notes_chords.html\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Music Chord Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/name_those_notes_and_chords.jpg\" title=\"HTML\/Javascript Music Chord Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Music Chord Game Tutorial<\/p><\/div>\n<p>Yesterday we wrote a musical pitch game for one note at a time and today we extend that functionality to allow the user to guess the characteristics of musical chords and intervals played for them by this MIDI music web application (as you can review with <a target=\"_blank\" title='HTML\/Javascript Music Pitch Game Tutorial' href='#hjmpgt' rel=\"noopener\">HTML\/Javascript Music Pitch Game Tutorial<\/a>).<\/p>\n<p>We used the HTML <a target=\"_blank\" title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp' rel=\"noopener\">iframe<\/a> element yesterday, and today we further nest these elements to have an iframe within an iframe, all at the same domain.  The reason to do this is that we think the logic for examination of the musical chord guesses by the user is quite different because we need to &#8230;<\/p>\n<ul>\n<li>cater for HTML select tags with multiple selections<\/li>\n<li>add a new guessable concept &#8230; the type of chord played<\/li>\n<\/ul>\n<p>As we mentioned yesterday, if you write lots of your own web applications, and they are all sitting in the same domain, then the HTML iframe element is a great tool for web application code modularisation and the iframe can see what its parent contains content-wise as well as the other way around.  This can be a very useful attribute of these HTML elements.<\/p>\n<p>Try the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/name_those_notes_chords.html\" rel=\"noopener\">live run<\/a> today supervising yesterday&#8217;s old functionality and today&#8217;s new functionality, at the one place, thanks to the HTML iframe element.<\/p>\n<p>So, here we are with &#8230;<\/p>\n<ul>\n<li>See the downloadable supervisory HTML and Javascript source code you could call <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/name_those_notes_chords.html_GETME\" title='name_those_notes_chords.html' rel=\"noopener\">name_those_notes_chords.html<\/a> (or try its <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/name_those_notes_chords.html\" title='name_those_notes_chords.html' rel=\"noopener\">live run<\/a>)<\/li>\n<li>See today&#8217;s downloadable supervised (optionally via iframe) HTML and Javascript source code you could call <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/name_those_chords.html_GETME\" title='name_those_chords.html' rel=\"noopener\">name_those_chords.html<\/a> (or try its <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/name_those_notes.html\" title='name_those_chords.html' rel=\"noopener\">live run<\/a>)<\/li>\n<li>See yesterday&#8217;s downloadable supervised (optionally via iframe) HTML and Javascript source code you could call <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/name_those_notes.html-GETME\" title='name_those_notes.html' rel=\"noopener\">name_those_notes.html<\/a> (or try its <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/name_those_notes.html\" title='name_those_notes.html' rel=\"noopener\">live run<\/a> or see the differences to this code from yesterday with <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/name_those_notes.html-GETME\" title='name_those_notes.html' rel=\"noopener\">name_those_notes.html<\/a>)<\/li>\n<li>See the doubly supervised downloadable iframe 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' rel=\"noopener\">MyScale.html<\/a><\/li>\n<li>See the doubly supervised downloadable iframe HTML and Javascript source code differences from a day 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' rel=\"noopener\">MyScale.html<\/a><\/li>\n<\/ul>\n<p>The code is based on the wonderful software ideas (with thanks) from &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href='https:\/\/github.com\/mudcube\/MIDI.js' title='wow!' rel=\"noopener\">mudcube<\/a><\/li>\n<li><a target=\"_blank\" href='http:\/\/www.glassarmonica.com\/science\/frequency_midi.php' title='great table!' rel=\"noopener\">The Glass Armonica<\/a><\/li>\n<\/ul>\n<p>Hope you enjoy the extended difficulty of our musical game.  It&#8217;s getting very challenging!<\/p>\n<hr>\n<p id='hjmpgt'>Previous relevant <a target=\"_blank\" title='HTML\/Javascript Music Pitch Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-music-pitch-game-tutorial\/' rel=\"noopener\">HTML\/Javascript Music Pitch Game 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\/name_those_notes.html\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Music Pitch Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/name_those_notes.jpg\" title=\"HTML\/Javascript Music Pitch Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Music Pitch Game Tutorial<\/p><\/div>\n<p>Yesterday we continued on with the MIDI music web application (as you can see below with <a target=\"_blank\" title='HTML\/Javascript\/PHP Compose Music Tutorial' href='#gjpcmt' rel=\"noopener\">HTML\/Javascript\/PHP Compose Music Tutorial<\/a>)  we&#8217;ve been working on almost to the point of it being useful to be called upon within an HTML <a target=\"_blank\" title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp' rel=\"noopener\">iframe<\/a> element to be useful in other ways.<\/p>\n<p>If you write lots of your own web applications, and they are all sitting in the same domain, then the HTML iframe element is a great tool for web application code modularisation, rather than rewriting the cart, the horse and the wheel all while still trying to perfect that breakfast in bed with coffee made via thought transference, and sending drones to active robots to do your office work (project) &#8230; that can wait.<\/p>\n<p>If you see people critical of the iframe element it is usually due to security concerns, and cross-domain use of the HTML iframe element does not always work.  You can do things in your code to restrict misuse.<\/p>\n<p>End of rave &#8230; today we test your &#8220;Perfect Pitch&#8221; &#8230; well, maybe?!<\/p>\n<p>Try the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/name_those_notes.html\" rel=\"noopener\">live run<\/a> today and maybe it is enlightening or maybe not.  After all, many musical instruments are really sensitive to the environment around them, and whether they are in tune.  All we can say here, is that the computer approximates what it thinks is the sound frequency required to produce a certain note, and maybe that is what you see it as too &#8230; if so, it is likely you have perfect pitch, but maybe if you are always, like, a semitone off the same way each time, it could be something else going on.<\/p>\n<p>So, here we are with &#8230;<\/p>\n<ul>\n<li>See the downloadable supervisory HTML and Javascript source code you could call <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/name_those_notes.html_GETME\" title='name_those_notes.html' rel=\"noopener\">name_those_notes.html<\/a> (or try its <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/name_those_notes.html\" title='name_those_notes.html' rel=\"noopener\">live run<\/a>)<\/li>\n<li>See the downloadable iframe 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' rel=\"noopener\">MyScale.html<\/a><\/li>\n<li>See the downloadable iframe HTML and Javascript source code differences from a day 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' rel=\"noopener\">MyScale.html<\/a><\/li>\n<\/ul>\n<p>The code is based on the wonderful software ideas (with thanks) from &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href='https:\/\/github.com\/mudcube\/MIDI.js' title='wow!' rel=\"noopener\">mudcube<\/a><\/li>\n<li><a target=\"_blank\" href='http:\/\/www.glassarmonica.com\/science\/frequency_midi.php' title='great table!' rel=\"noopener\">The Glass Armonica<\/a><\/li>\n<\/ul>\n<p>Hope you enjoy the game where you score one point for a match of note in a generic sense, and five points for an exact match of a note, in its correct octave (where middle C (in a piano) is known as C4.  Try it out.<\/p>\n<hr>\n<p id='gjpcmt'>Previous <a target=\"_blank\" title='HTML\/Javascript\/PHP Compose Music Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptphp-compose-music-tutorial\/' rel=\"noopener\">HTML\/Javascript\/PHP Compose Music 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?myselpos=Left\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript\/PHP Compose Music Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/music_note.png\" title=\"HTML\/Javascript\/PHP Compose Music Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript\/PHP Compose Music Tutorial<\/p><\/div>\n<p>Yesterday we set up the MIDI music web application we&#8217;ve been working on to take the first steps with composing, with <a target=\"_blank\" title='HTML\/Javascript Music Follow Up Tutorial' href='#hjmfut' rel=\"noopener\">HTML\/Javascript Music Follow Up Tutorial<\/a> as shown below, and as you may recall from this the idea that the GET method would cause URLs that are too long for the web browser with any length to your musical composition, and that we&#8217;d have to involve the POST method on an HTML form element, perhaps feeding this through to a server-side language like PHP &#8230; well, it panned out this involvement of PHP and HTML forms was overkill for &#8220;playing&#8221; these long pieces &#8230; for that we could resort to &#8220;hidden&#8221; input text fields &#8230; but &#8230; yes, there&#8217;s always a but &#8230; when we got to wanting to be able to save our compositions, and come back to them for playing or tweaking, or both, we could not avoid the use of a server-side language (for us, this is PHP) and the interface to that server-side language, an HTML form element &#8230; basically because how else are you going to be able to save the composition to a file, and then reread that file? You need a language like PHP.<\/p>\n<p>So, here we are, still needing to calibrate the Italian speed words methinks, but otherwise, now, we can (on laptops only, it looks like) &#8230;<\/p>\n<ul>\n<li>play a note<\/li>\n<li>play scales and arpeggios<\/li>\n<li>play a small tune &#8230; and as of today &#8230;<\/li>\n<li>play a longer tune<\/li>\n<li>compose a tune you can play (but you&#8217;ll need earplugs for our &#8220;Rhapsody in Puce&#8221;)<\/li>\n<li>save a composed tune and recall it for playing (where PHP needed)<\/li>\n<\/ul>\n<p> &#8230; but still no match for the complex scenarios sheet music can handle &#8230; still, we&#8217;re getting there &#8230; speaking of which &#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' rel=\"noopener\">MyScale.html<\/a><\/li>\n<li>See the new downloadable PHP source code <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/MyScale.php_GETME\" title='MyScale.php' rel=\"noopener\">MyScale.php<\/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' rel=\"noopener\">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' rel=\"noopener\">Wikipedia<\/a> for help.<\/li>\n<li>Try Composer Mode <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/MyScale.html?myselpos=Left\" title='Live Run' rel=\"noopener\">live run<\/a>.<\/li>\n<li>Try <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MIDI.js-master\/examples\/MyScale.html\" title='Live Run' rel=\"noopener\">live run<\/a>.<\/li>\n<li>See the downloadable HTML and Javascript source code differences from a day 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' rel=\"noopener\">MyScale.html<\/a><\/li>\n<\/ul>\n<p>Hope you enjoy the ideas.  We got ours (with thanks) from &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href='https:\/\/github.com\/mudcube\/MIDI.js' title='wow!' rel=\"noopener\">mudcube<\/a><\/li>\n<li><a target=\"_blank\" href='http:\/\/www.glassarmonica.com\/science\/frequency_midi.php' title='great table!' rel=\"noopener\">The Glass Armonica<\/a><\/li>\n<\/ul>\n<hr>\n<p id='hjmfut'>Previous relevant <a target=\"_blank\" title='HTML\/Javascript Music Follow Up Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-music-follow-up-tutorial\/' rel=\"noopener\">HTML\/Javascript Music Follow Up 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?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\" rel=\"noopener\"><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' rel=\"noopener\">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' rel=\"noopener\">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' rel=\"noopener\">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' rel=\"noopener\">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' rel=\"noopener\">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' rel=\"noopener\">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\/' rel=\"noopener\">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\" rel=\"noopener\"><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!' rel=\"noopener\">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!' rel=\"noopener\">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 do some research with the excellent article <a target=\"_blank\" href='https:\/\/beginnerguitarhq.com\/best-synthesizer\/' title='Best Synthesizer | Beginner Guitar HQ' rel=\"noopener\">Best Synthesizer | Beginner Guitar HQ<\/a>, and 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' rel=\"noopener\">synthesiser<\/a> (and while you are there, read about <a target=\"_blank\" title='MIDI information from Wikipedia' href='http:\/\/en.wikipedia.org\/wiki\/MIDI' rel=\"noopener\">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' rel=\"noopener\">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' rel=\"noopener\">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=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?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=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?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<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='#d14705' onclick='var dv=document.getElementById(\"d14705\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=PHP\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d14705' 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='#d14727' onclick='var dv=document.getElementById(\"d14727\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d14727' 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='#d14749' onclick='var dv=document.getElementById(\"d14749\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=HTML\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d14749' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday we wrote a musical pitch game for one note at a time and today we extend that functionality to allow the user to guess the characteristics of musical chords and intervals played for them by this MIDI music web &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-music-chord-game-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,15,37],"tags":[476,477,576,587,652,1530,822,1536,1537,1535,997,1114,1529,1319],"class_list":["post-14749","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-tutorials","tag-game","tag-games-2","tag-html","tag-iframe","tag-javascript","tag-midi","tag-music-2","tag-note","tag-octave","tag-pitch","tag-programming","tag-security","tag-synthesiser","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14749"}],"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=14749"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14749\/revisions"}],"predecessor-version":[{"id":65444,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/14749\/revisions\/65444"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=14749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=14749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=14749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}