{"id":47220,"date":"2019-11-21T03:01:20","date_gmt":"2019-11-20T17:01:20","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=47220"},"modified":"2019-11-20T12:34:54","modified_gmt":"2019-11-20T02:34:54","slug":"youtube-embedded-iframe-api-synchronized-superimposition-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-iframe-api-synchronized-superimposition-tutorial\/","title":{"rendered":"YouTube Embedded Iframe API Synchronized Superimposition Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Embedded Iframe API Synchronized Superimposition Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_revisit_superimpose.jpg\" title=\"YouTube Embedded Iframe API Synchronized Superimposition Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">YouTube Embedded Iframe API Synchronized Superimposition Tutorial<\/p><\/div>\n<p>In addition to yesterday&#8217;s <a title='YouTube Embedded Iframe API Synchronization Tutorial' href='#yteiapist'>YouTube Embedded Iframe API Synchronization Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>synchronizing functionality for <a target=_blank title='YouTube videos' href='https:\/\/www.youtube.com'>YouTube<\/a> video via its <a target=_blank title='Useful API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>Embedded Iframe API<\/a> interfaced videos here at RJM Programming &#8230; we think another interesting &#8220;value add&#8221; could be &#8230;<\/li>\n<li>superimposed (and synchronized) functionality for <a target=_blank title='YouTube videos' href='https:\/\/www.youtube.com'>YouTube<\/a> video via its <a target=_blank title='Useful API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>Embedded Iframe API<\/a> interfaced videos here at RJM Programming<\/li>\n<\/ul>\n<p> &#8230; involving the often used &#8220;overlay suspects&#8221; here (at RJM Programming) &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property<\/li>\n<li><a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a><\/li>\n<li><a target=_blank title='CSS opacity property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_opacity.asp'>opacity<\/a><\/li>\n<\/ul>\n<p> &#8230; this time applied to HTML iframe elements, a consideration we were not sure would work, but does work in some way shape and form.  Obviously, not everybody&#8217;s cup of tea, but we have been considering what <a target=_blank title='YouTube videos' href='https:\/\/www.youtube.com'>YouTube<\/a> video via its <a target=_blank title='Useful API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>Embedded Iframe API<\/a> offers in addition to what normal <a target=_blank title='YouTube videos' href='https:\/\/www.youtube.com'>YouTube<\/a> usage offers.  In the line of &#8220;synchronizing&#8221; one big thing it offers, at this point in time, at least, is no preview advertisements, making it easier to think in terms of &#8220;synchronizing of video&#8221; ideas.   Sadly, still only on non-mobile platforms, for all practical purposes, though.<\/p>\n<p>The intervention point is the additional &#8220;<strike>Synchronize<\/strike>Superimpose?&#8221; button bit of <a title='YouTube Embedded Iframe API Synchronization Tutorial' href='#yteiapist'>YouTube Embedded Iframe API Synchronization Tutorial<\/a>&#8216;s &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-iframe-api-synchronization-tutorial\/'><p>\nWe allow a YouTube search entry from the user to show a dropdown (select) element in multiple mode, that worked in conjunction with a &#8220;&gt;1&#8221; checkbox that if checked would then show a &#8220;Ready?&#8221; button (which played the videos one after the other), and today we add a new &#8220;<strike>Synchronize<\/strike>Superimpose?&#8221; button to show the table of iframes above, instead.\n<\/p><\/blockquote>\n<p>Again, here is <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-------------------GETME\" title=\"karaoke_youtube_api.htm\">the changed &#8220;grandchild&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-------------------GETME\" title=\"karaoke_youtube_api.htm\">karaoke_youtube_api.htm<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" title=\"Click picture\">live run<\/a> link for you to try out this functionality, as you so desire.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-iframe-api-synchronized-superimposition-tutorial\/'>YouTube Embedded Iframe API Synchronized Superimposition Tutorial<\/a>.<\/p-->\n<hr>\n<p id='yteiapist'>Previous relevant <a target=_blank title='YouTube Embedded Iframe API Synchronization Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-iframe-api-synchronization-tutorial\/'>YouTube Embedded Iframe API Synchronization Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Embedded Iframe API Synchronization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_revisit_synch.jpg\" title=\"YouTube Embedded Iframe API Synchronization Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">YouTube Embedded Iframe API Synchronization Tutorial<\/p><\/div>\n<p>The last occasion we had to change our inhouse interfacing to the <a target=_blank title='YouTube videos' href='https:\/\/www.youtube.com'>YouTube<\/a> video via its <a target=_blank title='Useful API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>Embedded Iframe API<\/a> was its (sub)interfacing to <a title='Wikipedia Flipcard Quiz Emoji Tutorial' href='#wfqet'>Wikipedia Flipcard Quiz Emoji Tutorial<\/a>.  Yes, there is no &#8220;(sub)interfacing&#8221; word &#8230; oops &#8230; <a target=_blank title='?'href='https:\/\/www.google.com\/search?q=subinterface&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=subinterface&#038;aqs=chrome..69i57j0l5.3120j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>we found one<\/a> &#8230; anyway, he says very red-faced &#8230; be that as it may &#8230; for us, using &#8220;(sub)interface&#8221; is an indication you are dealing with a software component or software tool that can be used in a variety of ways.  You often find this when dealing with a large player&#8217;s API.<\/p>\n<p>Anyway, we revisit this interfacing to touch on another obsession we have, trying to synchronize media playing, in this case video (media) playing.  This is not easy with iOS, but let&#8217;s not give up just because iOS has succeeded stopping lots of programmatical automation of media playing. Besides, if you play the piano and can stretch an octave, perhaps you can press two or three play buttons at once here.<\/p>\n<p>Where do we intervene adding &#8230;<\/p>\n<ul>\n<li>rewrite document.body.innerHTML &#8230; with an HTML &#8230;<\/li>\n<li>table element, starting with the single row with however many &#8230;<\/li>\n<li>cell (td) elements containing an HTML &#8230;<\/li>\n<li>iframe element with &#8220;src&#8221; attribute pointing at a big long ? and &amp; (GET method) way of invoking our inhouse YouTube Embedded Iframe API interfacing &#8230; that on non-mobile &#8230;<\/li>\n<li>clicks the play button programmatically to play the video immediately (and on iOS will hang around waiting for a real click)<\/li>\n<\/ul>\n<p>?  We allow a YouTube search entry from the user to show a dropdown (select) element in multiple mode, that worked in conjunction with a &#8220;&gt;1&#8221; checkbox that if checked would then show a &#8220;Ready?&#8221; button (which played the videos one after the other), and today we add a new &#8220;Synchronize?&#8221; button to show the table of iframes above, instead.<\/p>\n<p>Here is <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html------------------GETME\" title=\"karaoke_youtube_api.htm\">the changed &#8220;grandchild&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html------------------GETME\" title=\"karaoke_youtube_api.htm\">karaoke_youtube_api.htm<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" title=\"Click picture\">live run<\/a> link for you to try this functionality, as you desire.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-iframe-api-synchronization-tutorial\/'>YouTube Embedded Iframe API Synchronization Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wfqet'>Previous relevant <a target=_blank title='Wikipedia Flipcard Quiz Emoji Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wikipedia-flipcard-quiz-emoji-tutorial\/'>Wikipedia Flipcard Quiz Emoji 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\/flip_card.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Wikipedia Flipcard Quiz Emoji Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flip_card_yt_gm.jpg\" title=\"Wikipedia Flipcard Quiz Emoji Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Wikipedia Flipcard Quiz Emoji Tutorial<\/p><\/div>\n<p>We wanted to do more integration on top of yesterday&#8217;s <a title='Wikipedia Flipcard Quiz Google Charts Tutorial' href='#wfqgct'>Wikipedia Flipcard Quiz Google Charts Tutorial<\/a> integration with our <a target=_blank title='W3schools Flipcard information, thanks' href='https:\/\/www.w3schools.com\/howto\/howto_css_flip_card.asp'>Flipcards<\/a> beginnings to our &#8220;Wikipedia Based Placename Flipcard Quiz&#8221; web application.  Our two integration extension thoughts were to start involving &#8230;<\/p>\n<ul>\n<li><a target=_blank href='\/\/map.google.com' title='Google'>Google Maps<\/a><\/li>\n<li><a target=_blank href='\/\/youtube.com' title='YouTube'>YouTube<\/a> videos<\/li>\n<\/ul>\n<p> &#8230; into our &#8220;Colour Wheel&#8221; child arrangements (and so, also to it standing alone, that you can read about with <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/colour-wheel-canvas-analogue-clock-background-tutorial\/'>Colour Wheel Canvas Analogue Clock Background Tutorial<\/a>) that gave us (&#8220;when&#8221;) TimeZone place information yesterday.<\/p>\n<p>But we realize, with integration like this, space can be at a premium, and we&#8217;ve decided with both these integrations above, that their &#8220;shopfronts&#8221; will just be two single emojis, eventually linking to (optionally used) window.open popup windows (that you may or may not allow on the web browser you are using) &#8230; as per &#8230;<\/p>\n<ul>\n<li><a target=_blank href='\/\/map.google.com' title='Google'>Google Maps<\/a> &#128506;<\/li>\n<li><a target=_blank href='\/\/youtube.com' title='YouTube'>YouTube<\/a> videos &#128249;<\/li>\n<\/ul>\n<p> &#8230; the former a very easy &#8220;a&#8221; (within a &#8220;div&#8221; element) change, but the latter far more interesting in that it involves reducing down a whole inhouse interfacing web application (to the <a target=_blank title='YouTube videos' href='https:\/\/www.youtube.com'>YouTube<\/a> video via its <a target=_blank title='Useful API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>Embedded Iframe API<\/a>) to a single Emoji from having been a screen full of web application.  So, for this, which components changed in which ways &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flip_card.html--GETME\" title=\"flip_card.html\">the changed &#8220;parent&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flip_card.html--GETME\" title=\"flip_card.html\">flip_card.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flip_card.html\" title=\"Click picture\">live run<\/a> link merely involves crediting our helperer outerers, thanks &#8230; whereas &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colour_wheel.html----GETME\" title=\"colour_wheel.html\">the changed &#8220;child&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colour_wheel.html----GETME\" title=\"colour_wheel.html\">colour_wheel.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colour_wheel.html\" title=\"Click picture\">live run<\/a> link &#8230; needed to &#8230;<br \/>\n<code><br \/>\n\/\/ Global variables<br \/>\nvar ytidea='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=++++San+Francisco&minimize=y&youtube_duration=&email=&emoji=on';<br \/>\nvar gmidea='\/\/www.google.com\/maps\/place\/Kaliningrad,+Kaliningrad+Oblast,+Russia\/@54.7115288,20.324448,11z\/'; \/\/data=!3m1!4b1!4m5!3m4!1s0x46e33d8d4b7c21a9:0x5050960016126ed3!8m2!3d54.7104264!4d20.4522144';<br \/>\n\/\/<br \/>\n\/\/ New Javascript function<br \/>\n\/\/<br \/>\nfunction lookforstz() {<br \/>\n var gmi=gmidea;<br \/>\n if (document.getElementById('stz').innerHTML != '') {<br \/>\n  document.getElementById('divideo').innerHTML=\"&lt;iframe title=\\\"YouTube videos about \" + (document.getElementById('stz').innerText || document.getElementById('stz').contentWindow || document.getElementById('stz').contentDocument) + \"\\\" id=ivideo style='display:inline-block;width:40px;height:30px;overflow:hidden;' src='\" + ytidea.replace('San+Francisco',encodeURIComponent('' + (document.getElementById('stz').innerText || document.getElementById('stz').contentWindow || document.getElementById('stz').contentDocument))) + '&ir=' + Math.floor(Math.random() * 198765342) + \"'&gt;&lt;\/iframe&gt;\";<br \/>\n  gmi=gmi.replace(\"Kaliningrad,+Kaliningrad+Oblast,+Russia\", ('' + (document.getElementById('stz').innerText || document.getElementById('stz').contentWindow || document.getElementById('stz').contentDocument)).replace(\/\\ \/g, '+'));<br \/>\n  if (xlongis &lt; -900) {<br \/>\n  document.getElementById('divmap').innerHTML=\"&lt;a onclick=\\\"window.open('\" + gmi.split('@')[0] + \"','_blank','top=20,left=20,width=700,height=500');\\\" style=\\\"cursor:pointer;\\\" title=\\\"Google Maps\\\"&gt;&amp;#128506;&lt;\/a&gt;\";<br \/>\n  } else {<br \/>\n  gmi=gmi.replace(\"54.7115288\", ylatis);<br \/>\n  gmi=gmi.replace(\"20.324448\", xlongis);<br \/>\n  document.getElementById('divmap').innerHTML=\"&lt;a onclick=\\\"\" + gmi + \"\\\" title=\\\"Google Maps\\\"&gt;&amp;#128506;&lt;\/a&gt;\";<br \/>\n  }<br \/>\n } else {<br \/>\n  setTimeout(lookforstz, 1000);<br \/>\n }<br \/>\n}<br \/>\n\/\/<br \/>\n\/\/ Onload logic Javascript function <b>change<\/b><br \/>\n\/\/<br \/>\nfunction onl() {<br \/>\n  var atend=false;<br \/>\n  document.getElementById('sele').value=(location.search.split('mode=')[1] ? decodeURIComponent(location.search.split('mode=')[1].split('&')[0]) : '');<br \/>\n  if (bcol != 'white' && bcol.toLowerCase() == 'transparent') { document.getElementById('ourcanvas').style.border='1px solid ' + bcol.toLowerCase();  }<br \/>\n  if (done == 0) {<br \/>\n   if (document.URL.indexOf('mode=') != -1) {<br \/>\n    if (document.getElementById('addthis').value == '-0.0') {<br \/>\n       document.getElementById('addthis').value == '0.0';<br \/>\n       <b>setTimeout(lookforstz, 1000); \/\/ document.getElementById('divideo').innerHTML=\"&lt;iframe id=ivideo style='display:inline-block;width:30px;height:30px' src='\" + ytidea.replace('San+Francisco','') + \"'&gt;&lt;\/iframe&gt;\";<\/b><br \/>\n    }<br \/>\n    atend=true;<br \/>\n   }<br \/>\n   done = 1;<br \/>\n   elem=document.getElementById('ourcanvas');<br \/>\n   context=elem.getContext('2d');<br \/>\n   cwidth=eval(-70 + eval(('' + elem.width).replace('px','')));<br \/>\n   cheight=eval(-90 + eval(('' + elem.height).replace('px','')));<br \/>\n   \/\/alert('' + cwidth + ',' + cheight);<br \/>\n  }<br \/>\n  \/\/ rest of onload below<br \/>\n}<br \/>\n\/\/<br \/>\n\/\/ HTML design <b>change<\/b><br \/>\n\/\/<br \/>\n&lt;h1 align=\"center\"&gt;Colour Wheel &lt;select id=sele onchange=\"changemode(this);\"&gt;&lt;option value=''&gt;Local Time Analogue Clock&lt;\/option&gt;&lt;\/select&gt;<b>&nbsp;&lt;span id=stz&gt;&lt;\/span&gt;&nbsp;&lt;div title='Google Maps' id=divmap style='display:inline-block;margin-top:20px;width:40px;height:30px;overflow:hidden;'&gt;&lt;\/div&gt;&nbsp;&lt;div title='YouTube videos' id=divideo style='display:inline-block;margin-top:20px;width:40px;height:30px;overflow:hidden;'&gt;&lt;\/div&gt;<\/b>&lt;\/h1&gt;<br \/>\n<\/code>\n<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-----------------GETME\" title=\"karaoke_youtube_api.htm\">the changed &#8220;grandchild&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-----------------GETME\" title=\"karaoke_youtube_api.htm\">karaoke_youtube_api.htm<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" title=\"Click picture\">live run<\/a> link &#8230; needed to &#8230;<br \/>\n<code><br \/>\n\/\/ Global variables<br \/>\nvar domin=false;<br \/>\n\/\/<br \/>\n\/\/ New Javascript function<br \/>\n\/\/<br \/>\nfunction mintoajax() {<br \/>\n  document.getElementById('ominpossible').innerHTML='&amp;#128249;';<br \/>\n  if (1 == 1) {<br \/>\n  document.getElementById('ajaxs').style.position='absolute';<br \/>\n  document.getElementById('ajaxs').style.left='0px';<br \/>\n  document.getElementById('ajaxs').style.top='0px';<br \/>\n  } else {<br \/>\n  var rect=document.getElementById('ajaxs').getBoundingClientRect();<br \/>\n  window.scrollTo(eval(('' + rect.left).replace('px','').split('.')[0]), eval(('' + rect.top).replace('px','').split('.')[0]));<br \/>\n  }<br \/>\n}<br \/>\n\/\/<br \/>\n\/\/ Javascript function <b>change<\/b><br \/>\n\/\/<br \/>\nfunction puty(yt) {<br \/>\n    var aot=yt.options[yt.selectedIndex].text.split('(')[eval(-1 + yt.options[yt.selectedIndex].text.replace(')','').split('(').length)].replace(')','').split(':'),jaot=0,aotfactor=1.0,iaot,aotdur=0.0,faot=[60.0,60.0,24.0];<br \/>\n    if (morethanone) {<br \/>\n      for (iaot=eval(-1 + aot.length); iaot&gt;=0; iaot--) {<br \/>\n        aotdur+=eval(aotfactor * aot[iaot]);<br \/>\n        jaot++;<br \/>\n        aotfactor *= faot[jaot];<br \/>\n      }<br \/>\n      if (givefifteen &lt; 0) {<br \/>\n        givefifteen=15;<br \/>\n        givethemfifteen();<br \/>\n      }<br \/>\n    } else {<br \/>\n      ourvid=yt.value;<br \/>\n      document.getElementById('ajax').innerHTML='';<br \/>\n      document.getElementById('youtubeid').value=ourvid;<br \/>\n      <b>if (domin) {<br \/>\n      window.open(document.URL.split('karaoke_')[0] + \"stop_start_youtube.html?vid=\" + ourvid + firstsuffix + onestodoprefix + encodeURIComponent(onestodosuffix), '_blank', 'left=10,top=10,width=600,height=600');<br \/>\n      } else {<\/b><br \/>\n      document.getElementById('performance').innerHTML=ouriframe(\"&lt;iframe id='myiframe' style='z-index:-4;width:720px;height:410px;' src='\" + firstprefix + \"stop_start_youtube.html?vid=\" + ourvid + firstsuffix + onestodoprefix + encodeURIComponent(onestodosuffix) + \"'&gt;&lt;\/iframe&gt;\");<br \/>\n      firstprefix=\"\";<br \/>\n      if (document.getElementById(emojisuffix + 'karaokeemail')) document.getElementById(emojisuffix + 'karaokeemail').value=document.getElementById('to').value;<br \/>\n      document.getElementById('performance').style.display='block';<br \/>\n      setTimeout(showd, 200);<br \/>\n      <b>}<\/b><br \/>\n    }<br \/>\n}<br \/>\n\/\/<br \/>\n\/\/ Onload logic snippet <b>change<\/b> 1 of 2<br \/>\n\/\/<br \/>\n  if (is_okay) { document.getElementById('ajax').innerHTML=selc; <b> if (domin) {  mintoajax();  } <\/b> }<br \/>\n\/\/<br \/>\n\/\/ Onload logic snippet <b>change<\/b> 2 of 2<br \/>\n\/\/<br \/>\n    if (ttqqbits.indexOf('&lt;') == -1) <b>{<br \/>\n      if (document.URL.indexOf('minimize=') != -1) {  domin=true;  }<\/b><br \/>\n      selc=preselc + \"&lt;select\" + sze + \" id=ajaxs onchange=puty(this);&gt;&lt;option id=ominpossible value=&gt;Optionally choose YouTube title below ...&lt;\/option&gt;&lt;\/select&gt;\";<br \/>\n    <b>}<\/b><br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; with that &#8220;minimize&#8221; feel, a feature of very &#8220;early days&#8221; GUI (graphical user interface) thinking.<\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/wikipedia-flipcard-quiz-google-charts-tutorial\/'>Wikipedia Flipcard Quiz Emoji Tutorial<\/a>.<\/p>\n<hr>\n<p id='wfqgct'>Previous relevant <a target=_blank title='Wikipedia Flipcard Quiz Google Charts Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wikipedia-flipcard-quiz-google-charts-tutorial\/'>Wikipedia Flipcard Quiz Google Charts 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\/flip_card.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Wikipedia Flipcard Quiz Google Charts Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flip_card_gc.jpg\" title=\"Wikipedia Flipcard Quiz Google Charts Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Wikipedia Flipcard Quiz Google Charts Tutorial<\/p><\/div>\n<p>Another big player for us with our web applications, especially those of the &#8220;where&#8221; (or geographical) variety, we thank, is &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a>'s <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' title='Google Geo Charts'>Geo Chart<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; whereby we can &#8220;map&#8221; a place onto a world map to show context additional to existant functionality for yesterday&#8217;s <a title='Wikipedia Flipcard Quiz Primer Tutorial' href='#wfqpt'>Wikipedia Flipcard Quiz Primer Tutorial<\/a>.  And then to get even more context for our places, we make use of the fact that the list of places is actually a TimeZone list of places that means we can interface to &#8230;<\/p>\n<p><code><br \/>\nPHP <a target=_blank title='PHP TimeZone list' href='http:\/\/php.net\/manual\/en\/timezones.php'>TimeZone<\/a> functionality<br \/>\n<\/code><\/p>\n<p> &#8230; to incorporate a &#8220;when&#8221; factor into the mix for this work.  This integration involves code from rjmprogramming.com.au domain interfaces to the useful public interfacings above, and so can integrate this via parent\/child <i>webpage supervisor\/child iframe element<\/i> arrangements.  As you might surmise, you want to make all these new possibilities optional, pending an &#8220;OK&#8221; button press of a Javascript <a target=_blank title='HTML window.open information from w3schools' href='https:\/\/www.w3schools.com\/js\/js_popup.asp'>popup window<\/a> <i>confirm<\/i> window to replace yesterday&#8217;s <i>alert<\/i> window.<\/p>\n<p>See how <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flip_card.html-GETME\" title=\"flip_card.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flip_card.html-GETME\" title=\"flip_card.html\">flip_card.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flip_card.html\" title=\"Click picture\">live run<\/a> link now works these &#8220;where&#8221; and &#8220;when&#8221; functionality extensions.<\/p>\n<hr>\n<p id='wfqpt'>Previous relevant <a target=_blank title='Wikipedia Flipcard Quiz Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wikipedia-flipcard-quiz-primer-tutorial\/'>Wikipedia Flipcard Quiz 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\/flip_card.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Wikipedia Flipcard Quiz Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flip_card.gif\" title=\"Wikipedia Flipcard Quiz Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Wikipedia Flipcard Quiz Primer Tutorial<\/p><\/div>\n<p>Two big &#8220;W&#8221; contributors for us in our research of the WWW Internet world are &#8230;<\/p>\n<ul>\n<li><a target=_blank title='W3schools' href='https:\/\/www.w3schools.com\/'>W3schools<\/a> &#8230; for HTML and Javascript and CSS and even PHP and SVG research, today, specifically, <a target=_blank title='W3schools Flipcard information, thanks' href='https:\/\/www.w3schools.com\/howto\/howto_css_flip_card.asp'>Flipcards<\/a> (that contain place images on &#8220;heads&#8221; and hints for the user on &#8220;tails&#8221;) &#8230; and &#8230;<\/li>\n<li><a target=_blank title='Wikipedia, thanks' href='https:\/\/wikipedia.org'>Wikipedia<\/a> &#8230; an online encyclopaedia for lots of research about anything, today our interest honed in on placename information<\/li>\n<\/ul>\n<p>Today, these two giants help us out with a quiz akin to that of the previous <a title='Overlay Iframe Remembering Textarea Client Quiz Wikipedia Tutorial' href='#oirtcqwt'>Overlay Iframe Remembering Textarea Client Quiz Wikipedia Tutorial<\/a> in its Wikipedia &#8220;smarts&#8221;, but implementing W3schools flipcard &#8220;smarts&#8221;, to construct a quiz where the questions are visual clues, only, and the user can score points for correct answers via either a &#8230;<\/p>\n<ul>\n<li>select (dropdown) element containing an alphabetically sorted list of possibilities &#8230; or &#8230;<\/li>\n<li>textbox where the user can type their guess<\/li>\n<\/ul>\n<p>Sometimes the simple concepts are the best.  We hope you think so too, as you try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flip_card.html_GETME\" title=\"flip_card.html\">flip_card.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flip_card.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='oirtcqwt'>Previous relevant <a target=_blank title='Overlay Iframe Remembering Textarea Client Quiz Wikipedia Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/overlay-iframe-remembering-textarea-client-quiz-wikipedia-tutorial\/'>Overlay Iframe Remembering Textarea Client Quiz Wikipedia 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\/add_background_layer.htm?quiz=y\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Overlay Iframe Remembering Textarea Client Quiz Wikipedia Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/add_background_layer_quiz_wikipedia.jpg\" title=\"Overlay Iframe Remembering Textarea Client Quiz Wikipedia Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Overlay Iframe Remembering Textarea Client Quiz Wikipedia Tutorial<\/p><\/div>\n<p>With the Teletext Country Capital Quiz section of the functionality of the web application of <a title='Overlay Iframe Remembering Textarea Client Wikipedia Tutorial' href='#oirtcwt'>Overlay Iframe Remembering Textarea Client Wikipedia Tutorial<\/a> we wanted a different style of <a target=_blank title='Wikipedia' href='http:\/\/wikipedia.org'>Wikipedia<\/a> integration.<\/p>\n<p>We wanted to help out the user with their wrong answers providing Wikipedia image data to the background of the right hand cells as a background image.<\/p>\n<p>At least two methods of providing this background image occurred to us &#8230;<\/p>\n<ul>\n<li>use multiple background images, which is possible &#8230; but we decided, instead, to &#8230;<\/li>\n<li>use a &#8220;two image phase&#8221; animation of background images &#8230;controlled by a <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> timer<\/li>\n<\/ul>\n<p>The user can click on this right hand cell when such Wikipedia images are displayed in its background to navigate to Wikipedia pages, as an alternative to &#8220;a&#8221; links up the top of the webpage linking to <a target=_blank title='Google' href='http:\/\/google.com'>Google<\/a> (search engine) in a similar (but non-graphical) vein.<\/p>\n<p>What Javascript DOM makes this happen?  More or less (though there are several more &#8220;layers&#8221; to work this for (eg. &#8220;document.&#8221; or &#8220;aconto.&#8221; or &#8220;parent.document.&#8221;)) &#8230;<\/p>\n<p><code><br \/>\n        top.document.getElementById('tdrhs').style.background=\"URL(\" + zhr.responseText.replace(\/\\&gt;\/g,' ').split(' src=')[1].split(' ')[0] + \")\";<br \/>\n        top.document.getElementById('tdrhs').style.backgroundPosition=\"0px 120px\";<br \/>\n        top.document.getElementById('tdrhs').style.backgroundRepeat=\"no-repeat\";<br \/>\n        top.document.getElementById('tdrhs').title='Click for Wikipedia pages for ' + decodeURIComponent(urlsare[0].split('#')[0].split('\/wiki\/')[1]) + ', ' + decodeURIComponent(urlsare[1].split('\/wiki\/')[1].split('#')[0]);<br \/>\n<\/code><\/p>\n<p> &#8230; where that &#8220;var urlsare=[];&#8221; initialized global variable gets populated in a <font color=red>rearranged<\/font> &#8230;<\/p>\n<p><code><br \/>\nfunction ajaxit(urltosend) {<br \/>\n  if (urltosend.indexOf('wikipedia.org') != -1) {<br \/>\n  <font color=red>if (jurls == 0) {<br \/>\n  urlsare=urltosend.split('#');<br \/>\n  }<br \/>\n  for (var iip=jurls; iip&lt;urlsare.length; iip++) {<\/font><br \/>\n  if (!am_sending) {<br \/>\n  am_sending=true;<br \/>\n  zhr = new XMLHttpRequest();<br \/>\n  var form=new FormData();<br \/>\n  form.append('inurl', <font color=red>urlsare[iip]<\/font>);<br \/>\n  lasturls.push(urltosend);<br \/>\n  lastcontents.push(\"\");<br \/>\n  if (document.URL.indexOf('localhost:8888') != -1) {<br \/>\n  zhr.open('post', 'http:\/\/localhost:8888\/fgc\/', true);<br \/>\n  } else {<br \/>\n  zhr.open('post', '\/\/www.rjmprogramming.com.au\/PHP\/fgc\/', true);<br \/>\n  }<br \/>\n  zhr.onreadystatechange = showStuff;<br \/>\n  zhr.send(form);<br \/>\n  } else {<br \/>\n  <font color=red>if (jurls == 0 && urlsare.length == 2) {<br \/>\n    jurls=1;<br \/>\n  }<\/font><br \/>\n  urlstotry.push(<font color=red>urlsare[iip]<\/font>);<br \/>\n  }<br \/>\n  <font color=red>}<\/font><br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/add_background_layer.html----GETME\" title=\"add_background_layer.htm\">the changed<\/a> fourth draft of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/add_background_layer.html----GETME\" title=\"add_background_layer.htm\">add_background_layer.htm<\/a> at today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/add_background_layer.htm\" title=\"Click picture\">live run<\/a> link or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/add_background_layer.htm?quiz=y\" title=\"Click picture\">quiz live run<\/a> link.<\/p>\n<hr>\n<p id='oirtcwt'>Previous relevant <a target=_blank title='Overlay Iframe Remembering Textarea Client Wikipedia Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/overlay-iframe-remembering-textarea-client-wikipedia-tutorial\/'>Overlay Iframe Remembering Textarea Client Wikipedia 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\/add_background_layer.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Overlay Iframe Remembering Textarea Client Wikipedia Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multi_colour_email_via_textarea_wikipedia.jpg\" title=\"Overlay Iframe Remembering Textarea Client Wikipedia Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Overlay Iframe Remembering Textarea Client Wikipedia Tutorial<\/p><\/div>\n<p>We&#8217;re back from the Gmail Linker work of yesterday&#8217;s <a target=_blank title='Gmail URL Linker Simulation Wikipedia Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gmail-url-linker-simulation-wikipedia-tutorial'>Gmail URL Linker Simulation Wikipedia Tutorial<\/a> with Wikipedia &#8220;imagery&#8221; in order to augment the <a title='Overlay Iframe Remembering Textarea Client Sharing Tutorial' href='#oirtcst'>Overlay Iframe Remembering Textarea Client Sharing Tutorial<\/a> of recent times, that we promised to return to &#8230; yoo hoo!<\/p>\n<p>So many of you will have used <a target=_blank title='Wikipedia' href='http:\/\/wikipedia.org'>Wikipedia<\/a> as your online &#8220;go to&#8221; as far as encyclopaedic reference material is concerned.  It has been taken up by the public so well (its articles are written by mere mortals) that it is hard to find a topic that does not have a Wikipedia entry.  The other good thing about Wikipedia is its collaboration (more than one person can contribute to any one topic) and dynamism (which you see &#8220;critique style&#8221; via peer review up the top of articles <font size=2>&#8230; better than <\/font><font size=1>&#8220;a<sup>this article uses a straw to nourish itself<\/sup>&#8220;<\/font><font size=1>we&#8217;re hoping?!<\/font>).  Anyway that is why we see it as such a great and reliable resource to use to think to introduce some &#8220;imagery&#8221; into the &#8220;Overlay Iframe Remembering&#8221; techniques of our Multiple Textarea web application today, because, as they say, &#8220;every picture&#8217;s worth a thousand words&#8221;.  Besides that, the link becomes that much bigger that it becomes very hard to miss.  Which reminds me of the joy, all those years ago learning about HTML, first learning that an HTML &#8220;a&#8221; link could &#8220;nest&#8221; (ie. cover) not only text but images (<font size=1><a target=_blank title='?' href='https:\/\/getyarn.io\/yarn-clip\/1737ecbf-d33d-4830-baf2-7db3f1f51d5b'>good times<\/a><\/font>).<\/p>\n<p>This first image based improvement can add that optionally defined Wikipedia based image data via textual entries involving either &#8230;<\/p>\n<ul>\n<li>absolute URLs such as https:\/\/en.wikipedia.org\/wiki\/[Topic (encodeURIComponent&#8217;ed)] &#8230; or, the easier to manage &#8230;<\/li>\n<li>place ` characters around [Topic] &#8230; eg. `Sydney` and `Melbourne` are the two biggest cities in Australia<\/li>\n<\/ul>\n<p> &#8230; and, as with <a target=_blank title='Gmail URL Linker Simulation Wikipedia Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gmail-url-linker-simulation-wikipedia-tutorial'>Gmail URL Linker Simulation Wikipedia Tutorial<\/a>&#8216;s &#8220;cut to the chase&#8221; (HTML and Javascript client) code, we again involve &#8230;<\/p>\n<ul>\n<li>Ajax <a target=_blank title='XMLHttpRequest information' href='https:\/\/developer.mozilla.org\/en\/docs\/Web\/API\/XMLHttpRequest'>XMLHttpRequest<\/a> object &#8230; as the conduit for &#8230;<\/li>\n<li><a target=_blank title='FormData object information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FormData'>FormData<\/a> object<\/li>\n<\/ul>\n<p> &#8230; to augment the popup window content.  These appear as HTML img elements that you can still copy into email body areas, in the form of email attachments.<\/p>\n<p>And so, yet again, <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/add_background_layer.html---GETME\" title=\"add_background_layer.htm\">the changed<\/a> fourth draft of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/add_background_layer.html---GETME\" title=\"add_background_layer.htm\">add_background_layer.htm<\/a> can be tried yourself at today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/add_background_layer.htm\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='oirtcst'>Previous relevant <a target=_blank title='Overlay Iframe Remembering Textarea Client Sharing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/overlay-iframe-remembering-textarea-client-sharing-tutorial\/'>Overlay Iframe Remembering Textarea Client Sharing 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\/add_background_layer.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Overlay Iframe Remembering Textarea Client Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multi_colour_email_via_textarea.jpg\" title=\"Overlay Iframe Remembering Textarea Client Sharing Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Overlay Iframe Remembering Textarea Client Sharing Tutorial<\/p><\/div>\n<p>Our title today is &#8220;Overlay Iframe Remembering Textarea <i>Client<\/i> Sharing Tutorial&#8221;, a curiosity for some readers, am sure, being the word &#8220;<i>Client<\/i>&#8220;.  This is a deliberate word, not an accident, because we intend going as far as we can not involving a serverside language like PHP in the workings of our &#8220;Overlay Iframe Remembering&#8221; methodology &#8220;Background Layer Wording&#8221; web application.  Where it comes to &#8220;Sharing&#8221;, what&#8217;s the big deal?  Well, when you involve PHP serverside thoughts an email attachment can be coded and programmed for within your web application, but not with Javascript client work, only.  So what can we do?  We can provide a mechanism to allow the user the chance to &#8220;Select All&#8221; and &#8220;Copy&#8221; some image data that can then be &#8220;Paste&#8221;d into the body section of an Email Client email message, to form an email attachment on the occasion of that user clicking the Email Client&#8217;s Send button.<\/p>\n<p>So, further to yesterday&#8217;s <a title='Overlay Iframe Remembering Textarea Quiz Tutorial' href='#oirtqt'>Overlay Iframe Remembering Textarea Quiz Tutorial<\/a> &#8220;first variant&#8221; quiz, the architecture of the underlying web application gets a &#8220;new layer makeover&#8221; of HTML5 canvas element(s).  Contributing parts to that canvas element&#8217;s data come from a variety of textarea layers (remember the different font colurs and the &#8220;Swap Layer&#8221; button), and so, it is easiest to get our head around compiling all this into &#8230;<\/p>\n<p><code><br \/>\ntop.document.getElementById('canvasid')<br \/>\n<\/code><\/p>\n<p> &#8230; as the (Javascript) DOM object reference to this &#8220;top&#8221; (and first) created canvas element with all this.  See in the code also, codelines like &#8230;<\/p>\n<p><code><br \/>\n    top.canvtext(parent.document.getElementById('tais').value);<br \/>\n<\/code><\/p>\n<p> &#8230; which, no matter how far down into the textarea layers you are, will call on that first defined version of that Javascript function &#8220;canvtext&#8221; (with the parent textarea content as via <i>parent.document.getElementById(&#8216;tais&#8217;).value<\/i>), as per &#8230;<\/p>\n<p><code><br \/>\nfunction canvtext(intxt) {<br \/>\n   var zero=0;<br \/>\n   var loca=intxt.split(String.fromCharCode(10));<br \/>\n   if (lines.length != 0 && loca.length != 0 && loca.length &gt;= lines.length) {<br \/>\n     if (lines[0] == loca[0]) { lines=[];   }<br \/>\n   }<br \/>\n   if (lines.length == 0) {<br \/>\n   ty=14;<br \/>\n   context.font = cf;<br \/>\n   eval(clearcmd);<br \/>\n   if (documentURL.indexOf(se) != -1) { \/\/ is original background layer<br \/>\n    context.strokeStyle = \"blue\";<br \/>\n   } else {<br \/>\n    context.strokeStyle = \"black\";<br \/>\n   }<br \/>\n   lines=intxt.split(String.fromCharCode(10));<br \/>\n   for (ilines=zero; ilines&lt;lines.length; ilines++) {<br \/>\n     if (lines[ilines] == \"\" && linesb.length &gt; ilines) {<br \/>\n       if (linesb[ilines] != '') {<br \/>\n   if (documentURL.indexOf(se) != -1) { \/\/ is original background layer<br \/>\n    context.strokeStyle = \"black\";<br \/>\n   } else {<br \/>\n    context.strokeStyle = \"blue\";<br \/>\n   }<br \/>\n         context.strokeText(linesb[ilines],tx,ty);<br \/>\n   if (documentURL.indexOf(se) != -1) { \/\/ is original background layer<br \/>\n    context.strokeStyle = \"blue\";<br \/>\n   } else {<br \/>\n    context.strokeStyle = \"black\";<br \/>\n   }<br \/>\n       }<br \/>\n     } else {<br \/>\n     context.strokeText(lines[ilines],tx,ty);<br \/>\n     }<br \/>\n     ty+=12;<br \/>\n   }<br \/>\n   } else {<br \/>\n   zero=eval('' + lines.length);<br \/>\n   for (var iloca=zero; iloca&lt;loca.length; iloca++) {<br \/>\n   lines.push(loca[iloca]);<br \/>\n   }<br \/>\n   for (ilines=zero; ilines&lt;lines.length; ilines++) {<br \/>\n     if (lines[ilines] == \"\" && linesb.length &gt; ilines) {<br \/>\n       if (linesb[ilines] != '') {<br \/>\n   if (documentURL.indexOf(se) != -1) { \/\/ is original background layer<br \/>\n    context.strokeStyle = \"blue\";<br \/>\n   } else {<br \/>\n    context.strokeStyle = \"black\";<br \/>\n   }<br \/>\n         context.strokeText(linesb[ilines],tx,ty);<br \/>\n   if (documentURL.indexOf(se) != -1) { \/\/ is original background layer<br \/>\n    context.strokeStyle = \"black\";<br \/>\n   } else {<br \/>\n    context.strokeStyle = \"blue\";<br \/>\n   }<br \/>\n       }<br \/>\n     } else {<br \/>\n     context.strokeText(lines[ilines],tx,ty);<br \/>\n     }<br \/>\n     ty+=12;<br \/>\n   }<br \/>\n   document.getElementById('icanvas').innerHTML='&lt;img style=\"display:none;\" onload=\"imgonl(this);\" src=\"' + elem.toDataURL() + '\" title=\"Canvas contents\"&gt;&lt;\/img&gt;';<br \/>\n   }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>The big deal of this?  Well, involving client code usage only, there is no way to create an email with multi-colour text, but you can here, because that multi-colour text from various textarea (text input and output) elements is compiled into that top canvas element and sent to a popup window content via a [canvas].<a target=_blank title='HTML5 canvas element toDataURL method information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/toDataURL'>toDataURL<\/a> method data URI img element &#8220;src&#8221; property assignment.  Then it is optionally available to a user to use whatever operating system method is available to them to Select All\/Copy this ready for a Paste operation somewhere else (and we&#8217;re suggesting Email, as an attachment, though there are a myriad of other ideas you could use this &#8220;copy buffer&#8221; for).<\/p>\n<p>And so, again, <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/add_background_layer.html--GETME\" title=\"add_background_layer.htm\">the changed<\/a> third draft of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/add_background_layer.html--GETME\" title=\"add_background_layer.htm\">add_background_layer.htm<\/a> can be tried yourself at today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/add_background_layer.htm\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='oirtqt'>Previous relevant <a target=_blank title='Overlay Iframe Remembering Textarea Quiz Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/overlay-iframe-remembering-textarea-quiz-tutorial\/'>Overlay Iframe Remembering Textarea Quiz 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\/add_background_layer.htm?quiz=y\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Overlay Iframe Remembering Textarea Quiz Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/add_background_layer_quiz.jpg\" title=\"Overlay Iframe Remembering Textarea Quiz Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Overlay Iframe Remembering Textarea Quiz Tutorial<\/p><\/div>\n<p>Today we construct our first &#8220;overlay iframe remembering&#8221; variant on yesterday&#8217;s <a title='Overlay Iframe Remembering Textarea Primer Tutorial' href='#oirtpt'>Overlay Iframe Remembering Textarea Primer Tutorial<\/a> &#8220;proof of concept&#8221; <a target=_blank title='HTML textarea information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'>textarea<\/a> web application.  This variant is a &#8230;<\/p>\n<ul>\n<li>Country Capital Quiz &#8230; featuring &#8230;<\/li>\n<li>a teletext feel &#8230; to its presentation of the &#8230;<\/li>\n<li>question &#8230; whose &#8230;<\/li>\n<li>answer can be a Capital City name or Country name &#8230; all via &#8230;<\/li>\n<li>English language<\/li>\n<\/ul>\n<p>You answer in a textbox and because we are comparing to Capital City or Country place names whose characters may fall outside the English keyboard letters ascii range we don&#8217;t want to penalise users who don&#8217;t enter those <a target=_blank title='UTF-8 - Wikipedia, the free encyclopedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/UTF-8'>UTF-8<\/a> non-ascii characters that may be involved.  So, what to do?<\/p>\n<ul>\n<li>firstly, up in the &#8220;head&#8221; section (of this web application&#8217;s webpage) allow for the UTF-8 characters &#8230;<br \/>\n<code><br \/>\n&lt;meta charset=\"utf-8\"\/&gt;<br \/>\n<\/code>\n<\/li>\n<li>secondly, define the data in a select element, the second option tag of which we exemplify below contains a non-ascii character example Capital City &#8230;<br \/>\n<code><br \/>\n&lt;select style='display:none;' id=capitals&gt;<br \/>\n ...<br \/>\n&lt;option value=\"China\"&gt;Beijing&lt;\/option&gt;<br \/>\n&lt;option value=\"Colombia\"&gt;Bogot\u00e1&lt;\/option&gt;<br \/>\n ...<br \/>\n&lt;\/select&gt;<br \/>\n<\/code><br \/>\n &#8230; and then &#8230;\n<\/li>\n<li>populate two global arrays via &#8230;<br \/>\n<code><br \/>\n   var capitals=[],countries=[];<br \/>\n<br \/>\n  if (capitals.length == 0) {<br \/>\n    var optsare=document.getElementById('capitals').innerHTML.split('&lt;\/option&gt;');<br \/>\n    for (var iopts=0; iopts&lt;optsare.length; iopts++) {<br \/>\n      if (optsare[iopts].trim() != '') {<br \/>\n        capitals.push(optsare[iopts].split('&gt;')[eval(-1 + optsare[iopts].split('&gt;').length)].split(',')[0].split(' (')[0]);<br \/>\n        countries.push(optsare[iopts].split(' value=\"')[1].split('\"')[0]);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; as the basis for &#8230;\n<\/li>\n<li>randomly picking a question and answer set that uses our &#8220;oft used technique&#8221; (with a <b>small twist<\/b>) as per &#8230;<br \/>\n<code><br \/>\n  choice=Math.floor(Math.random() * <b>eval(2 * <\/b>eval('' + capitals.length)<b>)<\/b>);<br \/>\n<\/code><br \/>\n &#8230; that small twist helping us randomize the idea of whether the answer should be a Capital City or a Country place name &#8230; the question of which we &#8230;<\/li>\n<li>display in that &#8220;teletext&#8221; way via &#8230;<br \/>\n<code><br \/>\nfunction teletextit() {<br \/>\n  if (eval('' + iq) &lt; eval('' + question.length)) {<br \/>\n    document.getElementById('tais').value+=question.substring(iq, eval(1 + iq));<br \/>\n  }<br \/>\n  iq++;<br \/>\n  if (eval('' + iq) &lt; eval('' + question.length)) {<br \/>\n    setTimeout(teletextit, 200);<br \/>\n  } else {<br \/>\n    document.getElementById('tais').value+=String.fromCharCode(10) + String.fromCharCode(10);<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; and then over to the user interaction, and on checking that user answer provided &#8230;<\/li>\n<\/li>\n<li>later, to test answer correctness we don&#8217;t use the &#8220;ascii friendly&#8221; <a target=_blank title='Javascript indexOf information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_indexof.asp'>indexOf<\/a> (as we so often use) but, instead, use &#8230;<br \/>\n<code><br \/>\nfunction oneintwo(aone, atwo) {<br \/>\n  var ret=false, ijk=0, jkl=0, iij=0, jjj=0;<br \/>\n  if (atwo != '' && aone != '' && atwo.length &gt;= 3 && aone.length &gt;= 3) {<br \/>\n    ijk=atwo.indexOf(aone.substring(0,1));<br \/>\n    if (ijk &gt;= 0) {<br \/>\n      iij=ijk;<br \/>\n      ret=true;<br \/>\n      for (jkl=ijk; jkl&lt;eval(eval('' + ijk) + eval('' + aone.length)); jkl++) {<br \/>\n        if (ret && atwo.substring(jkl, eval(1 + iij)) &gt;= 'a' && atwo.substring(jkl, eval(1 + iij)) &lt;= 'z') {<br \/>\n        if (ret && aone.substring(jjj, eval(1 + jjj)) &gt;= 'a' && aone.substring(jjj, eval(1 + jjj)) &lt;= 'z') {<br \/>\n          if (atwo.substring(iij).indexOf(aone.substring(jjj, eval(1 + jjj))) &gt;= 0) {<br \/>\n            iij+=atwo.substring(iij).indexOf(aone.substring(jjj, eval(1 + jjj)));<br \/>\n          } else {<br \/>\n            ret=false;<br \/>\n          }<br \/>\n        }<br \/>\n        }<br \/>\n        jjj++;<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  return ret;<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; which would return true for <i>oneintwo(&#8220;Bogota&#8221;, &#8220;Bogot\u00e1&#8221;)<\/i> as, in all fairness, it should\n<\/li>\n<\/ul>\n<p>And so <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/add_background_layer.html-GETME\" title=\"add_background_layer.htm\">the changed<\/a> second draft of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/add_background_layer.html-GETME\" title=\"add_background_layer.htm\">add_background_layer.htm<\/a> can be tried yourself at today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/add_background_layer.htm\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='oirtpt'>Previous relevant <a target=_blank title='Overlay Iframe Remembering Textarea Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/overlay-iframe-remembering-textarea-primer-tutorial\/'>Overlay Iframe Remembering Textarea 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\/add_background_layer.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Overlay Iframe Remembering Textarea Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/add_background_layer.jpg\" title=\"Overlay Iframe Remembering Textarea Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Overlay Iframe Remembering Textarea Primer Tutorial<\/p><\/div>\n<p>The recent <a title='HTML5 Web Audio Overlay Tutorial' href='#html5waot'>HTML5 Web Audio Overlay Tutorial<\/a> introduced a new term for us &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/html5-web-audio-overlay-tutorial\/'><p>\n<a target=_blank title='overlay iframe remembering' href='https:\/\/www.google.com\/search?q=overlay+iframe+remembering&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=overlay+iframe+remembering&#038;aqs=chrome..69i57.7495j1j4&#038;sourceid=chrome&#038;ie=UTF-8'>overlay iframe remembering<\/a>\n<\/p><\/blockquote>\n<p> &#8230; trying to give a name (or term) to the &#8220;overlay&#8221; idea of a &#8230;<\/p>\n<ul>\n<li>parent webpage &#8230; completely being overlayed (via the auspices of three of our favourite overlay suspects) &#8230;\n<ol>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property<\/li>\n<li><a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a><\/li>\n<li><a target=_blank title='CSS opacity property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_opacity.asp'>opacity<\/a><\/li>\n<\/ol>\n<p>&#8230; but being seen through a &#8230;<\/li>\n<li>child &#8220;iframe&#8221; webpage<\/li>\n<\/ul>\n<p> &#8230; as two webpages with sharable data.<\/p>\n<p>You&#8217;ll also know, if you are a regular at this blog, how we like, and &#8220;are suckers&#8221; for the use of the HTML <a target=_blank title='HTML textarea information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'>textarea<\/a> element <font size=2>&#8230; giggle at your peril<\/font> <font size=1>&#8230; &#8220;revenge of the textarea&#8221; is coming<\/font>.  In this context, why don&#8217;t we combine the concepts above?  Before you &#8220;<font size=1>Bah, humbug!<\/font>&#8221; we&#8217;re ready with the &lt;strike&gt;&lt;\/strike&gt; to &#8220;counter any <strike><font size=1>Bah, humbug!<\/font><\/strike> with the idea that two textareas can represent two voices and so represent a conversation, albeit, today, only with somebody close by&#8221;.  We don&#8217;t venture that far ourselves with this separation today, being a bit bamboozled by the complexity of the logic &#8230; only &#8230; <\/p>\n<ul>\n<li>changing the font colours &#8230; and &#8230;<\/li>\n<li>allowing for textarea &#8220;focus&#8221; swaps &#8230; and &#8230;<\/li>\n<li>allowing for contributions to the background textarea from the foreground<\/li>\n<\/ul>\n<p> &#8230; but that doesn&#8217;t preclude you from downloading today&#8217;s first draft of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/add_background_layer.html_GETME\" title=\"add_background_layer.html\">add_background_layer.html<\/a> and\/or trying it for yourself at today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/add_background_layer.html\" title=\"Click picture\">live run<\/a> link, and adding your own ideas onto this HTML and Javascript &#8220;proof of concept&#8221; start.<\/p>\n<hr>\n<p id='html5waot'>Previous relevant <a target=_blank title='HTML5 Web Audio Overlay Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html5-web-audio-overlay-tutorial\/'>HTML5 Web Audio Overlay 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\/web_audio.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML5 Web Audio Overlay Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_audio_overlay.jpg\" title=\"HTML5 Web Audio Overlay Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">HTML5 Web Audio Overlay Tutorial<\/p><\/div>\n<p>Again, in building on yesterday&#8217;s <a title='HTML5 Web Audio Duration Tutorial' href='#html5wadt'>HTML5 Web Audio Duration Tutorial<\/a> two pronged approach, we have another one today, those approaches involving &#8230;<\/p>\n<ul>\n<li>first allow for clientside HTML to do what serverside PHP usually does for us &#8230; handle large amounts of data as PHP can do using its $_POST[] approach &#8230; we&#8217;re going to call &#8220;Overlay Iframe Remembering&#8221; &#8230; whereby the\n<ol>\n<li>navigational form gets a new <i> id=waform onsubmit=&#8217;return takealook(this);&#8217;<\/i> &#8230;<br \/>\n<code><br \/>\nfunction takealook(fo) {<br \/>\n  var noneed=true;<br \/>\n  var nsuffix='';<br \/>\n  if (document.getElementById('url1').value.length &gt; 500) { noneed=false; }<br \/>\n  if (document.getElementById('url2').value.length &gt; 500) { noneed=false; }<br \/>\n  if (document.getElementById('url3').value.length &gt; 500) { noneed=false; }<br \/>\n  if (document.getElementById('url4').value.length &gt; 500) { noneed=false; }<br \/>\n  if (document.getElementById('durationget').value.length &gt; 0) { nsuffix='&notoka=secret'; noneed=false; }<br \/>\n  if (source_valid()) {<br \/>\n    if (noneed) { return true; }<br \/>\n    document.getElementById('divbody').style.<font color=red>opacity<\/font>='0.2';<br \/>\n    document.getElementById('diframe').innerHTML=\"&lt;iframe style='<font color=blue>position:absolute;top:0px;left:0px;<\/font><font color=orange>z-index<\/font>:\" + eval(1 + eval('0' + zi)) + \";width:100%;height:100vh;' src='\" + document.URL.split('#')[0].split('?')[0] + \"?zi=\" + eval(1 + eval('0' + zi)) + nsuffix + \"'&gt;&lt;\/iframe&gt;\";<br \/>\n  } else {<br \/>\n    if (notoka.trim().toLowerCase() == 'secret') { noneed=false; }<br \/>\n    if (noneed) { return true; }<br \/>\n    document.getElementById('divbody').style.<font color=red>opacity<\/font>='0.2';<br \/>\n    document.getElementById('diframe').innerHTML=\"&lt;iframe style='<font color=blue>position:absolute;top:0px;left:0px;<\/font><font color=orange>z-index<\/font>:\" + eval(1 + eval('0' + zi)) + \";width:100%;height:100vh;' src='\" + document.URL.split('#')[0].split('?')[0] + \"?zi=\" + eval(1 + eval('0' + zi)) + \"&notoka=\" + encodeURIComponent(notoka.trim()) + \"'&gt;&lt;\/iframe&gt;\";<br \/>\n  }<br \/>\n  return false;<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; where if <i>noneed<\/i> ends up as <i>false<\/i> we perform some overlay f<font color=red>av<\/font>o<font color=blue>ur<\/font>i<font color=orange>te<\/font>s &#8230; building on &#8230;\n<\/li>\n<li>textbox HTML design changes from &#8230;<br \/>\n<code><br \/>\n&lt;input style='display:inline-block;background-color:#f0f0f0;' type=text name=url2 title='Audio URL 2' value='.\/one_to_fiftynine.m4a'&gt;&lt;\/input&gt;<br \/>\n<\/code><br \/>\n &#8230; to &#8230;<br \/>\n<code><br \/>\n&lt;input data-id=url2 onblur=\"document.getElementById(this.getAttribute('data-id')).value=this.value;\" style='display:inline-block;background-color:#f0f0f0;' type=text name=url2 title='Audio URL 2' value='.\/one_to_fiftynine.m4a'&gt;&lt;\/input&gt;<br \/>\n&lt;div id=dform style='display:none;'&gt;&lt;\/div&gt;<br \/>\n&lt;div id=diframe&gt;&lt;\/div&gt;<br \/>\n<\/code><br \/>\n &#8230; that makes the document.body onload logic below be useful for the context of that onsubmit form logic above &#8230;\n<\/li>\n<li>\n<code><br \/>\n   document.getElementById('dform').innerHTML=document.getElementById('waform').innerHTML.replace(\/\\ data\\-id=\/g, ' id=').replace(\/\\ onblur=\/g, ' data-onblur=');<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p> &#8230; as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_audio.html---GETME\" title=\"web_audio.htm\">these interim changes<\/a> &#8230; then in the context of those large amounts of data possibly coming from &#8230;\n<\/li>\n<li>like with the recent <a target=_blank title='Video via Canvas File API Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/video-via-canvas-file-api-tutorial\/'>Video via Canvas File API Tutorial<\/a> &#8230;<br \/>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/video-via-canvas-file-api-tutorial\/'>\n<p> &#8230; we see for web applications, two primary source &#8220;partitions&#8221;, those being &#8230;<\/p>\n<p><\/p>\n<ul>\n<li>around the &#8220;net&#8221; (in the <i>server<\/i> wooooooorrrrrlllllld, in the public areas of the Internet, which are not in &#8220;the dark web&#8221;, that is) via an absolute URL (to the same domain or beyond) and\/or relative URL (in relation to the URL &#8220;home&#8221; place on the web server of the same domain as where you launched it &#8230; which we catered for yesterday, though quietly we&#8217;d have allowed absolute URLs too, it&#8217;s just that cross-domain restrictions make us shy about publicizing that) &#8230; versus &#8230;<\/li>\n<li>on the <i>client<\/i> computer (or device)<\/li>\n<\/ul>\n<p><\/p>\n<p> &#8230; and, yes, for all those who guessed we&#8217;d try to cater for image and\/or video data coming from this <i>client<\/i> source, you are correct &#8230;<\/p>\n<\/blockquote>\n<p> &#8230; media file browsing, via the wonderful <a target=_blank title='Great link' href='http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\/'>File API<\/a>, additional functionality as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_audio.html----GETME\" title=\"web_audio.htm\">these changes<\/a> to  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_audio.html----GETME\" title=\"web_audio.htm\">web_audio.htm<\/a>\n<\/li>\n<\/ul>\n<p>Did you get from the code snippets how this &#8220;Overlay Iframe Remembering&#8221; works by storing the large amounts of data in an overlayed &#8220;layer&#8221; of webpage, both webpage layers &#8220;clientside&#8221; by nature and available datawise to each other in a parent\/child (layer1WebpageParent\/layer2OverlayedIframeWebpageChild) arrangement?  Perhaps it is easier to see it in action at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_audio.htm\" title=\"Click picture\">this live run<\/a> link.<\/p>\n<hr>\n<p id='html5wadt'>Previous relevant <a target=_blank title='HTML5 Web Audio Duration Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html5-web-audio-duration-tutorial\/'>HTML5 Web Audio Duration 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\/web_audio.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML5 Web Audio Duration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_audio_more.jpg\" title=\"HTML5 Web Audio Duration Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">HTML5 Web Audio Duration Tutorial<\/p><\/div>\n<p>In building on yesterday&#8217;s <a title='HTML5 Web Audio Primer Tutorial' href='#html5wapt'>HTML5 Web Audio Primer Tutorial<\/a> we adopted a two pronged approach, that being &#8230;<\/p>\n<ul>\n<li>first allow for the reduction of use of Javascript <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp' title='Javascript eval'>eval<\/a> involving statements that assign values (ie. eval statement contains an &#8220;=&#8221; sign) (but will continue on with it helping out with some mathematics) &#8230; in favour of using arrays instead &#8230;<br \/>\n<code><br \/>\nvar source=[];<br \/>\nvar sourcep=[];<br \/>\nvar notoka=location.search.split('notoka=')[1] ? (\" \" + decodeURIComponent(location.search.split('notoka=')[1]).split('&')[0]) : \"\";<br \/>\nif (notoka == \"\") {<br \/>\n  for (var iii=1; iii&lt;=4; iii++) {<br \/>\n    source.push(null);<br \/>\n    sourcep.push(false);<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfor (var ii=5; ii&lt;500; ii++) {<br \/>\nif (source_valid()) { \/\/if (typeof source !== 'undefined') {<br \/>\n source.push(null);<br \/>\n if (sourcep_valid()) { \/\/if (typeof sourcep !== 'undefined') {<br \/>\n  sourcep.push(false);<br \/>\n }<br \/>\n } else {<br \/>\n eval(\"var source\" + ii + \" = null;\"); \/\/context.createBufferSource();<br \/>\n }<br \/>\n}<br \/>\n<br \/>\nfunction source_valid() {<br \/>\n if (typeof source !== 'undefined') {<br \/>\n   if (source.length &gt;= 4) { return true; }<br \/>\n }<br \/>\n return false;<br \/>\n}<br \/>\n<br \/>\nfunction sourcep_valid() {<br \/>\n if (typeof sourcep !== 'undefined') {<br \/>\n   if (sourcep.length &gt;= 4) { return true; }<br \/>\n }<br \/>\n return false;<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_audio.html-GETME\" title=\"web_audio.html\">these interim changes<\/a> &#8230; then go on to &#8230;<\/li>\n<li>other changes as per &#8230;\n<ol>\n<li>add duration as a very useful third parameter &#8230;<br \/>\n<blockquote><p>\nSeconds &#8230; optionally follow by ; sets of ButtonNumber1to4:StartingAt=[0]:StartingIn=[0]:Loop=[false]:Duration=[0]\n<\/p><\/blockquote>\n<p> &#8230; to <a target=_blank href='https:\/\/www.html5rocks.com\/en\/tutorials\/webaudio\/intro\/' title='Getting Started with Web Audio API'>Web Audio class &#8220;start&#8221; method<\/a> &#8230; the use of which is the final piece in a puzzle that allows us to &#8230;<\/li>\n<li>schedule an execution run of button presses to play Audio ahead of time &#8230; because with a duration we can piggy back the audios (so be able to synchronize our efforts better) &#8230; and we also &#8230;<\/li>\n<li>open the Audio content up to the &#8220;server&#8221; woooorrrrlllld (via the &#8220;reveal&#8221; friendly HTML <a target=_blank title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>details<\/a>\/summary element combination) by allowing the user to specify their own 4 audio URLs (and one synchronized video one) along with 4 button labels presented in an HTML form method=GET to renavigate with this user supplied content back to the body onload scenario<\/li>\n<\/ol>\n<p> &#8230; to arrive at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_audio.html--GETME\" title=\"web_audio.html\">finally changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_audio.html--GETME\" title=\"web_audio.html\">web_audio.html<\/a>\n<\/li>\n<\/ul>\n<p> &#8230; that we welcome you to try at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_audio.html\" title=\"Click picture\"l>live run<\/a> link.<\/p>\n<hr>\n<p id='html5wapt'>Previous relevant <a target=_blank title='HTML5 Web Audio Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html5-web-audio-primer-tutorial\/'>HTML5 Web Audio 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\/web_audio.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML5 Web Audio Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_audio.jpg\" title=\"HTML5 Web Audio Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">HTML5 Web Audio Primer Tutorial<\/p><\/div>\n<p>As an audio\/video synchronization alternative to the techniques used in <a target=_blank title='Mac OS X Text to English Speech Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mac-os-x-text-to-english-speech-primer-tutorial\/'>Mac OS X Text to English Speech Primer Tutorial<\/a>, today, we involve the great Web Audio API functionality introduced with HTML5 and &#8220;starring&#8221; in HTML5 Rocks&#8217;s <a target=_blank href='https:\/\/www.html5rocks.com\/en\/tutorials\/webaudio\/intro\/' title='Getting Started with Web Audio API'>Getting Started with Web Audio API<\/a> great advice on this subject.<\/p>\n<p>We start down this long road, we suspect, being able to &#8230;<\/p>\n<ul>\n<li>set up the audio playing of four separate audio sources (some featuring in <a title='Spliced Audio Number Genericization Tutorial' href='#sangt'>Spliced Audio Number Genericization Tutorial<\/a>) &#8230; where &#8230;<\/li>\n<li>one, with its default configuration, synchronizes with an apt video media play<\/li>\n<li>allow looping<\/li>\n<li>allow for &#8220;start at&#8221; seconds<\/li>\n<li>allow for &#8220;start in&#8221; seconds<\/li>\n<\/ul>\n<p> &#8230; on a first draft HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_audio.html_GETME\" title=\"web_audio.html\">web_audio.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_audio.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>We hope you hang around on our road trip with this topic.<\/p>\n<hr>\n<p id='sangt'>Previous relevant <a target=_blank title='Spliced Audio Number Genericization Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audio-number-genericization-tutorial\/'>Spliced Audio Number Genericization 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\/audio_1_59.htm?showform=on\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Spliced Audio Number Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/audio_numbers_genericization.jpg\" title=\"Spliced Audio Number Genericization Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Spliced Audio Number Genericization Tutorial<\/p><\/div>\n<p>If you&#8217;ve completed a successful &#8220;proof of concept&#8221; stage to a project, it can be tempting at this early stage, even before applying it to the specific intended <i>software integration target<\/i>, to consider ways to &#8220;genericize&#8221; that application, and so it is for us, here, with yesterday&#8217;s <a title='Spliced Audio Number Announcements Tutorial' href='#sanat'>Spliced Audio Number Announcements Tutorial<\/a>, as shown below, that we feel this could come along to be applied for other purposes.  We have no doubt the exercise of doing this serves at least three good purposes &#8230;<\/p>\n<ol>\n<li>slow it down a bit before rushing to &#8220;software integrate&#8221;, as patience can be good here<\/li>\n<li>learn more about what&#8217;s possible, and what isn&#8217;t, to do with the scope of your planning and thinking<\/li>\n<li>other application may, too, benefit from this &#8220;early days&#8221; &#8220;genericization&#8221; of a potential plugin component piece of HTML and Javascript code<\/li>\n<\/ol>\n<p>In this early stage of &#8220;genericization&#8221; thoughts, we think that with our project we want to keep intact these ideas &#8230;<\/p>\n<ul>\n<li>there&#8217;ll be up to 3 &#8220;columns&#8221; of ideas to piece together an audio message from its constituent parts, like with those Sydney train platform announcements we&#8217;ve talked about before<\/li>\n<li>there&#8217;ll be 3 soundfiles mapped to most of the usage regarding these 3 &#8220;columns&#8221;<\/li>\n<li>there&#8217;ll be the possibility for silence to be an option in each &#8220;column&#8221;<\/li>\n<li>there&#8217;ll be the mechanism by which the user can define their own &#8220;Title&#8221; and &#8220;Subtitle&#8221; and 3 &#8220;column&#8221; headings themselves<\/li>\n<li>there&#8217;ll be 2 leftmost &#8220;columns&#8221; that define counting numbers whose ranges can be defined by the user, where, for now, the timing of sounds goes that sounds start at [number].4 seconds and plays for 1.5 seconds<\/li>\n<li>there&#8217;ll be minimum and maximum special case entries available for user definition in the leftmost &#8220;column&#8221; that calls on the fourth soundfile, where, for now, the timing of sounds goes that sounds start at 0 seconds and 2 seconds respectively and plays for 2 seconds<\/li>\n<li>there&#8217;ll be a minimum special case entry available for user definition in the middle &#8220;column&#8221; that calls on a sound from the third soundfile, where, for now, the timing of sounds goes that sounds start at 3.1 seconds and plays for 1.8 seconds<\/li>\n<li>there&#8217;ll be 1 rightmost &#8220;column&#8221; that can have three entries defined<\/li>\n<\/ul>\n<p>And that is as far as we go with &#8220;genericizations&#8221;, at this stage, with our project.<\/p>\n<p>In our experience, what Javascript function is a big friend of &#8220;genericization&#8221;?  We&#8217;d say Javascript <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp' title='Javascript eval'>eval<\/a> function is our favourite here.<\/p>\n<p>It&#8217;s funny to think that our HTML and Javascript and CSS <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/audio_1_59.html-GETME' title='audio_1_59.htm'>audio_1_59.htm<\/a>, vastly changed from yesterday as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/audio_1_59.html-GETME' title='audio_1_59.htm'>this link<\/a>, functions exactly the same in its default form, and you can continue to enjoy its accompanying <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/audio_1_59.htm' title='Click picture'>default live run<\/a> link, but it can, through the use of complex URLs (only, just at this early stage) be made to look quite different, with the same code, as you can see with this <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/audio_1_59.htm?showform=on' title='Click picture'>complex live run<\/a>.<\/p>\n<p>So, in summary, this leaves us with many more &#8220;live run&#8221; options, those being &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Default live run' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/audio_1_59.htm'>Default live run<\/a><\/li>\n<li><a target=_blank title='Default live run with form' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/audio_1_59.htm?showform=on'>Default live run with form<\/a><\/li>\n<li><a target=_blank title='Different run scenario Counting Numbers to 100' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/audio_1_59.htm?notAudio_Numbers=Counting+Numbers+to+100&#038;notHear_this____=Hear+your+number&#038;notHour=tens&#038;notMinute=digits&#038;notContext=&#038;soundpath=&#038;notmidnight=&#038;noth1=1&#038;noth11=9&#038;notmidday=&#038;noto_clock=0&#038;notm1=1&#038;notm59=9&#038;not=&#038;notam=&#038;notpm=&#038;notsoundfile1=one_to_fiftynine.m4a&#038;notsoundfile2=past_quarterto.m4a&#038;notsoundfile3=am_pm.m4a&#038;notsoundfile4=midnight_midday.m4a'>Different run scenario Counting Numbers to 100<\/a><\/li>\n<li><a target=_blank title='Different run scenario Hearts versus Counting Numbers to 100 with form' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/audio_1_59.htm?notAudio_Numbers=Counting+Numbers+to+100&#038;notHear_this____=Hear+your+number&#038;notHour=tens&#038;notMinute=digits&#038;notContext=&#038;soundpath=&#038;notmidnight=&#038;noth1=1&#038;noth11=9&#038;notmidday=&#038;noto_clock=0&#038;notm1=1&#038;notm59=9&#038;not=&#038;notam=&#038;notpm=&#038;notsoundfile1=one_to_fiftynine.m4a&#038;notsoundfile2=past_quarterto.m4a&#038;notsoundfile3=am_pm.m4a&#038;notsoundfile4=midnight_midday.m4a&#038;showform=on'>Different run scenario Counting Numbers to 100 with form<\/a><\/li>\n<\/ul>\n<hr>\n<p id='sanat'>Previous relevant <a target=_blank title='Spliced Audio Number Announcements Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audio-number-announcements-tutorial\/'>Spliced Audio Number Announcements 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\/audio_1_59.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Spliced Audio Number Announcements Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/audio_numbers.jpg\" title=\"Spliced Audio Number Announcements Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Spliced Audio Number Announcements Tutorial<\/p><\/div>\n<p>We&#8217;ve got a &#8220;proof of concept&#8221; tutorial for you today, because we&#8217;ve got an idea for something, as we said some time back at <a target=_blank title='Splicing Audio Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/splicing-audio-primer-tutorial\/'>Splicing Audio Primer Tutorial<\/a> &#8230; <\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/splicing-audio-primer-tutorial\/'><p>\nThe first was a simulation of those Sydney train public announcements where the timbre of the voice differs a bit between when they say &#8220;Platform&#8221; and the &#8220;6&#8221; (or whatever platform it is) that follows.  This is pretty obviously computer audio &#8220;bits&#8221; strung together &#8230; and wanted to get somewhere towards that capability.\n<\/p><\/blockquote>\n<p> &#8230; that will probably be <a target=_blank title=\"Blimmin' onbvious\" href='https:\/\/books.google.com.au\/books?id=h0mcBQAAQBAJ&#038;pg=PA76&#038;lpg=PA76&#038;dq=blimmin+obvious&#038;source=bl&#038;ots=_JyMS7qV49&#038;sig=zKzvLL-NYxPgBpSlBN9wkyoM5Nw&#038;hl=en&#038;sa=X&#038;ved=0ahUKEwiYmce8wpXPAhWDn5QKHc4pBSYQ6AEIOzAG#v=onepage&#038;q=blimmin%20obvious&#038;f=false'><i>blimmin&#8217; obvious<\/i><\/a> to you should you be a regular recent reader at this blog.<\/p>\n<p>Do you remember what we, here, see as a characteristic of &#8220;proof of concept&#8221; at <a target=_blank title='WordPress Is Mentioned By Navigation Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-is-mentioned-by-code-download-navigation-tutorial\/'>WordPress Is Mentioned By Navigation Primer Tutorial<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-is-mentioned-by-code-download-navigation-tutorial\/'><p>\nTo us, a \u201cproof of concept\u201d is not much use if it is as involved as what it is trying to prove\n<\/p><\/blockquote>\n<p> &#8230; and do you remember how we observed at <a target=_blank title='Windows 10 Cortana Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/windows-10-cortana-primer-tutorial\/'>Windows 10 Cortana Primer Tutorial<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/windows-10-cortana-primer-tutorial\/'><p>\n&#8230; because you can work Cortana without the voice recognition part, if you like, or if you have the urge to run for the nearest cupboard before being caught talking into a computer (microphone)\n<\/p><\/blockquote>\n<p>?  Well, today, we&#8217;d like you to be patient about the lack of audio quality with our home made audio (see excuse 2 above) bit we are mainly interested in &#8220;proof of concept&#8221; issues (see excuse 1 above).<\/p>\n<p>So what &#8220;ingredients&#8221; went into this &#8220;Audio Numbers&#8221; web application?  As we did in <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/apple-ios-siri-audio-commentary-tutorial\/' title='Apple iOS Siri Audio Commentary Tutorial'>Apple iOS Siri Audio Commentary Tutorial<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/apple-ios-siri-audio-commentary-tutorial\/'><p>\nHTML <a target=_blank title='HTML audio element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_audio.asp'>audio<\/a> elements that allow for an audio commentary of the 9 &#8220;subimages&#8221; &#8230; the content for which is derived on a Mac OS X by <a target=_blank title='QuickTime Player' href='https:\/\/support.apple.com\/downloads\/quicktime'>QuickTime Player<\/a>&#8216;s Audio Recording functionality, which we last talked about at this blog with <a target=_blank title='QuickTime Player Video Flickr Share Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/quicktime-player-video-flickr-share-primer-tutorial\/'>QuickTime Player Video Flickr Share Primer Tutorial<\/a>\n<\/p><\/blockquote>\n<p> &#8230; we do again today.  On doing this we realized the recordings were not loud enough, so started down the road of R&#038;D on this and got to the very useful <a target=_blank title='Very useful link, thanks' href='http:\/\/increase-audio-volume.blogspot.com.au\/2011\/03\/how-to-increase-audio-volume-video-avi.html?xl'>Increase Audio Volume<\/a> website tool that helped a little, and this manifests itself if\/when you run our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/audio_1_59.html\" title='Click picture'>live run<\/a> today, that if you pick &#8220;minute&#8221; numbers less than or equal to &#8220;30&#8221; they are a better better in volume than others, with the &#8220;Trial Version&#8221; of this software helping you out with &#8220;half file&#8221; enhancements.  &#8220;Proof of concept&#8221;, remember?  And so the aspects you&#8217;d change for your own purposes, are &#8230;<\/p>\n<ol>\n<li>the content (and more than likely, names) of audio files mentioned below &#8230;<\/li>\n<li>arrays of audio files &#8230;<br \/>\n<code><br \/>\nvar audiomedia=[\"one_to_fiftynine.m4a\",\"past_quarterto.m4a\",\"am_pm.m4a\"];<br \/>\nvar midmedia=[\"midnight_midday.m4a\"];<br \/>\n<\/code><br \/>\n&#8230; and it should be noted here, that a separate file for each unique sound, could be a good alternative design, and would stop failures to do with the slow loading speed of the home web server causing audio misfiring &#8230; and would mean, below, that &#8220;astart&#8221; is always &#8220;0&#8221; and &#8220;delay&#8221; should be set to the audio object&#8217;s <i>duration<\/i> parameter\n<\/li>\n<li>var<font size=1>iables<\/font> <b>&#8220;astart&#8221;<\/b> and <b>&#8220;delay&#8221;<\/b> as per example &#8230;<br \/>\n<code><br \/>\n      } else if (thingis.toLowerCase().indexOf('clock') != -1) {<br \/>\n        oaudio.src=audiomedia[i];<br \/>\n        <b>astart=eval(\"3.1\");<br \/>\n        delay=1.8;<\/b><br \/>\n<\/code><br \/>\n&#8230; where &#8220;astart&#8221; reflects a start of play value and &#8220;delay&#8221; represents a length of play scenario in seconds, as we got going in the past when we presented <a title='Spliced Audio\/Video Overlay Position Tutorial' href='#savopt'>Spliced Audio\/Video Overlay Position Tutorial<\/a> as shown below, where you can read more about the HTML5 <a target=_blank title='HTML5 Audio objects information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/dom_obj_audio.asp'>Audio objects<\/a> we used with this &#8220;proof of concept&#8221; project\n<\/li>\n<\/ol>\n<p>Please note with the recording of &#8220;one_to_fiftynine.m4a&#8221;, that records numbers from 1 to 59, via QuickTime Player, we relied on the recording timer, to time our number recording with a second of duration to make the HTML and Javascript coding a lot easier!<\/p>\n<p>So, as you can see, this is &#8220;proof of concept&#8221; preparation, and of you want to try it yourself, perhaps you&#8217;d like to start with a skeleton of today&#8217;s HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/audio_1_59.html_GETME\" title='audio_1_59.html'>audio_1_59.html<\/a> as a starting point?!<\/p>\n<hr>\n<p id='savopt'>Previous relevant <a target=_blank title='Spliced Audio\/Video Overlay Position Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/Spliced Audio\/Video Overlay Position Tutorial\/'>Spliced Audio\/Video Overlay Position Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Spliced Audio\/Video Overlay Position Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audiovideo_position.jpg\" title=\"Spliced Audio\/Video Overlay Position Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Spliced Audio\/Video Overlay Position Tutorial<\/p><\/div>\n<p>Today we&#8217;ve written a third draft of an HTML and Javascript web application that splices up to nine bits of audio or video or image input together, building on the previous <a title='Spliced Audio\/Video\/Image Overlay Tutorial' href='#saviot'>Spliced Audio\/Video\/Image Overlay Tutorial<\/a> as shown below, here, and that can take any of the forms &#8230;<\/p>\n<ul>\n<li>audio file &#8230; and less user friendly is &#8230;<\/li>\n<li>text that gets turned into speech via <a target=_blank title='Google Translate' href='http:\/\/translate.google.com'>Google Translate<\/a> (and user induced Text to Speech functionality), but needs your button presses<\/li>\n<li>video<\/li>\n<li>image &#8230; and background image for webpage<\/li>\n<\/ul>\n<p> &#8230; for either of the modes of use, that being &#8230;<\/p>\n<ul>\n<li>discrete &#8230; or &#8220;Optional&#8221;<\/li>\n<li>synchronized &#8230; or &#8220;Overlay&#8221;<\/li>\n<\/ul>\n<p> &#8230; all like yesterday, but this time we allow you to &#8220;seek&#8221; or position yourself within the audio and\/or video media.  We still all &#8220;fit&#8221; this into GET parameter usage.  Are you thinking we are a tad lazy with this approach?  Well, perhaps a little, but it also means you can do this job just using clientside HTML and Javascript, without having to involve any serverside code like PHP, and in this day and age, people are much keener on this &#8220;just clientside&#8221; or &#8220;just client looking, plus, perhaps, Javascript serverside code&#8221; (ala <a target=_blank title='Node.js installation download webpage' href='https:\/\/nodejs.org\/en\/download\/'>Node.js<\/a>) or perhaps &#8220;Javascript clientside client code, plus Ajax methodologies&#8221;.  In any case, it does simplify design to not have to involve a serverside language like PHP &#8230; but please don&#8217;t think we do not encourage you to learn a serverside language like PHP.<\/p>\n<p>While we are at it here, we continue to think about the mobile device unfriendliness with our current web application, it being, these days, that the setting of the <i>autoplay<\/i> property for a media object is frowned upon regarding these mobile devices &#8230; for reasons of &#8220;runaway&#8221; unknown charge issues as you can read at this <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/12496144\/can-you-autoplay-html5-videos-on-the-ipad'>useful link<\/a> &#8230; thanks &#8230; and where they quote from Apple &#8230; <\/p>\n<blockquote cite=\"http:\/\/stackoverflow.com\/questions\/12496144\/can-you-autoplay-html5-videos-on-the-ipad\"><p>\n    &#8220;Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.<br \/>\n<b><\/b><br \/>\n    In Safari, on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and auto-play are disabled. No data is loaded until the user initiates it.&#8221; &#8211; Apple documentation.\n<\/p><\/blockquote>\n<p>A link we&#8217;d like to thank regarding the new &#8220;seek&#8221; or media positioning functionality is <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/9563887\/setting-html5-audio-position'>this one<\/a> &#8230; thanks.<\/p>\n<p><p>Also, today, for that sense of symmetry, we start to create the Audio objects from now on using &#8230;<\/p>\n<p><code><br \/>\ndocument.createElement(\"AUDIO\");<br \/>\n<\/code><\/p>\n<p> &#8230; as this acts the same as <i>new Audio()<\/i> to the best of our testing.<\/p>\n<p>For your own testing purposes, if you know of some media URLs to try, please feel free to try the &#8220;overlay&#8221; of media ideas inherent in today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html---GETME\">splice_audio.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm\">live run<\/a>.  For today&#8217;s <i>cake<\/i> &#8220;prepared before the program&#8221; we&#8217;ve again channelled the <a target=_blank title='GoToMeeting Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gotomeeting-primer-tutorial\/'>GoToMeeting Primer Tutorial<\/a> which had separate audio (albeit very short &#8230; sorry &#8230; but you get the gist) and video &#8230; well, below, you can click on the image to hear the presentation with audio and video synchronized, but only seconds 23 through to 47 of the video should play, and the presentation ending with the image below &#8230;<\/p>\n<p><a id='aaiff' title='Click to see the audio and video played together synchronously' onclick=\"  document.getElementById('aiff').style.display='block';  document.getElementById('aiff').src='http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm?audio1=..%2FGoToMeeting%2FGoToMeeting.m4v+%2323.47&#038;audio2=+..%2FGoToMeeting%2FGoToMeeting.m4a&#038;audio3=..%2FGoToMeeting%2FGoToMeeting-80aof.jpg++&#038;audio4=&#038;audio5=&#038;audio6=&#038;audio7=&#038;audio8=&#038;audio9=&#038;background=&#038;hide=offoff'; this.style.display='none'; \"><img title='Click to see the audio and video played together synchronously' id='iiif' src='http:\/\/www.rjmprogramming.com.au\/Mac\/GoToMeeting\/GoToMeeting-80aof.jpg'><\/img><\/a><iframe style='display:none; width:100%; height:500px;' id='aiff' src='http:\/\/www.rjmprogramming.com.au\/Mac\/GoToMeeting\/GoToMeeting-80aof.jpg' title='GoToMeeting Primer Tutorial presentation'><\/iframe><\/p>\n<p>We think, though, that we will be back regarding this interesting topic, and hope we can improve mobile device functionality.<\/p>\n<hr>\n<p id='saviot'>Previous relevant <a target=_blank title='Spliced Audio\/Video\/Image Overlay Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audiovideoimage-overlay-tutorial\/'>Spliced Audio\/Video\/Image Overlay Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Spliced Audio\/Video\/Image Overlay Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audiovideo.jpg\" title=\"Spliced Audio\/Video\/Image Overlay Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Spliced Audio\/Video\/Image Overlay Tutorial<\/p><\/div>\n<p>Today we&#8217;ve written a second draft of an HTML and Javascript web application that splices up to nine bits of audio or video or image input together, building on the previous <a title='Splicing Audio Primer Tutorial' href='#sapt'>Splicing Audio Primer Tutorial<\/a> as shown below, here, and that can take any of the forms &#8230;<\/p>\n<ul>\n<li>audio file &#8230; and less user friendly is &#8230;<\/li>\n<li>text that gets turned into speech via <a target=_blank title='Google Translate' href='http:\/\/translate.google.com'>Google Translate<\/a> (and user induced Text to Speech functionality), but needs your button presses<\/li>\n<li>video<\/li>\n<li>image &#8230; and background image for webpage<\/li>\n<\/ul>\n<p> &#8230; for either of the modes of use, that being &#8230;<\/p>\n<ul>\n<li>discrete &#8230; or &#8220;Optional&#8221;<\/li>\n<li>synchronized &#8230; or &#8220;Overlay&#8221;<\/li>\n<\/ul>\n<p>The major new change here, apart from the ability to play two media files at once in our synchronized (or &#8220;overlayed&#8221;) way, is the additional functionality for Video, and we proceeded thinking there&#8217;d be an Javascript DOM <a target=_blank title='OOP information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Object-oriented_programming'>OOP<\/a>y method like &#8230; <i>var xv = new Video();<\/i> &#8230; to allow for this, but found out from this useful link &#8230; thanks &#8230; that an <a target=_blank title='Video object information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/dom_obj_video.asp'>alternative approach for Video<\/a> object creation, on the fly, is &#8230;<\/p>\n<p><code><br \/>\nvar xv = document.createElement(\"VIDEO\");<br \/>\n<\/code><\/p>\n<p> &#8230; curiously.  And it took us a while to tweak to the idea that to have a &#8220;display home&#8221; for the video on the webpage we needed to &#8230;<\/p>\n<p><code><br \/>\ndocument.body.appendChild(xv);<br \/>\n<\/code><\/p>\n<p> &#8230; which means you need to take care of any HTML form data already filled in, that isn&#8217;t that form&#8217;s default, when you effectively &#8220;refresh&#8221; the webpage like this.  Essentially though, media on the fly is a modern approach possible fairly easily with just clientside code.  Cute, huh?!<\/p>\n<p>Of course, what we still miss here, is the upload from a local place onto the web server, here at RJM Programming, capability, which we may consider in future, and that some of those other <a target=_blank title='Synchronization blog postings here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/synchronize'>synchronization of media<\/a> themed blog postings of the past, which you may want to read more, for this type of approach.<\/p>\n<p>In the meantime, if you know of some media URLs to try, please feel free to try the &#8220;overlay&#8221; of media ideas inherent in today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html--GETME\">splice_audio.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm\">live run<\/a>.  We&#8217;ve thought of this one.  Do you remember how the <a target=_blank title='GoToMeeting Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gotomeeting-primer-tutorial\/'>GoToMeeting Primer Tutorial<\/a> had separate audio (albeit very short &#8230; sorry &#8230; but you get the gist) and video &#8230; well, below, you can click on the image to hear the presentation with audio and video synchronized, and the presentation ending with the image below &#8230;<\/p>\n<p><a id='aaif' title='Click to see the audio and video played together synchronously' onclick=\"  document.getElementById('aif').style.display='block';  document.getElementById('aif').src='http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm?audio1=..%2FGoToMeeting%2FGoToMeeting.m4v+&#038;audio2=+..%2FGoToMeeting%2FGoToMeeting.m4a&#038;audio3=..%2FGoToMeeting%2FGoToMeeting-80aof.jpg++&#038;audio4=&#038;audio5=&#038;audio6=&#038;audio7=&#038;audio8=&#038;audio9=&#038;background=&#038;hide=offoff'; this.style.display='none'; \"><img title='Click to see the audio and video played together synchronously' id='iiif' src='http:\/\/www.rjmprogramming.com.au\/Mac\/GoToMeeting\/GoToMeeting-80aof.jpg'><\/img><\/a><iframe style='display:none; width:100%; height:500px;' id='aif' src='http:\/\/www.rjmprogramming.com.au\/Mac\/GoToMeeting\/GoToMeeting-80aof.jpg' title='GoToMeeting Primer Tutorial presentation'><\/iframe><\/p>\n<p>We think, though, that we will be back regarding this interesting topic.<\/p>\n<hr>\n<p id='sapt'>Previous relevant <a target=_blank title='Splicing Audio Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/splicing-audio-primer-tutorial\/'>Splicing Audio 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\/Mac\/iPad\/splice_audio.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Spliced Audio Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.jpg\" title=\"Spliced Audio Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Splicing Audio Primer Tutorial<\/p><\/div>\n<p>Today we&#8217;ve written a first draft of an HTML and Javascript web application that splices up to nine bits of audio input together that can take either of the forms &#8230;<\/p>\n<ul>\n<li>audio file &#8230; and less user friendly is &#8230;<\/li>\n<li>text that gets turned into speech via <a target=_blank title='Google Translate' href='http:\/\/translate.google.com'>Google Translate<\/a> (and user induced Text to Speech functionality), but needs your button presses<\/li>\n<\/ul>\n<p>Do you remember, perhaps, when we did a series of blog posts regarding the YouTube API, that finished, so far, with <a target=_blank title='YouTube API Iframe Synchronicity Resizing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-iframe-synchronicity-resizing-tutorial\/'>YouTube API Iframe Synchronicity Resizing Tutorial<\/a>?  Well, a lot of what we do today is doing similar sorts of functionalities but just for <a target=_blank title='Javascript Audio object via DOM information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_av_dom.asp'><i>Audio<\/i><\/a> objects in HTML5.  For help on this we&#8217;d like to thank this <a target=_blank title='Great link' href='http:\/\/stackoverflow.com\/questions\/10868249\/html5-audio-player-duration-showing-nan'>great link<\/a>.  So rather than have HTML <a target=_blank href='http:\/\/www.w3schools.com\/html\/html5_audio.asp' title='HTML audio tag information from w3schools'><i>audio<\/i><\/a> elements in our HTML, as we first shaped to do, we&#8217;ve taken the great advice from this link, and gone all Javascript DOM <a target=_blank title='OOP information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Object-oriented_programming'>OOP<\/a>y on the task, to splice audio media together.<\/p>\n<p>There were three thought patterns going on here for me.<\/p>\n<ul>\n<li>The first was a simulation of those Sydney train public announcements where the timbre of the voice differs a bit between when they say &#8220;Platform&#8221; and the &#8220;6&#8221; (or whatever platform it is) that follows.  This is pretty obviously computer audio &#8220;bits&#8221; strung together &#8230; and wanted to get somewhere towards that capability.<\/li>\n<li>The second one relates to presentation ideas following up on that &#8220;onmouseover&#8221; Siri audio enhanced presentation we did at <a target=_blank title='Apple iOS Siri Audio Commentary Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/apple-ios-siri-audio-commentary-tutorial\/'>Apple iOS Siri Audio Commentary Tutorial<\/a>.  Well, we think we can do something related to that here, and we&#8217;ve prepared this <strike>cake<\/strike> audio presentation here, for us, in advance &#8230; <font size=1>really, there&#8217;s no need for thanks<\/font>.<\/li>\n<li>The third concerns our eternal media file synchronization quests here at this blog that you may find of interest we hope, <a target=_blank title='Synchronization blog postings here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/synchronize'>here<\/a>.<\/p>\n<\/ul>\n<p>Also of interest over time has been the <a target=_blank title='Google Translate' href='http:\/\/translate.google.com'>Google Translate<\/a> Text to Speech functionality that <a target=_blank title='Discussion here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/text-to-speech'>used to be very open<\/a>, and we now only use around here in an interactive &#8220;user clicks&#8221; way &#8230; but we still use it, because it is very useful, so, thanks.  But trying to get this method working for &#8220;Platform&#8221; and &#8220;6&#8221; without a yawning gap in between ruins the spontaneity and fun somehow, but there&#8217;s nothing stopping you making your own audio files yourself as we did in that Siri tutorial called <a target=_blank title='Apple iOS Siri Audio Commentary Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/apple-ios-siri-audio-commentary-tutorial\/'>Apple iOS Siri Audio Commentary Tutorial<\/a> and take the HTML and Javascript code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html_GETME\" title='splice_audio.html'>splice_audio.html<\/a> from today, and go and make your own web application? Now, is there? Huh?<\/p>\n<p>Try a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html\" title='Click picture'>live run<\/a> or perhaps some more Siri cakes?!<\/p>\n<ul>\n<li><a target=_blank title='Audio with Background then Form for another, perhaps' href='http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html?audio1=slide1.m4a&#038;audio2=slide2.m4a&#038;audio3=slide3.m4a&#038;audio4=slide4.m4a&#038;audio5=slide5.m4a&#038;audio6=slide6.m4a&#038;audio7=slide7.m4a&#038;audio8=slide8.m4a&#038;audio9=slide9.m4a&#038;background=siri_setup.jpg&#038;hide=onoff'>Audio with Background then Form for another, perhaps<\/a><\/li>\n<li><a target=_blank title='Audio with Background and Form showing the whole time' href='http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html?audio1=slide1.m4a&#038;audio2=slide2.m4a&#038;audio3=slide3.m4a&#038;audio4=slide4.m4a&#038;audio5=slide5.m4a&#038;audio6=slide6.m4a&#038;audio7=slide7.m4a&#038;audio8=slide8.m4a&#038;audio9=slide9.m4a&#038;background=siri_setup.jpg&#038;hide=offoff'>Audio with Background and Form showing the whole time<\/a><\/li>\n<li><a target=_blank title='Audio with no Background then Form for another, perhaps' href='http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html?audio1=slide1.m4a&#038;audio2=slide2.m4a&#038;audio3=slide3.m4a&#038;audio4=slide4.m4a&#038;audio5=slide5.m4a&#038;audio6=slide6.m4a&#038;audio7=slide7.m4a&#038;audio8=slide8.m4a&#038;audio9=slide9.m4a&#038;background=&#038;hide=onoff'>Audio with no Background then Form for another, perhaps<\/a><\/li>\n<li><a target=_blank title='Just Audio' href='http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html?audio1=slide1.m4a&#038;audio2=slide2.m4a&#038;audio3=slide3.m4a&#038;audio4=slide4.m4a&#038;audio5=slide5.m4a&#038;audio6=slide6.m4a&#038;audio7=slide7.m4a&#038;audio8=slide8.m4a&#038;audio9=slide9.m4a&#038;background=&#038;hide=onon'>Just Audio<\/a><\/li>\n<\/ul>\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='#d24451' onclick='var dv=document.getElementById(\"d24451\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/audio\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d24451' 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='#d24545' onclick='var dv=document.getElementById(\"d24545\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/video\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d24545' 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='#d24572' onclick='var dv=document.getElementById(\"d24572\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/media\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d24572' 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='#d25031' onclick='var dv=document.getElementById(\"d25031\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/clock\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25031' 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='#d25059' onclick='var dv=document.getElementById(\"d25059\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/genericization\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25059' 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='#d45202' onclick='var dv=document.getElementById(\"d45202\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/api\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45202' 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='#d45212' onclick='var dv=document.getElementById(\"d45212\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/array\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45212' 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='#d45220' onclick='var dv=document.getElementById(\"d45220\"); 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='d45220' 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='#d45389' onclick='var dv=document.getElementById(\"d45389\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45389' 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='#d45410' onclick='var dv=document.getElementById(\"d45410\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/quiz\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45410' 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='#d45423' onclick='var dv=document.getElementById(\"d45423\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45423' 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='#d45472' onclick='var dv=document.getElementById(\"d45472\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ajax\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45472' 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='#d45492' onclick='var dv=document.getElementById(\"d45492\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/settimeout\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45492' 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='#d46081' onclick='var dv=document.getElementById(\"d46081\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geography\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46081' 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='#d46086' onclick='var dv=document.getElementById(\"d46086\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/map\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46086' 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='#d46093' onclick='var dv=document.getElementById(\"d46093\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46093' 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='#d47213' onclick='var dv=document.getElementById(\"d47213\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/synchronize\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47213' 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='#d47220' onclick='var dv=document.getElementById(\"d47220\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47220' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In addition to yesterday&#8217;s YouTube Embedded Iframe API Synchronization Tutorial &#8230; synchronizing functionality for YouTube video via its Embedded Iframe API interfaced videos here at RJM Programming &#8230; we think another interesting &#8220;value add&#8221; could be &#8230; superimposed (and synchronized) &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-embedded-iframe-api-synchronized-superimposition-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":[4,12,14,37],"tags":[174,1580,202,367,2327,576,587,652,760,876,894,2362,1988,997,1866,2312,2615,1234,1670,1238,1319,1369,1493,2017,1496],"class_list":["post-47220","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-button","tag-cell","tag-checkbox","tag-dropdown","tag-embedded","tag-html","tag-iframe","tag-javascript","tag-media","tag-opacity","tag-overlay","tag-play","tag-position","tag-programming","tag-select","tag-superimpose","tag-superimposition","tag-synchronization","tag-synchronize","tag-table","tag-tutorial","tag-video","tag-youtube","tag-youtube-api","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47220"}],"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=47220"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47220\/revisions"}],"predecessor-version":[{"id":47222,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47220\/revisions\/47222"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=47220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=47220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=47220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}