{"id":29672,"date":"2017-04-18T03:01:58","date_gmt":"2017-04-17T17:01:58","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=29672"},"modified":"2017-04-18T17:39:38","modified_gmt":"2017-04-18T07:39:38","slug":"piano-playing-web-application-mobile-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/piano-playing-web-application-mobile-tutorial\/","title":{"rendered":"Piano Playing Web Application Mobile Tutorial"},"content":{"rendered":"
\"Xcode<\/a>

Piano Playing Web Application Mobile Tutorial<\/p><\/div>\n

Our Piano Playing web application has moved on to a “second draft”. Nothing has changed about it using those audio mp3 files from the other day when we presented Xcode SpriteKit Game Primer Tutorial<\/a> to “reframe” their use for creating a client based web application featuring …<\/p>\n

    \n
  1. simulated piano keys that can be pressed by the user … and\/or …<\/li>\n
  2. the user can play some scales, arpeggios or chords with a nominated tonic note and in major or minor keys<\/li>\n
  3. show a visual “cue” just below the piano keys to show the piano key note last played … we did start out on an SVG<\/a> type of solution based on the code of Legend for and from HTML Map Element Web Server Tutorial<\/a> where “overlays” appear in an HTML table “legend”, but trying “overlaying” in this way caused problems, so today we show our “visual” helpers overlaying the border down the bottom of the piano keys comprising …\n
      \n
    • HTML div<\/a> elements … involving …<\/li>\n
    • CSS border<\/a>: 1px solid red; \/\/ initially, and also dynamically controlled … and with the usual “overlay” suspects …<\/li>\n
    • CSS position<\/a>:absolute; left: 0; top: 0;<\/li>\n
    • CSS z-index<\/a>: 9;<\/li>\n
    • CSS opacity<\/a>: 1.0; \/\/ initially, and also dynamically controlled<\/li>\n<\/li>\n
    • iOS mobile users (only) are presented with new HTML audio<\/a> elements awaiting user “click\/touch” intervention, to make the audio happen, as per Apple requirements on audio media, here<\/li>\n<\/ol>\n

      So with this second draft we associate audio “cues” with “visual” ones, and include functionality to cater for the mobile device habit of disallowing automated audio plays, by fitting in with this restriction, but use HTML audio elements, showing their controls, for users to push the Play buttons necessary to satisfy iOS media rules. For today, as with WordPress 4.1.1’s Piano Playing Web Application Mobile Tutorial<\/a>, try the piano playing web application (with the HTML and Javascript piano.htm<\/a>), changed in this way<\/a> with respect to that previous “first draft”, at this live run<\/a> link (where, again, the C major scale, one octave is played first up), or, live also, below, in an HTML iframe<\/a> …<\/p>\n