{"id":69018,"date":"2025-07-15T03:01:00","date_gmt":"2025-07-14T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=69018"},"modified":"2025-07-15T11:15:35","modified_gmt":"2025-07-15T01:15:35","slug":"youtube-style-subrip-subtitles-button-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-style-subrip-subtitles-button-tutorial\/","title":{"rendered":"YouTube Style SubRip Subtitles Button Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Style SubRip Subtitles Button Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary_button.gif\" title=\"YouTube Style SubRip Subtitles Button Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube Style SubRip Subtitles Button Tutorial<\/p><\/div>\n<p>We all hope the &#8220;latest button&#8221; will help out achieving something with online endeavours.<\/p>\n<p>So what about a &#8220;button&#8221; with a dual purpose according to need &#8230; well &#8230; quick &#8230; get thee to <a target=\"_blank\" title='?' href='https:\/\/www.allbuttons.com.au\/' rel=\"noopener\">The Button Shop<\/a> &#8230; post haste!<\/p>\n<p>Yes, our new collaboration endeavours have reached the &#8220;material button&#8221; phase, further to yesterday&#8217;s <a title='YouTube Style SubRip Subtitles Overlay Tutorial' href='#ytssrsot'>YouTube Style SubRip Subtitles Overlay Tutorial<\/a>, with our new collaboration button wording being &#8230;<\/p>\n<ul>\n<li>&#8220;Collaboration&#8221; &#8230; ahead of a collaboration Originator creating a collaboration grouping associated with a particular <a target=\"_blank\" title='YouTube' href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> video &#8230; and &#8230;<\/li>\n<li>&#8220;Feedback&#8221; &#8230; ahead of a collaborator (who has been contacted via email or SMS by the Originator) &#8230; presumably making changes <font size=1>(or just being sociable, or yanking your chain?!)<\/font> &#8230; and recontacting the Originator and other collaboration group members with their &#8220;Feedback&#8221;<\/li>\n<\/ul>\n<p> &#8230; and using Javascript global var<font size=1>iable<\/font> <i>anyhash<\/i> as the determinant of this behaviour <font size=1>(but <strong>all<\/strong> behaviours, be warned, <i>any<\/i><sup>hash<\/sup> is not qualified<sup>?<\/sup>!)<\/font>.  At document.body.onload event <font color=blue>we have<\/font> &#8230;<\/p>\n<p><code><br \/>\n  var anyhash='';<br \/>\n  var prefixer='', suffixer='';<br \/>\n  <br \/>\n  function mobissue() {<br \/>\n    <font color=blue>if (decodeURIComponent(document.URL).indexOf('#') != -1 && eval('' + decodeURIComponent(document.URL).split('#').length) &gt; 1) {<br \/>\n      var emis=decodeURIComponent(decodeURIComponent(document.URL).split('#')[eval(-1 + decodeURIComponent(document.URL).split('#').length)]).replace(\/^group\\=\/g,'');<br \/>\n      if (emis.indexOf('[') &gt; 0 && emis.indexOf(']') &gt; emis.indexOf('[')) { \/\/ && emis.indexOf('#') &gt; emis.indexOf(']')) {<br \/>\n        anyhash='#group=' + encodeURIComponent(emis.split('#')[eval(-1 + emis.split('#').length)] + ',' + emis.replace(\/\\ \/g,'%20').split('#')[0]);<br \/>\n        prefixer='&lt;font onclick=\"parent.onl(event);\" color=\"blue\"&gt;';<br \/>\n        suffixer='&lt;\/font&gt;';<br \/>\n     }<br \/>\n    }<\/font><br \/>\n    <br \/>\n    <font color=blue>if (anyhash != '') { \/\/ am a collaborator<br \/>\n      setTimeout(function(){<br \/>\n      document.getElementById('dcol').innerHTML='&lt;button id=bdcol style=display:inline-block; onclick=docollaborate(true); title=\" ... to collaboration group ' + decodeURIComponent(anyhash.replace(\/\\#group\\=\/g,'')).replace('#',',') + '\"&gt;Feedback&lt;\/button&gt;';<br \/>\n      }, 6000);<br \/>\n    } else {<br \/>\n      setTimeout(function(){<br \/>\n      document.getElementById('dcol').innerHTML='&lt;button id=bdcol style=display:inline-block; onclick=docollaborate(false); title=\"Invite a group to collaborate including a ' + \"'From'\" + ' contact # hash separated from a comma separated collaboration group list in format Name[contactAllEmailsOrAllSMS]#Originator[contactAsPerListType]\"&gt;Collaborate&lt;\/button&gt;';<br \/>\n      }, 6000);<br \/>\n    }<\/font><br \/>\n<br \/>\n    if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n      document.getElementById('dfp').innerHTML=document.getElementById('dfp').innerHTML.replace(\/\\&lt;\\\/textarea\\&gt;\/g, '&lt;\/input&gt;').replace(\/\\&lt;textarea\\ rows\\=\\\"1\\\"\\ data\\-type\\=\/g, '&lt;input type=');<br \/>\n    }<br \/>\n    var sih=document.getElementById('sisterhood').innerHTML.split(document.getElementById('sisterhood').innerHTML.split('&lt;\/option&gt;')[0] + '&lt;\/option&gt;')[1];<br \/>\n    document.getElementById('sisterhood').innerHTML+=sih.replace(\/option\\ value\/g, 'option title=\"Down below\" value').replace(\/\\&lt;\\\/option\\&gt;\/g, ' (down below)&lt;\/option&gt;').replace(\/\\.html\/g, '.html#below');<br \/>\n    document.getElementById('sisterhood').innerHTML+=sih.replace(\/option\\ value\/g, 'option title=\"Popup window\" value').replace(\/\\&lt;\\\/option\\&gt;\/g, ' (popup window)&lt;\/option&gt;').replace(\/\\.html\/g, '.html#popup');<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; teaming with a new Javascript function <i>docollaborate<\/i> to be called on that button&#8217;s onclick event &#8230;<\/p>\n<p><code><br \/>\n  function docollaborate(amcollaborator) {<br \/>\n    var colans='', colarr=[];<br \/>\n    if (!amcollaborator) {<br \/>\n      colans=prompt('To collaborate, as the collaboration group Originator please enter a (optionally if multiple comma separated) Name[contactAllEmailOrAllSMS] list to collaborate with then a hash # to separate a Originator[emailOrSMStoMatchNameType] ... eg. RMet[rmetcalfe15@gmail.com],RMetcalfe[rmetcalfe15@gmail.com]#RM[rmetcalfe15@gmail.com]', '');<br \/>\n      if (colans == null) { colans=''; }<br \/>\n      if (colans.indexOf('[') &gt; 0 && colans.indexOf(']') &gt; colans.indexOf('[') && colans.indexOf('#') &gt; colans.indexOf(']') && colans.split('#')[eval(-1 + colans.split('#').length)].indexOf('[') &gt; 0 && colans.split('#')[eval(-1 + colans.split('#').length)].indexOf(']') &gt; colans.split('#')[eval(-1 + colans.split('#').length)].indexOf('[')) {<br \/>\n        if (colans.indexOf('@') != -1) {<br \/>\n           doemail(colans);<br \/>\n        } else {<br \/>\n           dosms(colans);<br \/>\n        }<br \/>\n      }<br \/>\n    } else if (decodeURIComponent(anyhash).indexOf('@') != -1) {<br \/>\n      colarr=decodeURIComponent(anyhash.replace(\/^\\#group\\=\/g,'')).split(',');<br \/>\n      if (decodeURIComponent(anyhash.replace(\/^\\#group\\=\/g,'')).indexOf('#') == -1) {<br \/>\n      doemail((decodeURIComponent(anyhash.replace(\/^\\#group\\=\/g,'')) + '~').replace(',' + colarr[eval(-1 + colarr.length)] + '~', '#' + colarr[eval(-1 + colarr.length)]).replace(\/\\~$\/g,''));<br \/>\n      } else {<br \/>\n      doemail(decodeURIComponent(anyhash.replace(\/^\\#group\\=\/g,'')));<br \/>\n      }<br \/>\n    } else if (anyhash.trim() != '') {<br \/>\n      colarr=decodeURIComponent(anyhash.replace(\/^\\#group\\=\/g,'')).split(',');<br \/>\n      if (decodeURIComponent(anyhash.replace(\/^\\#group\\=\/g,'')).indexOf('#') == -1) {<br \/>\n      dosms((decodeURIComponent(anyhash.replace(\/^\\#group\\=\/g,'')) + '~').replace(',' + colarr[eval(-1 + colarr.length)] + '~', '#' + colarr[eval(-1 + colarr.length)]).replace(\/\\~$\/g,''));<br \/>\n      } else {<br \/>\n      dosms(decodeURIComponent(anyhash.replace(\/^\\#group\\=\/g,'')));<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; calling on <font color=blue>tweaked<\/font> existant email and SMS conduit Javascript function calling scenarios &#8230;<\/p>\n<p><code><br \/>\n  function doemail(<font color=blue>inemis<\/font>) {<br \/>\n    var arrinput=[], karr=0;<br \/>\n    wasdb='';<br \/>\n    suffis='';<br \/>\n    var anchor=null;<br \/>\n    var emis='';<br \/>\n    <font color=blue>if (('' + inemis).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '') {<br \/>\n      emis=inemis;<br \/>\n    } else {<\/font><br \/>\n      emis=prompt('Please enter email address to send to.  Can # separate an additionally suffixed personalized message to recipient when faux pas reached.', '');<br \/>\n    <font color=blue>}<\/font><br \/>\n    if (emis == null) { emis=''; }<br \/>\n    if (emis.indexOf('[') &gt; 0 && emis.indexOf(']') &gt; emis.indexOf('[') && emis.indexOf('#') &gt; emis.indexOf(']') && emis.split('#')[eval(-1 + emis.split('#').length)].indexOf('[') &gt; 0 && emis.split('#')[eval(-1 + emis.split('#').length)].indexOf(']') &gt; emis.split('#')[eval(-1 + emis.split('#').length)].indexOf('[')) {<br \/>\n      anyhash='#group=' + encodeURIComponent(emis.split('#')[eval(-1 + emis.split('#').length)] + ',' + emis.replace(\/\\ \/g,'%20').split('#')[0]);<br \/>\n      emis=nosq(emis); \/\/emis.replace('#',',');<br \/>\n    } else {<br \/>\n      anyhash='';<br \/>\n    }<br \/>\n    if (emis.indexOf('#') != -1) { suffis=emis.split('#')[1].trim(); emis=emis.split('#')[0];  }<br \/>\n                if (suffis.trim() != '') {<br \/>\n                  wasdb=document.body.innerHTML;<br \/>\n                  arrinput=document.getElementsByTagName('input');<br \/>\n                  for (karr=0; karr&lt;arrinput.length; karr++) {<br \/>\n                    if (('' + arrinput[karr].id).indexOf('really') != -1) {<br \/>\n                      if (arrinput[karr].value != '') {<br \/>\n                      arrinput[karr].value+=' ... ' + suffis;<br \/>\n                      } else {<br \/>\n                      arrinput[karr].setAttribute('data-placeholder', '' + arrinput[karr].getAttribute('data-placeholder') + ' ... ' + suffis);<br \/>\n                      }<br \/>\n                    }<br \/>\n                  }<br \/>\n    }<br \/>\n    if (emis.indexOf('@') != -1) {<br \/>\n                anchor = document.createElement('a');<br \/>\n                if (emis.trim() == emis.trim().toUpperCase()) {<br \/>\n                anchor.href = 'mailto:' + nosq(emis.trim()) + '?subject=My%20Video%20commentary<font color=blue>' + (inemis == '' ? '' : encodeURIComponent(' regarding collaboration group ' + inemis.replace('#',','))) + '<\/font>&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + theone + '.' + Math.floor(Math.random() * 19897865) + '#bodyih=' + encodeURIComponent(seveninps(document.getElementById('dfp').innerHTML)));<br \/>\n                } else {<br \/>\n                anchor.href = 'mailto:' + nosq(emis.trim()) + '?subject=My%20Video%20commentary<font color=blue>' + (inemis == '' ? '' : encodeURIComponent(' regarding collaboration group ' + inemis.replace('#',','))) + '<\/font>&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + theone + '.' + Math.floor(Math.random() * 19897865) + '#bodyih=' + encodeURIComponent(seveninps(document.getElementById('dfp').innerHTML))); \/\/ + encodeURIComponent(document.body.innerHTML));<br \/>\n                }<br \/>\n                anchor.style.display='none';<br \/>\n                document.body.appendChild(anchor);<br \/>\n                anchor.innerHTML='Email';<br \/>\n                anchor.target='_top';<br \/>\n                anchor.click();<br \/>\n                if (suffis.trim() != '') {<br \/>\n                  setTimeout(andlater, 3000);<br \/>\n                }<br \/>\n<br \/>\n    } else if (emis.trim() != '' && emis.trim().replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') == '') {<br \/>\n                anchor = document.createElement('a');<br \/>\n                anchor.href = 'sms:' + nosq(emis.trim()) + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + theone + '.' + Math.floor(Math.random() * 19897865) + '#bodyih=' + encodeURIComponent(seveninps(document.getElementById('dfp').innerHTML))); \/\/ + encodeURIComponent(seveninps(document.getElementById('dfp').innerHTML)));<br \/>\n                anchor.style.display='none';<br \/>\n                anchor.innerHTML='SMS';<br \/>\n                anchor.target='_top';<br \/>\n                anchor.click();<br \/>\n                if (suffis.trim() != '') {<br \/>\n                  setTimeout(andlater, 3000);<br \/>\n                }<br \/>\n    }<br \/>\n  }<br \/>\n <br \/>\n  function dosms(<font color=blue>inemis<\/font>) {<br \/>\n    var arrinput=[], karr=0;<br \/>\n    wasdb='';<br \/>\n    suffis='';<br \/>\n    var anchor=null;<br \/>\n    var emis='';<br \/>\n    <font color=blue>if (('' + inemis).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '') {<br \/>\n      emis=inemis;<br \/>\n    } else {<\/font><br \/>\n      emis=prompt('Please enter SMS number to send to.  Can # separate an additionally suffixed personalized message to recipient when faux pas reached.', '');<br \/>\n    <font color=blue>}<\/font><br \/>\n    if (emis == null) { emis=''; }<br \/>\n    if (emis.indexOf('[') &gt; 0 && emis.indexOf(']') &gt; emis.indexOf('[') && emis.indexOf('#') &gt; emis.indexOf(']') && emis.split('#')[eval(-1 + emis.split('#').length)].indexOf('[') &gt; 0 && emis.split('#')[eval(-1 + emis.split('#').length)].indexOf(']') &gt; emis.split('#')[eval(-1 + emis.split('#').length)].indexOf('[')) {<br \/>\n      anyhash='#group=' + encodeURIComponent(emis.split('#')[eval(-1 + emis.split('#').length)] + ',' + emis.replace(\/\\ \/g,'%20').split('#')[0]);<br \/>\n      emis=nosq(emis); \/\/emis.replace('#',',');<br \/>\n    } else {<br \/>\n      anyhash='';<br \/>\n    }<br \/>\n    if (emis.indexOf('#') != -1) { suffis=emis.split('#')[1].trim();  emis=emis.split('#')[0];   }<br \/>\n                if (suffis.trim() != '') {<br \/>\n                  wasdb=document.body.innerHTML;<br \/>\n                  arrinput=document.getElementsByTagName('input');<br \/>\n                  for (karr=0; karr&lt;arrinput.length; karr++) {<br \/>\n                    if (('' + arrinput[karr].id).indexOf('really') != -1) {<br \/>\n                      if (arrinput[karr].value != '') {<br \/>\n                      arrinput[karr].value+=' ... ' + suffis;<br \/>\n                      } else {<br \/>\n                      arrinput[karr].setAttribute('data-placeholder', '' + arrinput[karr].getAttribute('data-placeholder') + ' ... ' + suffis);<br \/>\n                      }<br \/>\n                    }<br \/>\n                  }<br \/>\n    }<br \/>\n    if (emis.indexOf('@') != -1) {<br \/>\n                anchor = document.createElement('a');<br \/>\n                if (emis.trim() == emis.trim().toUpperCase()) {<br \/>\n                anchor.href = 'mailto:' + nosq(emis.trim()) + '?subject=My%20Video%20commentary<font color=blue>' + (inemis == '' ? '' : encodeURIComponent(' regarding collaboration group ' + inemis.replace('#',','))) + '<\/font>&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + theone + '.' + Math.floor(Math.random() * 19897865) + '#bodyih=' + encodeURIComponent(seveninps(document.getElementById('dfp').innerHTML)));<br \/>\n                } else {<br \/>\n                anchor.href = 'mailto:' + nosq(emis.trim()) + '?subject=My%20Video%20commentary<font color=blue>' + (inemis == '' ? '' : encodeURIComponent(' regarding collaboration group ' + inemis.replace('#',','))) + '<\/font>&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + theone + '.' + Math.floor(Math.random() * 19897865) + '#bodyih=' + encodeURIComponent(seveninps(document.getElementById('dfp').innerHTML))); \/\/ + encodeURIComponent(document.body.innerHTML));<br \/>\n                }<br \/>\n                anchor.style.display='none';<br \/>\n                document.body.appendChild(anchor);<br \/>\n                anchor.innerHTML='Email';<br \/>\n                anchor.target='_top';<br \/>\n                anchor.click();<br \/>\n                if (suffis.trim() != '') {<br \/>\n                  setTimeout(andlater, 3000);<br \/>\n                }<br \/>\n<br \/>\n    } else if (emis.trim() != '' && emis.trim().replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') == '') {<br \/>\n                anchor = document.createElement('a');<br \/>\n                anchor.href = 'sms:' + nosq(emis.trim()) + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + theone + '.' + Math.floor(Math.random() * 19897865) + '#bodyih=' + encodeURIComponent(seveninps(document.getElementById('dfp').innerHTML)));<br \/>\n                anchor.style.display='none';<br \/>\n                anchor.innerHTML='SMS';<br \/>\n                anchor.target='_top';<br \/>\n                anchor.click();<br \/>\n                if (suffis.trim() != '') {<br \/>\n                  setTimeout(andlater, 3000);<br \/>\n                }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; in a <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html-------GETME\" rel=\"noopener\">still so far only changed<\/a> for <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html------GETME\" rel=\"noopener\">video_commentary.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html\" rel=\"noopener\">web application<\/a> (<a href='#xifslfp'>you can try below<\/a>) Video Commentary YouTube Style SubRip Subtitles web application member of our latest &#8220;peerage&#8221;.<\/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-style-subrip-subtitles-button-tutorial\/' rel=\"noopener\">YouTube Style SubRip Subtitles Button Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytssrsot'>Previous relevant <a target=\"_blank\" title='YouTube Style SubRip Subtitles Overlay Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-style-subrip-subtitles-overlay-tutorial\/' rel=\"noopener\">YouTube Style SubRip Subtitles Overlay 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\/video_commentary.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Style SubRip Subtitles Overlay Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary_overlay.gif\" title=\"YouTube Style SubRip Subtitles Overlay Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube Style SubRip Subtitles Overlay Tutorial<\/p><\/div>\n<p>Continuing the &#8220;road to collaboration&#8221; onto yesterday&#8217;s <a title='YouTube Style SubRip Subtitles Onkeydown Tutorial' href='#aytssrsot'>YouTube Style SubRip Subtitles Onkeydown Tutorial<\/a> we had a couple of sidetracks to nuance &#8230;<\/p>\n<ol>\n<li>where we said &#8230;<br \/>\n<blockquote><p>\n<a target=\"_blank\" title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp' rel=\"noopener\">contenteditable<\/a>=&#8221;true&#8221; ideas &#8230; only on the outermost such font element wrapper element &#8230; that works well with &#8230;<\/li>\n<\/blockquote>\n<p> &#8230; today we&#8217;d say (rather than &#8220;only on the outermost such font element wrapper element&#8221;) apply contenteditable=&#8221;true&#8221; thinking to all &#8221;  ,  &#8221; delimited font element wrappers we create, initially, on recognizing a user as a collaborator<\/li>\n<\/li>\n<li>where we said &#8230;<br \/>\n<blockquote><p>\noverlay a collaborator&#8217;s left hand topmost textarea (for non-mobile) or third textbox (for mobile) hiding the HTML font element filled orange element HTML innerHTML innards with an overlayed HTML orange element HTML innerText version (just for show, but far less worriesome for the user, and we&#8217;ll show the orange element HTML innerHTML in that overlayed element title)<\/li>\n<\/blockquote>\n<p> &#8230; we realized we wanted both guises because the textarea one can be used by a user in a raw, yet effective way, to edit the wording via its underlying HTML and we should therefore animate via overlayed guises with toggling &#8230;<\/p>\n<ul>\n<li>z-index<\/li>\n<li>opacity<\/li>\n<\/ul>\n<p> &#8230; and from that <font color=blue>we discovered<\/font> &#8230;<br \/>\n<code><br \/>\n  function fontcol(tbo) {<br \/>\n    var inht=tbo.value, iouts=0, prefw='';<br \/>\n    var outht=inht;<br \/>\n    var outins=outht.split('<'), iouts=0;\n    if (inht.indexOf('>') != -1 && inht.indexOf('<') != -1) {\n      \/\/ make a new parser\n      var parser = new DOMParser();\n      \/\/ convert html string into DOM\n      <font color=blue>var newh=new DOMParser().parseFromString(inht, \"text\/html\"); \/\/ thanks to https:\/\/stackoverflow.com\/questions\/57074776\/parse-html-string-to-dom-and-convert-it-back-to-string<br \/>\n      outht=('' + newh.body.innerHTML);<\/font><br \/>\n    }<br \/>\n    if (outht != inht) {<br \/>\n      tbo.value=outht;<br \/>\n    }<br \/>\n    <br \/>\n    return tbo;<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; helped forgive the user not writing the best HTML in the world!  <font size=1>(by the way, read the <a href='#tsp'>Stop Press<\/a> regarding the timing of this)<\/font>\n<\/li>\n<li>we added a bit of &#8220;web browser branding&#8221; into the IP address colour coding logic <font color=blue>as per<\/font> &#8230;<br \/>\n<code><br \/>\n  <font color=blue>function uaprefix() {  \/\/ thanks to https:\/\/tutorial.techaltum.com\/javascript-navigator.html<br \/>\n    if (navigator.userAgent.search(\"Edge\") != -1) {<br \/>\n        return '00';<br \/>\n    } else if (navigator.userAgent.search(\"Chrome\") != -1) {<br \/>\n        return '000';<br \/>\n    } else if (navigator.userAgent.search(\"Firefox\") != -1) {<br \/>\n        return '0000';<br \/>\n    } else if (navigator.userAgent.search(\"Safari\") != -1) {<br \/>\n        return '00000';<br \/>\n    } else if (\/MSIE|Trident|Edge\\\/\/.test(navigator.userAgent)) {<br \/>\n        return '000000';<br \/>\n    } else {<br \/>\n        return '0000000';<br \/>\n    }<br \/>\n  }<br \/>\n  <\/font><br \/>\n    function checkip(iniois) {<br \/>\n       var iois=document.getElementById('srcif');<br \/>\n       if (('' + iois.src).indexOf('signature_signature.php') != -1) {<br \/>\n       var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n       if (aconto != null) {<br \/>\n    \/\/alert('111 ');<br \/>\n       if (aconto.document) { aconto = aconto.document; }<br \/>\n    \/\/alert('1111 ' + aconto.body.innerHTML);<br \/>\n       if (aconto.body.innerHTML.indexOf('&lt;p&gt;') == 0) {<br \/>\n         ipbit=<font color=blue>uaprefix() + <\/font>aconto.body.innerHTML.split('&lt;p&gt;')[1].split('&lt;')[0];<br \/>\n         document.getElementById('doverlay').innerHTML='' + ipbit;<br \/>\n         setTimeout(function(){<br \/>\n           if (prefixer.indexOf('blue') != -1 || 12 == 12) {<br \/>\n             var ibps=document.getElementById('doverlay').innerHTML.replace(\/\\_\\_\/g,'_').split('_');<br \/>\n             var numzeros=eval(eval('' + ibps[0].length) - eval('' + ibps[0].replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').length));<br \/>\n             if (numzeros > 0) {<br \/>\n              numzeros*=3;<br \/>\n             }<br \/>\n             prefixer=prefixer.replace('blue','rgb(' + eval(numzeros + eval(eval('' + ibps[0]) % 100)) + ',' +  eval(eval(numzeros + eval((eval('' + ibps[Math.max(0,eval(-3 + ibps.length))]) + eval('' + ibps[Math.max(0,eval(-2 + ibps.length))]) % 100))) % 100) + ',' + eval(numzeros + eval(eval('' + ibps[eval(-1 + ibps.length)]) % 100)) + ')');<br \/>\n             document.getElementById('doverlay').title='' + 'rgb(' + eval(numzeros + eval(eval('' + ibps[0]) % 100)) + ',' + eval(eval(numzeros + eval((eval('' + ibps[Math.max(0,eval(-3 + ibps.length))]) + eval('' + ibps[Math.max(0,eval(-2 + ibps.length))]) % 100))) % 100) + ',' + eval(numzeros + eval(eval('' + ibps[eval(-1 + ibps.length)]) % 100)) + ')';<br \/>\n           }<br \/>\n         }, 4000);<br \/>\n         \/\/setTimeout(cipb, 2000);<br \/>\n       }<br \/>\n       }<br \/>\n       }<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p> &#8230; in a <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html------GETME\" rel=\"noopener\">so far still only changed<\/a> for <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html-----GETME\" rel=\"noopener\">video_commentary.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html\" rel=\"noopener\">web application<\/a> (<a href='#xifslfp'>you can try below<\/a>) Video Commentary YouTube Style SubRip Subtitles web application member of our latest &#8220;peerage&#8221;.<\/p>\n<p id=tsp><b><i>Stop Press<\/i><\/b><\/p>\n<p>It occurred to us, later, a user does not want to be clobbered &#8220;midstream&#8221; by our faux &#8220;animation overlay&#8221; if they are in the throes of constructing a complex HTML change within the relevant textarea (non-mobile) or textbox (mobile).  <font color=blue>And so<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;textarea rows=1 data-type=text ondblclick=\"alert(this.title);\" onblur=\"if (eval('' + this.value.trim().length) &gt; 0) { theone=fontcol(this).id.replace('fauxpas','');   document.getElementById('tbtheone').value='' + theone;   mapsome();  document.getElementById(this.id.replace('fauxpas','fauxpasreally')).setAttribute('data-placeholder','');  } <font color=blue>atwork=false;<\/font>\" <font color=blue>onkeydown=\"atwork=true;\" <\/font>title=\"Video commentary or note ... multiple can be separated by   ,   (ie. space space comma space space)\" data-name=fauxpas01 id=fauxpas01 data-placeholder=\"Here we are in the ancient medieval city called Oual\u00e2ta in Mauritania to the north west of Africa ...  ,  Oual\u00e2ta lies in the Hodh El Chargi region ...  ,  Oual\u00e2ta was first settled by the Mand\u00e9 Soninke people ...  ,  Beautiful doorways!\" placeholder=\"Your commentary or note\" value=\"\"&gt;&lt;\/textarea&gt;&lt;br&gt;<br \/>\n<\/code><br \/>\n &#8230; was added to the static HTML and a <font color=blue>last minute<\/font> &#8230;<br \/>\n<code><br \/>\n <font color=blue>var atwork=false;<\/font><br \/>\n<br \/>\n function checkonit() {<br \/>\n   if (('' + document.getElementById('ovodivid').style.zIndex).indexOf('-') != -1) {<br \/>\n      setTimeout(checkonit, 5000);<br \/>\n   } else {<br \/>\n      setTimeout(checkonit, 15000);<br \/>\n   }<br \/>\n   <font color=blue>if (!atwork) {  <\/font><br \/>\n   newrect=document.getElementById(ovoid).getBoundingClientRect();<br \/>\n   if (newrect.left == ovrect.left && newrect.width == ovrect.width && newrect.top == ovrect.top && newrect.height == ovrect.height) {<br \/>\n     if (ovodivcont != ovo.value) {<br \/>\n      document.getElementById('ovodivid').innerHTML=document.getElementById(ovoid).value.replace(\/\\ on\/g, ' data-on');<br \/>\n      ovodivcont=document.getElementById(ovoid).value;<br \/>\n      document.getElementById('ovodivid').title=ovodivcont;<br \/>\n     document.getElementById(ovoid).title=document.getElementById(ovoid).title.split(String.fromCharCode(10) + String.fromCharCode(10))[0] + String.fromCharCode(10) + String.fromCharCode(10) + document.getElementById('ovodivid').innerText;<br \/>\n     }<br \/>\n   } else if (ovodivcont != ovo.value) {<br \/>\n     document.getElementById('ovodivid').style.left='' + newrect.left + 'px';<br \/>\n     document.getElementById('ovodivid').style.top='' + newrect.top + 'px';<br \/>\n     document.getElementById('ovodivid').style.width='' + newrect.width + 'px';<br \/>\n     document.getElementById('ovodivid').style.height='' + newrect.height + 'px';<br \/>\n     ovodivcont=document.getElementById(ovoid).value;<br \/>\n     document.getElementById('ovodivid').innerHTML=ovodivcnt.replace(\/\\ on\/g, ' data-on');<br \/>\n     document.getElementById('ovodivid').title=ovodivcont;<br \/>\n     ovodivcont=document.getElementById(ovoid).value;<br \/>\n     document.getElementById(ovoid).title=document.getElementById(ovoid).title.split(String.fromCharCode(10) + String.fromCharCode(10))[0] + String.fromCharCode(10) + String.fromCharCode(10) + document.getElementById('ovodivid').innerText;<br \/>\n   } else {<br \/>\n     document.getElementById('ovodivid').style.left='' + newrect.left + 'px';<br \/>\n     document.getElementById('ovodivid').style.top='' + newrect.top + 'px';<br \/>\n     document.getElementById('ovodivid').style.width='' + newrect.width + 'px';<br \/>\n     document.getElementById('ovodivid').style.height='' + newrect.height + 'px';<br \/>\n   }<br \/>\n   if (('' + document.getElementById('ovodivid').style.zIndex).indexOf('-') != -1) {<br \/>\n      document.getElementById('ovodivid').style.opacity='1.0';<br \/>\n      document.getElementById(ovoid).style.opacity='0.0';<br \/>\n      \/\/setTimeout(checkonit, 5000);<br \/>\n   } else {<br \/>\n      document.getElementById('ovodivid').style.opacity='0.0';<br \/>\n      document.getElementById(ovoid).style.opacity='1.0';<br \/>\n      \/\/setTimeout(checkonit, 15000);<br \/>\n   }<br \/>\n   document.getElementById('ovodivid').style.zIndex='' + eval(-1 * eval('' + document.getElementById('ovodivid').style.zIndex));<br \/>\n <font color=blue>}<\/font><br \/>\n }<br \/>\n<\/code><br \/>\n &#8230; condition was added to the timer function handling &#8220;collaborator only&#8221; faux &#8220;animation overlay&#8221; logic\n<\/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-style-subrip-subtitles-overlay-tutorial\/' rel=\"noopener\">YouTube Style SubRip Subtitles Overlay Tutorial<\/a>.<\/p-->\n<hr>\n<p id='aytssrsot'>Previous relevant <a target=\"_blank\" title='YouTube Style SubRip Subtitles Onkeydown Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-style-subrip-subtitles-onkeydown-tutorial\/' rel=\"noopener\">YouTube Style SubRip Subtitles Onkeydown 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\/video_commentary.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Style SubRip Subtitles Onkeydown Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary_collaborate_better.png\" title=\"YouTube Style SubRip Subtitles Onkeydown Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube Style SubRip Subtitles Onkeydown Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='YouTube Style SubRip Subtitles Peer to Peer Tutorial' href='#ytssrsppt'>YouTube Style SubRip Subtitles Peer to Peer Tutorial<\/a>&#8216;s &#8220;crawl&#8221; progress regarding &#8220;collaboration ideas&#8221;, today we&#8217;ve had a day dominated by the integration of &#8230;<\/p>\n<ul>\n<li>\n<blockquote><p>\n<a target=\"_blank\" title='Events information from w3schools' href='https:\/\/www.w3schools.com\/tags\/ev_onkeydown.asp' rel=\"noopener\">onkeydown<\/a>\n<\/p><\/blockquote>\n<p> event logic &#8230;<br \/>\n<code><br \/>\n function okd(e) {<br \/>\n  if (beforek == '') {<br \/>\n    beforek=document.getElementById('fauxpas' + theone).value;<br \/>\n    beforekih=e.target.innerHTML;<br \/>\n  }<br \/>\n  var key;<br \/>\n  if (e) {<br \/>\n    key = e.keyCode;<br \/>\n    isShift = !!e.shiftKey; \/\/ typecast to boolean<br \/>\n    \/\/if (isShift) { return ''; }<br \/>\n  } else {<br \/>\n    key = e.which;<br \/>\n    isShift = !!e.shiftKey;<br \/>\n    \/\/if (isShift) { return ''; }<br \/>\n  }<br \/>\n  var charx = e.which || e.keyCode;<br \/>\n  \/\/alert('' + charx);<br \/>\n  if (eval('' + e.keyCode) &gt;= 32) {<br \/>\n  if (isShift) {<br \/>\n  kbd[ikbd]+=String.fromCharCode(eval(('' + e.keyCode))).toUpperCase();<br \/>\n  } else {<br \/>\n  kbd[ikbd]+=String.fromCharCode(eval(('' + e.keyCode))).toLowerCase();<br \/>\n  }<br \/>\n  awaitblur=true;<br \/>\n  document.title='kbd[' + ikbd + ']=' + kbd[ikbd];<br \/>\n  }<br \/>\n  gthisih=e.target.innerHTML;<br \/>\n  return true;<br \/>\n }<br \/>\n<\/code><br \/>\n that works well with &#8230;<\/li>\n<li>font element wrapping &#8230; only for collaborators &#8230; that works well with a reinstigated interest in &#8230;<\/li>\n<li><a target=\"_blank\" title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp' rel=\"noopener\">contenteditable<\/a>=&#8221;true&#8221; ideas &#8230; only on the outermost such font element wrapper element &#8230; that works well with &#8230;<\/li>\n<li>IP address <font color=blue>colour coding<\/font> &#8230;<br \/>\n<code><br \/>\n  function checkip(iniois) {<br \/>\n       var iois=document.getElementById('srcif');<br \/>\n       if (('' + iois.src).indexOf('signature_signature.php') != -1) {<br \/>\n       var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n       if (aconto != null) {<br \/>\n   \/\/alert('111 ');<br \/>\n       if (aconto.document) { aconto = aconto.document; }<br \/>\n    \/\/alert('1111 ' + aconto.body.innerHTML);<br \/>\n       if (aconto.body.innerHTML.indexOf('&lt;p&gt;') == 0) {<br \/>\n         ipbit=aconto.body.innerHTML.split('&lt;p&gt;')[1].split('&lt;')[0];<br \/>\n         document.getElementById('doverlay').innerHTML='' + ipbit;<br \/>\n         <font color=blue>setTimeout(function(){<br \/>\n           if (prefixer.indexOf('blue') != -1 || 12 == 12) {<br \/>\n             var ibps=document.getElementById('doverlay').innerHTML.replace(\/\\_\\_\/g,'_').split('_');<br \/>\n             var numzeros=eval(eval('' + ibps[0].length) - eval('' + ibps[0].replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').replace(\/^0\/g,'').length));<br \/>\n             if (numzeros > 0) {<br \/>\n              numzeros*=3;<br \/>\n             }<br \/>\n             prefixer=prefixer.replace('blue','rgb(' + eval(numzeros + eval(eval('' + ibps[0]) % 100)) + ',' +  eval(eval(numzeros + eval((eval('' + ibps[Math.max(0,eval(-3 + ibps.length))]) + eval('' + ibps[Math.max(0,eval(-2 + ibps.length))]) % 100))) % 100) + ',' + eval(numzeros + eval(eval('' + ibps[eval(-1 + ibps.length)]) % 100)) + ')');<br \/>\n             document.getElementById('doverlay').title='' + 'rgb(' + eval(numzeros + eval(eval('' + ibps[0]) % 100)) + ',' + eval(eval(numzeros + eval((eval('' + ibps[Math.max(0,eval(-3 + ibps.length))]) + eval('' + ibps[Math.max(0,eval(-2 + ibps.length))]) % 100))) % 100) + ',' + eval(numzeros + eval(eval('' + ibps[eval(-1 + ibps.length)]) % 100)) + ')';<br \/>\n           }<br \/>\n         }, 4000);<\/font><br \/>\n         \/\/setTimeout(cipb, 2000);<br \/>\n       }<br \/>\n       }<br \/>\n       }<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; manifested in font wrappers for all new element parts<\/li>\n<\/ul>\n<p>Nuances to follow tomorrow involve &#8230;<\/p>\n<ul>\n<li>fixing unnecessary repetition in the work<\/li>\n<li>fix for &#8220;call it off&#8221; should the keyboard &#8220;onkeydown&#8221; event detect a <i>backspace<\/i> or <i>delete<\/i> key entered<\/li>\n<li>exporting the logic to all peer members<\/li>\n<li>introduce the new planned HTML button to direct users to &#8220;collaboration&#8221; rather than just email and\/or SMS sharing<\/li>\n<li>overlay a collaborator&#8217;s left hand topmost textarea (for non-mobile) or third textbox (for mobile) hiding the HTML font element filled orange element HTML innerHTML innards with an overlayed HTML orange element HTML innerText version (just for show, but far less worriesome for the user, and we&#8217;ll show the orange element HTML innerHTML in that overlayed element title)<\/li>\n<\/ul>\n<p> &#8230; the last of which begs the question &#8230;<\/p>\n<blockquote><p>\nSo how did you test for today&#8217;s logic changes?\n<\/p><\/blockquote>\n<p>Glad you asked?!  Well, rather than build that new proposed button yet, what we did to simulate (for our conditions was) &#8230;<\/p>\n<ol>\n<li>started the <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html\" rel=\"noopener\">Video Commentary<\/a> web application &#8230;<\/li>\n<li>clicked the <i>Example<\/i> button &#8230; you don&#8217;t have to wait to &#8230;<\/li>\n<li>click the <i>Email<\/i> button<\/li>\n<li>typed in &#8230;<br \/>\n<code><br \/>\nRMet[rmetcalfe15@gmail.com]#[RM[rmetcalfe15@gmail.com]<br \/>\n<\/code>\n<\/li>\n<li>sent the email to myself at rmetcalfe15@gmail.com<\/li>\n<li>opened that email with our usual <a target=\"_blank\" href=\"https:\/\/gmail.com\" rel=\"noopener\">Gmail<\/a> webpage way<\/li>\n<li>clicked it&#8217;s email body link<\/li>\n<li>clicked <i>Play<\/i> button (and just for mobile you&#8217;d have to additionally click the video&#8217;s Play button as well)<\/li>\n<li>clicked into orange Captions and Subtitles div element to where some additional text was included (and did another, for good measure away from first)<\/li>\n<li>tabbed out<\/li>\n<li>answered any prompt windows (some still superfluous)<\/li>\n<li>any changes are reflected in topmost textarea on the left (for non-mobile) (or third textbox for mobile)<\/li>\n<li>and to see what that looks like in the orange div (ie. with colour coding) reclick the <i>Play<\/i> button to the left &#8230; and this time around &#8230;<\/li>\n<li>if you click into a colour coded new text snippet just the text snippet is the default text up for grabs for changes by the first round of prompt windows presented to the user for change<\/li>\n<\/ol>\n<p> &#8230; in a <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html-----GETME\" rel=\"noopener\">so far only changed<\/a> for <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html----GETME\" rel=\"noopener\">video_commentary.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html\" rel=\"noopener\">web application<\/a> (<a href='#xifslfp'>you can try below<\/a>) Video Commentary YouTube Style SubRip Subtitles web application member of our latest &#8220;peerage&#8221;.<\/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-style-subrip-subtitles-onkeydown-tutorial\/' rel=\"noopener\">YouTube Style SubRip Subtitles Onkeydown Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytssrsppt'>Previous relevant <a target=\"_blank\" title='YouTube Style SubRip Subtitles Peer to Peer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-style-subrip-subtitles-peer-to-peer-tutorial\/' rel=\"noopener\">YouTube Style SubRip Subtitles Peer to Peer 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\/video_commentary.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube Style SubRip Subtitles Peer to Peer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary_window.gif\" title=\"YouTube Style SubRip Subtitles Peer to Peer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube Style SubRip Subtitles Peer to Peer Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Video Commentary YouTube Style SubRip Subtitles Collaboration Preparation Tutorial' href='#vcytssrscpt'>Video Commentary YouTube Style SubRip Subtitles Collaboration Preparation Tutorial<\/a> we&#8217;ve &#8230;<\/p>\n<ul>\n<li>crept along with our collaboration ideas &#8230; and programmatically &#8230;<\/li>\n<li>enhanced the initially very simple select &#8220;dropdown&#8221; element HTML arrangement <font color=blue>via<\/font> &#8230;<br \/>\n<code><br \/>\n&lt;select style=\"width:24px;display:inline-block;\" id=sisterhood <font color=blue>onchange=\"selchange(this);\"<\/font>&gt;&lt;option value=''&gt;-&lt;\/option&gt;&lt;option value='.\/song_lyric_faux_pas.html'&gt;Song Lyric Faux Pas&lt;\/option&gt;&lt;option value='.\/video_commentary.html'&gt;Video Commentary&lt;\/option&gt;&lt;\/select&gt;<br \/>\n<\/code><br \/>\n &#8230; combined with some new document.body &#8220;onload&#8221; <font color=blue>snippet of Javascript<\/font> &#8230;<br \/>\n<code><br \/>\n  function mobissue() {<br \/>\n    if (decodeURIComponent(document.URL).indexOf('#') != -1 && eval('' + decodeURIComponent(document.URL).split('#').length) &gt; 1) {<br \/>\n      var emis=decodeURIComponent(decodeURIComponent(document.URL).split('#')[eval(-1 + decodeURIComponent(document.URL).split('#').length)]).replace(\/^group\\=\/g,'');<br \/>\n      if (emis.indexOf('[') &gt; 0 && emis.indexOf(']') &gt; emis.indexOf('[')) { \/\/ && emis.indexOf('#') &gt; emis.indexOf(']')) {<br \/>\n        anyhash='#group=' + encodeURIComponent(emis.split('#')[eval(-1 + emis.split('#').length)] + ',' + emis.replace(\/\\ \/g,'%20').split('#')[0]);<br \/>\n        prefixer='&lt;font onclick=\"parent.onl(event);\" color=\"blue\"&gt;';<br \/>\n        suffixer='&lt;\/font&gt;';<br \/>\n     }<br \/>\n    }<br \/>\n<br \/>\n    if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n      document.getElementById('dfp').innerHTML=document.getElementById('dfp').innerHTML.replace(\/\\&lt;\\\/textarea\\&gt;\/g, '&lt;\/input&gt;').replace(\/\\&lt;textarea\\ rows\\=\\\"1\\\"\\ data\\-type\\=\/g, '&lt;input type=');<br \/>\n    }<br \/>\n    <font color=blue>var sih=document.getElementById('sisterhood').innerHTML.split(document.getElementById('sisterhood').innerHTML.split('&lt;\/option&gt;')[0] + '&lt;\/option&gt;')[1];<br \/>\n    document.getElementById('sisterhood').innerHTML+=sih.replace(\/option\\ value\/g, 'option title=\"Down below\" value').replace(\/\\&lt;\\\/option\\&gt;\/g, ' (down below)&lt;\/option&gt;').replace(\/\\.html\/g, '.html#below');<br \/>\n    document.getElementById('sisterhood').innerHTML+=sih.replace(\/option\\ value\/g, 'option title=\"Popup window\" value').replace(\/\\&lt;\\\/option\\&gt;\/g, ' (popup window)&lt;\/option&gt;').replace(\/\\.html\/g, '.html#popup');<\/font><br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; and it&#8217;s new &#8220;onchange&#8221; event Javascript &#8230;<br \/>\n<code><br \/>\n  function selchange(sthis) {<br \/>\n    if (sthis.value.trim() != '') {<br \/>\n     if (sthis.outerHTML.indexOf('option value=\"' + sthis.value + '\"') != -1) {<br \/>\n      location.href='' + sthis.value;<br \/>\n      sthis.value='';<br \/>\n     } else if (sthis.outerHTML.indexOf('option title=\"Down below\" value=\"' + sthis.value + '\"') != -1) {<br \/>\n      document.getElementById('downbelow').src='' + sthis.value;<br \/>\n      document.getElementById('downbelow').style.display='block';<br \/>\n      sthis.value='';<br \/>\n     } else if (sthis.outerHTML.indexOf('option title=\"Popup window\" value=\"' + sthis.value + '\"') != -1) {<br \/>\n      wowo=window.open('' + sthis.value, '_blank','top=100,left=300,width=960,height=800');<br \/>\n      sthis.value='';<br \/>\n     }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; building on a default &#8230;<\/p>\n<ol>\n<li>navigate to a peer web application at the web browser address bar &#8230; with, today, options for &#8230;<\/li>\n<li>navigate to a peer in an HTML iframe element appearing below the presented one &#8230; or &#8230;<\/li>\n<li>navigate to a peer in a new popup window<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; for &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html----GETME\" rel=\"noopener\">the changed<\/a> to <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html----GETME\" rel=\"noopener\">video_commentary.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html\" rel=\"noopener\">web application<\/a> (<a href='#xifslfp'>you can try below<\/a>) Video Commentary YouTube Style SubRip Subtitles web application could be useful for research purposes and\/or presentations using YouTube as that ever useful starting point<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/song_lyric_faux_pas.html-------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/song_lyric_faux_pas.html-------GETME\" rel=\"noopener\">song_lyric_faux_pas.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/song_lyric_faux_pas.html\" rel=\"noopener\">web application<\/a> <a href='#ifslfp'>below<\/a><\/li>\n<\/ul>\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-style-subrip-subtitles-peer-to-peer-tutorial\/' rel=\"noopener\">YouTube Style SubRip Subtitles Peer to Peer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='vcytssrscpt'>Previous relevant <a target=\"_blank\" title='Video Commentary YouTube Style SubRip Subtitles Collaboration Preparation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/video-commentary-youtube-style-subrip-subtitles-collaboration-preparation-tutorial\/' rel=\"noopener\">Video Commentary YouTube Style SubRip Subtitles Collaboration Preparation 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\/video_commentary.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Video Commentary YouTube Style SubRip Subtitles Collaboration Preparation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary_url_issue_alt.png\" title=\"Video Commentary YouTube Style SubRip Subtitles Collaboration Preparation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Video Commentary YouTube Style SubRip Subtitles Collaboration Preparation Tutorial<\/p><\/div>\n<p>We think &#8220;the new <a target=\"_blank\" title='SubRip information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/SubRip' rel=\"noopener\">SubRip<\/a> subtitle integrated <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">YouTube API<\/a> interfacing video play peerage&#8221; involved in yesterday&#8217;s <a title='Video Commentary YouTube Style SubRip Subtitles URL Tutorial' href='#vcytssrsurlt'>Video Commentary YouTube Style SubRip Subtitles URL Tutorial<\/a>&#8216;s work had us thinking we might make more out of &#8230;<\/p>\n<ul>\n<li>sharing functionality &#8230; that can move on to &#8230;<\/li>\n<li>collaboration functionality<\/li>\n<\/ul>\n<p> &#8230; to our minds when the recipient of a communication can have a meaningful and &#8220;value adding&#8221; way to answer back, rather than it being &#8220;a broadcasting style&#8221; of communication that &#8220;just sharing<font size=1><sup> even with &#8220;caring&#8221;<\/sup><\/font>&#8221; can tend to be.<\/p>\n<p>With that in mind, we started the day thinking &#8230;<\/li>\n<ul>\n<li>orange &#8220;div&#8221; <font size=1>(captions and SubRip based subtitles)<\/font> element &#8230; got to be &#8230;<\/li>\n<li><a target=\"_blank\" title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp' rel=\"noopener\">contenteditable<\/a>=&#8221;true&#8221; &#8230; but we would think that <font size=1>(because we are so enamoured regarding it)<\/font> &#8230; but luckily for us the &#8220;triple pikes&#8221; needed quickly got us pairing the thinking down to &#8230;<\/li>\n<li>click on the orange &#8220;div&#8221; element &#8230;<br \/>\n<blockquote><p>\nSomething happens\n<\/p><\/blockquote>\n<p> &#8230; in the thinking that this is another alternative way a collaborator may use, down the track, rather than using that &#8220;Create&#8221; link video &#8220;pausing methodology&#8221; way\n<\/li>\n<\/ul>\n<p>At the click event we offer the user, within a Javascript prompt window environment two pieces of information &#8230;<\/p>\n<ol>\n<li>seconds into the video play that the user click happened<\/li>\n<li>the wording of the orange &#8220;div&#8221; element at the time of the click<\/li>\n<\/ol>\n<p> &#8230; because with all the hierarchical stuff going on, believe it or not, but the video keeps playing while a Javascript window prompt is being attended to by the user.  We have catered for the user jumping around the &#8220;seek position&#8221; of the video to make all this more practical &#8230;<\/p>\n<p><code><br \/>\n  function ouralert(inst, thist, thisih, thiscs) {<br \/>\n    \/\/alert('here');<br \/>\n    var iwhat=1, fptimethingos=[], fptimethingoends=[], cbefore='0.000', cafter='', kfind=-1, ifg=0, sofarone='', sofartwo='';<br \/>\n    var fitsinbetween='';<br \/>\n    var threemodes='Regarding a   ,   delimitation (2 spaces comma 2 spaces) can ... ' + String.fromCharCode(10) + ' <font color=blue>1) amend matching blurb (can # delimit) with one changed string<\/font> ';<br \/>\n    threemodes+=String.fromCharCode(10) + ' <font color=blue>2) accept one numerical as end seconds (accepting start one above)  ,  changed (or not) string<\/font> ';<br \/>\n    threemodes+=String.fromCharCode(10) + ' <font color=blue>3) accept two numerical as start seconds  , end one  ,  changed (or not) string<\/font> ';<br \/>\n    if (('' + thiscs) == 'null' || ('' + thiscs) == 'undefined') {   thiscs='' + document.getElementById('curct').innerHTML; }<br \/>\n    pdef=('' + ('' + thisih).replace(\/\\&nbsp\\;\/g, ' ')).replace(\/^undefined\/g, '').trim();<br \/>\n    fptimethingos=document.getElementById('fauxpas' + theone).value.split('  ,  ');<br \/>\n    var timethingos=document.getElementById('fauxpasstartsecs' + theone).value.split(',');<br \/>\n    while (eval('' + timethingos.length) &lt; eval('' + fptimethingos.length)) {<br \/>\n       if (eval('' + timethingos.length) == 1 && timethingos[0] == '') {<br \/>\n         timethingos[0]='0.000';<br \/>\n       }<br \/>\n       document.getElementById('fauxpasstartsecs' + theone).value+=',' + timethingos[eval(-1 + timethingos.length)];<br \/>\n       timethingos.push(timethingos[eval(-1 + timethingos.length)]);<br \/>\n    }<br \/>\n    var timethingoends=document.getElementById('fauxpasendsecs' + theone).value.split(',');<br \/>\n    while (eval('' + timethingoends.length) &lt; eval('' + timethingos.length)) {<br \/>\n       if (eval('' + timethingoends.length) == 1 && timethingoends[0] == '') {<br \/>\n         timethingoends[0]='0.000';<br \/>\n       }<br \/>\n       document.getElementById('fauxpasendsecs' + theone).value+=',' + timethingoends[eval(-1 + timethingoends.length)];<br \/>\n       timethingoends.push(timethingoends[eval(-1 + timethingoends.length)]);<br \/>\n    }<br \/>\n    if (timethingos[0].trim() == '') {   \/\/ none<br \/>\n    } else if (eval('' + timethingos.length) == 1 && eval('' + thiscs) &gt;= eval('' + timethingos[0])) {<br \/>\n      fitsinbetween='You have, potentially, the last caption here ';<br \/>\n      cafter='22111.0';<br \/>\n      if (('' + timethingoends[0]).trim() != '') {  cbefore='' + timethingoends[eval(-1 + timethingoends.length)];  }<br \/>\n    } else if (eval('' + timethingos.length) &gt;= 1 && eval('' + thiscs) &lt; eval('' + timethingos[0])) {<br \/>\n      fitsinbetween='You have, potentially, the first caption here so squeeze any 2) type entry in before ' + timethingos[0] + ' or apply 3) technique below ';<br \/>\n      if (('' + timethingoends[0]).trim() != '') {  cafter='' + timethingoends[0];  }<br \/>\n      if (('' + timethingos[0]).trim() != '') {  cbefore='' + timethingos[0];  }<br \/>\n    } else {<br \/>\n      \/\/while (iwhat &lt; eval('' + timethingos.length)) {<br \/>\n      while (iwhat &lt; eval('' + timethingos.length) && (eval('' + thiscs) &lt; eval('' + timethingos[eval(-1 + iwhat)]) || eval('' + thiscs) &gt; eval('' + timethingos[eval(0 + iwhat)]))) {<br \/>\n        \/\/alert('' + thiscs + ' is not in between ' + eval('' + timethingos[eval(-1 + iwhat)]) + ' and ' + eval('' + timethingos[eval(0 + iwhat)]))<br \/>\n        iwhat++;<br \/>\n      }<br \/>\n      \/\/}<br \/>\n      if (iwhat &lt; eval('' + timethingos.length)) {<br \/>\n      cafter='' + timethingos[iwhat];<br \/>\n      fitsinbetween='You have, potentially, new caption number ' + eval(1 + eval('' + iwhat)) + ' here so squeeze any entry in before ' + timethingos[iwhat] + ' or apply 3) technique below ';<br \/>\n      } else {<br \/>\n      fitsinbetween='You have, potentially, the last caption here ';<br \/>\n      cafter='22111.0';<br \/>\n      if (('' + timethingoends[0]).trim() != '') {  cbefore='' + timethingoends[eval(-1 + timethingoends.length)];  }<br \/>\n      }<br \/>\n    }<br \/>\n    document.getElementById('fauxpas' + theone).style.visibility='visible';<br \/>\n    document.getElementById('fauxpasreally' + theone).style.visibility='visible';<br \/>\n    pans=prompt('At ' + eval('' + thiscs).toFixed(3) + ' ... ' + fitsinbetween + String.fromCharCode(10) + threemodes + String.fromCharCode(10) + pdef, pdef);<br \/>\n    if (pans == null) {<br \/>\n      pans='';<br \/>\n      return pans;<br \/>\n    } else if (pans == pdef) {<br \/>\n      pans=pans;<br \/>\n      return pans;<br \/>\n    }<br \/>\n    var thingos=pans.split('  ,  ');<br \/>\n    if (eval('' + thingos.length) == 1) {<br \/>\n     fptimethingos=document.getElementById('fauxpas' + theone).value.split('  ,  ');<br \/>\n     \/\/alert(fptimethingos.length + ' vs ' + timethingos.length);<br \/>\n     while (eval('' + fptimethingos.length) &lt; eval('' + timethingos.length)) {<br \/>\n       document.getElementById('fauxpas' + theone).value+='  ,  ' + fptimethingos[eval(-1 + fptimethingos.length)];<br \/>\n       fptimethingos.push(fptimethingos[eval(-1 + fptimethingos.length)]);<br \/>\n     }<br \/>\n     fptimethingoends=document.getElementById('fauxpasreally' + theone).value.split('  ,  ');<br \/>\n     while (eval('' + fptimethingoends.length) &lt; eval('' + timethingos.length)) {<br \/>\n       document.getElementById('fauxpasreally' + theone).value+='  ,  ' + fptimethingoends[eval(-1 + fptimethingoends.length)];<br \/>\n       fptimethingoends.push(fptimethingoends[eval(-1 + fptimethingoends.length)]);<br \/>\n     }<br \/>\n     if (thingos[0].split('#')[0].trim() == '') {<br \/>\n       if (pdef.trim() != '') {<br \/>\n       document.getElementById('fauxpas' + theone).style.visibility='visible';<br \/>\n       document.getElementById('fauxpasreally' + theone).style.visibility='visible';<br \/>\n       document.getElementById('fauxpas' + theone).value=document.getElementById('fauxpas' + theone).value.replace(pdef, thingos[0].split('#')[0]);<br \/>\n       kfind=-1;<br \/>\n       for (ifg=0; ifg&lt;fptimethingos.length; ifg++) {<br \/>\n         if (fptimethingos[ifg].trim() == pdef) {<br \/>\n           kfind=ifg;<br \/>\n         }<br \/>\n       }<br \/>\n       if (thingos[0].indexOf('#') != -1 && kfind &gt;= 0 && eval('' + fptimethingoends.length) &gt; kfind) {<br \/>\n         document.getElementById('fauxpasreally' + theone).value=document.getElementById('fauxpasreally' + theone).value.replace(fptimethingoends[kfind], thingos[0].split('#')[1]);<br \/>\n       }<br \/>\n       }<br \/>\n     } else {<br \/>\n       document.getElementById('fauxpas' + theone).style.visibility='visible';<br \/>\n       document.getElementById('fauxpasreally' + theone).style.visibility='visible';<br \/>\n       kfind=-1;<br \/>\n       for (ifg=0; ifg&lt;fptimethingos.length; ifg++) {<br \/>\n         if (fptimethingos[ifg].trim() == pdef) {<br \/>\n           kfind=ifg;<br \/>\n         }<br \/>\n       }<br \/>\n       document.getElementById('fauxpas' + theone).value=document.getElementById('fauxpas' + theone).value.replace(pdef, thingos[0].split('#')[0]);<br \/>\n       if (thingos[0].indexOf('#') != -1 && kfind &gt;= 0 && eval('' + fptimethingoends.length) &gt; kfind) {<br \/>\n         document.getElementById('fauxpasreally' + theone).value=document.getElementById('fauxpasreally' + theone).value.replace(fptimethingoends[kfind], thingos[0].split('#')[1]);<br \/>\n       } else if (kfind &gt;= 0 && eval('' + fptimethingoends.length) &gt; kfind && 6 == 7) {<br \/>\n         document.getElementById('fauxpasreally' + theone).value=document.getElementById('fauxpasreally' + theone).value.replace(fptimethingoends[kfind], '');<br \/>\n       }<br \/>\n     }<br \/>\n    } else if (eval('' + thingos.length) == 2) {<br \/>\n     fptimethingos=document.getElementById('fauxpas' + theone).value.split('  ,  ');<br \/>\n     \/\/alert(fptimethingos.length + ' vs ' + timethingos.length);<br \/>\n     while (eval('' + fptimethingos.length) &lt; eval('' + timethingos.length)) {<br \/>\n       document.getElementById('fauxpas' + theone).value+='  ,  ' + fptimethingos[eval(-1 + fptimethingos.length)];<br \/>\n       fptimethingos.push(fptimethingos[eval(-1 + fptimethingos.length)]);<br \/>\n     }<br \/>\n     fptimethingoends=document.getElementById('fauxpasreally' + theone).value.split('  ,  ');<br \/>\n     while (eval('' + fptimethingoends.length) &lt; eval('' + timethingos.length)) {<br \/>\n       document.getElementById('fauxpasreally' + theone).value+='  ,  ' + fptimethingoends[eval(-1 + fptimethingoends.length)];<br \/>\n       fptimethingoends.push(fptimethingoends[eval(-1 + fptimethingoends.length)]);<br \/>\n     }<br \/>\n     if (thingos[0].trim() == '' && cafter != '') {<br \/>\n       thingos[0]=cafter;<br \/>\n     }<br \/>\n     if (thingos[0].trim() != '') {<br \/>\n       document.getElementById('fauxpas' + theone).style.visibility='visible';<br \/>\n       document.getElementById('fauxpasreally' + theone).style.visibility='visible';<br \/>\n<br \/>\n       if (eval('' + thiscs) &lt; eval('' + timethingos[0])) {<br \/>\n         document.getElementById('fauxpasstartsecs' + theone).value=thiscs + ',' + document.getElementById('fauxpasstartsecs' + theone).value;<br \/>\n         document.getElementById('fauxpasendsecs' + theone).value=thingos[0] + ',' + document.getElementById('fauxpasendsecs' + theone).value;<br \/>\n         document.getElementById('fauxpas' + theone).value=thingos[1].split('#')[0] + '  ,  ' + document.getElementById('fauxpas' + theone).value;<br \/>\n         if (thingos[1].indexOf('#') != -1) {<br \/>\n         document.getElementById('fauxpasreally' + theone).value=thingos[1].split('#')[1] + '  ,  ' + document.getElementById('fauxpasreally' + theone).value;<br \/>\n         } else {<br \/>\n         document.getElementById('fauxpasreally' + theone).value='  ,  ' + document.getElementById('fauxpasreally' + theone).value;<br \/>\n         }<br \/>\n       } else if (eval('' + thiscs) &gt; eval('' + timethingos[eval(-1 + timethingos.length)])) {<br \/>\n         document.getElementById('fauxpasstartsecs' + theone).value+=',' + thiscs;<br \/>\n         document.getElementById('fauxpasendsecs' + theone).value+=',' + thingos[0];<br \/>\n         document.getElementById('fauxpas' + theone).value+='  ,  ' + thingos[1].split('#')[0];<br \/>\n         if (thingos[1].indexOf('#') != -1) {<br \/>\n         document.getElementById('fauxpasreally' + theone).value+='  ,  ' + thingos[1].split('#')[1];<br \/>\n         } else {<br \/>\n         document.getElementById('fauxpasreally' + theone).value+='  ,  ';<br \/>\n         }<br \/>\n       } else {<br \/>\n       iwhat=1;<br \/>\n       sofarone='';<br \/>\n       sofartwo='';<br \/>\n       while (iwhat &lt; eval('' + timethingos.length) && (eval('' + thiscs) &lt; eval('' + timethingos[eval(-1 + iwhat)]) || eval('' + thiscs) &gt; eval('' + timethingos[eval(0 + iwhat)]))) {<br \/>\n        if (iwhat == 1) {<br \/>\n          sofarone=fptimethingos[eval(-1 + iwhat)];<br \/>\n          sofartwo=fptimethingoends[eval(-1 + iwhat)];<br \/>\n        } else {<br \/>\n          sofarone+='  ,  ' + fptimethingos[eval(-1 + iwhat)];<br \/>\n          sofartwo+='  ,  ' + fptimethingoends[eval(-1 + iwhat)];<br \/>\n        }<br \/>\n        iwhat++;<br \/>\n       }<br \/>\n       if (iwhat &lt; eval('' + timethingos.length)) {<br \/>\n        \/\/fitsinbetween='You have, potentially, new caption number ' + eval(1 + eval('' + iwhat)) + ' here so squeeze any entry in before ' + timethingos[iwhat] + ' or apply 3) technique below ';<br \/>\n<br \/>\n         document.getElementById('fauxpasstartsecs' + theone).value=document.getElementById('fauxpasstartsecs' + theone).value.replace(('' + timethingos[eval(0 + iwhat)]), thiscs + (',' + timethingos[eval(0 + iwhat)]));<br \/>\n         document.getElementById('fauxpasendsecs' + theone).value=document.getElementById('fauxpasstartsecs' + theone).value.replace(('' + timethingoends[eval(0 + iwhat)]), thingos[0] + (',' + timethingoends[eval(0 + iwhat)]));<br \/>\n         document.getElementById('fauxpas' + theone).value=document.getElementById('fauxpas' + theone).value.replace(sofarone, sofarone + '  ,  ' + thingos[1].split('#')[0]);<br \/>\n         if (thingos[1].indexOf('#') != -1) {<br \/>\n         document.getElementById('fauxpasreally' + theone).value=document.getElementById('fauxpasreally' + theone).value.replace(sofartwo, sofartwo + '  ,  ' + things[1].split('#')[1]);<br \/>\n         } else {<br \/>\n         document.getElementById('fauxpasreally' + theone).value=document.getElementById('fauxpasreally' + theone).value.replace(sofartwo, sofartwo + '  ,  ');<br \/>\n         }<br \/>\n<br \/>\n       } else {<br \/>\n        \/\/fitsinbetween='You have, potentially, the last caption here ';<br \/>\n         document.getElementById('fauxpasstartsecs' + theone).value+=',' + thiscs;<br \/>\n         document.getElementById('fauxpasendsecs' + theone).value+=',' + thingos[0];<br \/>\n         document.getElementById('fauxpas' + theone).value+='  ,  ' + thingos[1].split('#')[0];<br \/>\n         if (thingos[1].indexOf('#') != -1) {<br \/>\n         document.getElementById('fauxpasreally' + theone).value+='  ,  ' + thingos[1].split('#')[1];<br \/>\n         } else {<br \/>\n         document.getElementById('fauxpasreally' + theone).value+='  ,  ';<br \/>\n         }<br \/>\n       }<br \/>\n       }<br \/>\n<br \/>\n     } else if (thingos[1].split('#')[0] != pdef) {<br \/>\n       document.getElementById('fauxpas' + theone).style.visibility='visible';<br \/>\n       document.getElementById('fauxpasreally' + theone).style.visibility='visible';<br \/>\n       document.getElementById('fauxpas' + theone).value=document.getElementById('fauxpas' + theone).value.replace(pdef, thingos[1].split('#')[0]);<br \/>\n       kfind=-1;<br \/>\n       for (ifg=0; ifg&lt;fptimethingos.length; ifg++) {<br \/>\n         if (fptimethingos[ifg].trim() == pdef) {<br \/>\n           kfind=ifg;<br \/>\n         }<br \/>\n       }<br \/>\n       if (thingos[1].indexOf('#') != -1 && kfind &gt;= 0 && eval('' + fptimethingoends.length) &gt; kfind) {<br \/>\n         document.getElementById('fauxpasreally' + theone).value=document.getElementById('fauxpasreally' + theone).value.replace(fptimethingoends[kfind], thingos[1].split('#')[1]);<br \/>\n       }<br \/>\n     }<br \/>\n    } else if (eval('' + thingos.length) &gt; 2) {<br \/>\n     fptimethingos=document.getElementById('fauxpas' + theone).value.split('  ,  ');<br \/>\n     \/\/alert(fptimethingos.length + ' vs ' + timethingos.length);<br \/>\n     while (eval('' + fptimethingos.length) &lt; eval('' + timethingos.length)) {<br \/>\n       document.getElementById('fauxpas' + theone).value+='  ,  ' + fptimethingos[eval(-1 + fptimethingos.length)];<br \/>\n       fptimethingos.push(fptimethingos[eval(-1 + fptimethingos.length)]);<br \/>\n     }<br \/>\n     fptimethingoends=document.getElementById('fauxpasreally' + theone).value.split('  ,  ');<br \/>\n     while (eval('' + fptimethingoends.length) &lt; eval('' + timethingos.length)) {<br \/>\n       document.getElementById('fauxpasreally' + theone).value+='  ,  ' + fptimethingoends[eval(-1 + fptimethingoends.length)];<br \/>\n       fptimethingoends.push(fptimethingoends[eval(-1 + fptimethingoends.length)]);<br \/>\n     }<br \/>\n     if (thingos[1].trim() == '' && cafter != '') {<br \/>\n       thingos[1]=cafter;<br \/>\n     }<br \/>\n     if (thingos[0].trim() == '' && cbefore != '') {<br \/>\n       thingos[0]=cbefore;<br \/>\n     }<br \/>\n     if (thingos[0].trim() != '' && thingos[1].trim() != '') {<br \/>\n       if (eval('' + thingos[0]) &lt; eval('' + timethingos[0])) {<br \/>\n         document.getElementById('fauxpasstartsecs' + theone).value=thingos[0] + ',' + document.getElementById('fauxpasstartsecs' + theone).value;<br \/>\n         document.getElementById('fauxpasendsecs' + theone).value=thingos[1] + ',' + document.getElementById('fauxpasendsecs' + theone).value;<br \/>\n         document.getElementById('fauxpas' + theone).value=thingos[2].split('#')[0] + '  ,  ' + document.getElementById('fauxpas' + theone).value;<br \/>\n         if (thingos[2].indexOf('#') != -1) {<br \/>\n         document.getElementById('fauxpasreally' + theone).value=thingos[2].split('#')[1] + '  ,  ' + document.getElementById('fauxpasreally' + theone).value;<br \/>\n         } else {<br \/>\n         document.getElementById('fauxpasreally' + theone).value='  ,  ' + document.getElementById('fauxpasreally' + theone).value;<br \/>\n         }<br \/>\n       } else if (eval('' + thingos[0]) &gt; eval('' + timethingos[eval(-1 + timethingos.length)])) {<br \/>\n         document.getElementById('fauxpasstartsecs' + theone).value+=',' + thingos[0];<br \/>\n         document.getElementById('fauxpasendsecs' + theone).value+=',' + thingos[1];<br \/>\n         document.getElementById('fauxpas' + theone).value+='  ,  ' + thingos[2].split('#')[0];<br \/>\n         if (thingos[2].indexOf('#') != -1) {<br \/>\n         document.getElementById('fauxpasreally' + theone).value+='  ,  ' + thingos[2].split('#')[1];<br \/>\n         } else {<br \/>\n         document.getElementById('fauxpasreally' + theone).value+='  ,  ';<br \/>\n         }<br \/>\n       } else {<br \/>\n       iwhat=1;<br \/>\n       sofarone='';<br \/>\n       sofartwo='';<br \/>\n       while (iwhat &lt; eval('' + timethingos.length) && (eval('' + thingos[0]) &lt; eval('' + timethingos[eval(-1 + iwhat)]) || eval('' + thingos[0]) &gt; eval('' + timethingos[eval(0 + iwhat)]))) {<br \/>\n        if (iwhat == 1) {<br \/>\n          sofarone=fptimethingos[eval(-1 + iwhat)];<br \/>\n          sofartwo=fptimethingoends[eval(-1 + iwhat)];<br \/>\n        } else {<br \/>\n          sofarone+='  ,  ' + fptimethingos[eval(-1 + iwhat)];<br \/>\n          sofartwo+='  ,  ' + fptimethingoends[eval(-1 + iwhat)];<br \/>\n        }<br \/>\n        iwhat++;<br \/>\n       }<br \/>\n       if (iwhat &lt; eval('' + timethingos.length)) {<br \/>\n        \/\/fitsinbetween='You have, potentially, new caption number ' + eval(1 + eval('' + iwhat)) + ' here so squeeze any entry in before ' + timethingos[iwhat] + ' or apply 3) technique below ';<br \/>\n<br \/>\n         document.getElementById('fauxpasstartsecs' + theone).value=document.getElementById('fauxpasstartsecs' + theone).value.replace(('' + timethingos[eval(0 + iwhat)]), thingos[0] + (',' + timethingos[eval(0 + iwhat)]));<br \/>\n         document.getElementById('fauxpasendsecs' + theone).value=document.getElementById('fauxpasstartsecs' + theone).value.replace(('' + timethingoends[eval(0 + iwhat)]), thingos[1] + (',' + timethingoends[eval(0 + iwhat)]));<br \/>\n         document.getElementById('fauxpas' + theone).value=document.getElementById('fauxpas' + theone).value.replace(sofarone, sofarone + '  ,  ' + thingos[2].split('#')[0]);<br \/>\n         if (thingos[2].indexOf('#') != -1) {<br \/>\n         document.getElementById('fauxpasreally' + theone).value=document.getElementById('fauxpasreally' + theone).value.replace(sofartwo, sofartwo + '  ,  ' + thingos[2].split('#')[1]);<br \/>\n         } else {<br \/>\n         document.getElementById('fauxpasreally' + theone).value=document.getElementById('fauxpasreally' + theone).value.replace(sofartwo, sofartwo + '  ,  ');<br \/>\n         }<br \/>\n<br \/>\n       } else {<br \/>\n        \/\/fitsinbetween='You have, potentially, the last caption here ';<br \/>\n         document.getElementById('fauxpasstartsecs' + theone).value+=',' + thingos[0];<br \/>\n         document.getElementById('fauxpasendsecs' + theone).value+=',' + thingos[1];<br \/>\n         document.getElementById('fauxpas' + theone).value+='  ,  ' + thingos[2].split('#')[0];<br \/>\n         if (thingos[2].indexOf('#') != -1) {<br \/>\n         document.getElementById('fauxpasreally' + theone).value+='  ,  ' + thingos[2].split('#')[1];<br \/>\n         } else {<br \/>\n         document.getElementById('fauxpasreally' + theone).value+='  ,  ';<br \/>\n         }<br \/>\n       }<br \/>\n       }<br \/>\n       document.getElementById('fauxpas' + theone).style.visibility='visible';<br \/>\n       document.getElementById('fauxpasreally' + theone).style.visibility='visible';<br \/>\n     } else if (thingos[2].split('#')[0] != pdef) {<br \/>\n       document.getElementById('fauxpas' + theone).style.visibility='visible';<br \/>\n       document.getElementById('fauxpasreally' + theone).style.visibility='visible';<br \/>\n     }<br \/>\n    }<br \/>\n    return pans;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function curctyetmore() {<br \/>\n    if (ctis != '') {<br \/>\n    setTimeout(curctyetmore, 300);<br \/>\n    endTime = new Date();<br \/>\n    var timeDiff = endTime - startTime; \/\/in ms<br \/>\n    startTime=endTime;<br \/>\n    \/\/ strip the ms<br \/>\n    timeDiff \/= 1000;<br \/>\n    ctsecs+=timeDiff;<br \/>\n    document.getElementById('curct').innerHTML='' + ctsecs;<br \/>\n    if (document.getElementById('curct').title == '') {<br \/>\n      ctis='';<br \/>\n    }<br \/>\n    } else {<br \/>\n    setTimeout(curctmore, 300);<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  function curctmore() {<br \/>\n    ctis=document.getElementById('curct').title;<br \/>\n    if (ctis != '') { ctsecs=eval('' + document.getElementById('curct').innerHTML);   startTime = new Date(); setTimeout(curctyetmore, 300); } else { setTimeout(curctmore, 300);  }<br \/>\n  }<br \/>\n  <br \/>\n  setTimeout(curctmore, 500);<br \/>\n<\/code><\/p>\n<p>See the <font color=blue>three &#8220;setting entry&#8221; approaches<\/font> we cater for?<\/p>\n<p>We know, there&#8217;s a lot more to collaboration, than that, but it might be a piece in the puzzle.  What we favour, moving on with this, is &#8230;<\/p>\n<blockquote><p>\nIP address based colour coding\n<\/p><\/blockquote>\n<p> &#8230; which we did a bit of in another project, and using email address syntax like &#8230;<\/p>\n<blockquote><p>\nR.Metcalfe[rmetcalfe15@gmail.com]\n<\/p><\/blockquote>\n<p> &#8230; which we did a bit of in another project.  We&#8217;ll see.<\/p>\n<p>The help came via &#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\/stop_start_youtube.html-----------------------------------------------GETME\" rel=\"noopener\">further embellished<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-----------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">inhouse YouTube API interfacer<\/a><\/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\" rel=\"noopener\">the <i>parent<\/i> level changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?rand=4325644\" rel=\"noopener\">inhouse YouTube Informational Organizer and improved Audio Recording Organizer<\/a> &#8230;\n<\/ul>\n<p> &#8230; for &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html---GETME\" rel=\"noopener\">the changed<\/a> to <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html---GETME\" rel=\"noopener\">video_commentary.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html\" rel=\"noopener\">web application<\/a> (<a href='#xifslfp'>you can try below<\/a>) Video Commentary YouTube Style SubRip Subtitles web application could be useful for research purposes and\/or presentations using YouTube as that ever useful starting point<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/song_lyric_faux_pas.html----GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/song_lyric_faux_pas.html----GETME\" rel=\"noopener\">song_lyric_faux_pas.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/song_lyric_faux_pas.html\" rel=\"noopener\">web application<\/a> <a href='#ifslfp'>below<\/a><\/li>\n<\/ul>\n<p> &#8230; remaining in a new<sup>ish<\/sup> and very simple peer to peer dropdown arrangement.<\/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\/video-commentary-youtube-style-subrip-subtitles-collaboration-preparation-tutorial\/' rel=\"noopener\">Video Commentary YouTube Style SubRip Subtitles Collaboration Preparation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='vcytssrst'>Previous relevant <a target=\"_blank\" title='Video Commentary YouTube Style SubRip Subtitles Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/video-commentary-youtube-style-subrip-subtitles-tutorial\/' rel=\"noopener\">Video Commentary YouTube Style SubRip Subtitles 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\/video_commentary.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Video Commentary YouTube Style SubRip Subtitles Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary_clone.png\" title=\"Video Commentary YouTube Style SubRip Subtitles Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Video Commentary YouTube Style SubRip Subtitles Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Song Lyric Karaoke Style SubRip Subtitles Automated Tutorial' href='#slkssrsat'>Song Lyric Karaoke Style SubRip Subtitles Automated Tutorial<\/a> work &#8220;comes along for the ride&#8221; in the cloning of the Song Lyric Karaoke Style SubRip Subtitles web application to a new Video Commentary YouTube Style SubRip Subtitles web application, where we started getting interested in supporting programmatically created &#8220;summary&#8221; element wording mapped to &#8230;<\/p>\n<ul>\n<li><a title='YouTube' href='https:\/\/youtube.com'>YouTube<\/a> 11 character &#8230; link to a YouTube video &#8230;<\/li>\n<li>YouTube 34 character &#8230; link to a YouTube playlist &#8230;<\/li>\n<li><a target=\"_blank\" title='Spotify' href='https:\/\/www.spotify.com\/' rel=\"noopener\">Spotify<\/a> 22 character &#8230; link to a Spotify playlist &#8230;<\/li>\n<li>Strings with . and @ &#8230; link to a mailto: &#8220;a&#8221; link means of communication &#8230;<\/li>\n<li>Strings mainly numerical &#8230; link to an SMS: &#8220;a&#8221; link means of communication<\/li>\n<li>Strings starting with &#8220;http&#8221; or &#8220;\/\/&#8221; &#8230; link to a URL, suiting ones like <a target=\"_blank\" title='Wikipedia ... thanks' href='http:\/\/wikipedia.org' rel=\"noopener\">Wikipedia<\/a> uses (at this stage)<\/li>\n<\/ul>\n<p> &#8230; because we envisage the <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html-GETME\" rel=\"noopener\">how we got there cloning<\/a> to <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html-GETME\" rel=\"noopener\">video_commentary.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html\" rel=\"noopener\">web application<\/a> (<a href='#xifslfp'>you can try below<\/a>) Video Commentary YouTube Style SubRip Subtitles web application could be useful for research purposes and\/or presentations using YouTube as that ever useful starting point.<\/p>\n<p><iframe id=xifslfp src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_commentary.html' style='width:100%;height:900px;'><\/iframe><\/p>\n<p>It got help via &#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\/stop_start_youtube.html---------------------------------------------GETME\" rel=\"noopener\">further embellished<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html---------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">inhouse YouTube API interfacer<\/a><\/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\" rel=\"noopener\">the <i>parent<\/i> level changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html--------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?rand=4325644\" rel=\"noopener\">inhouse YouTube Informational Organizer and improved Audio Recording Organizer<\/a> featuring &#8230;<br \/>\n<code><br \/>\n  function otherlegit(ineleven, iflegit, thiseleven) {<br \/>\n   if (eval('' + ineleven.length) != thiseleven) {<br \/>\n    return 'JUNK' + iflegit;<br \/>\n   \/\/} else if (ineleven.slice(-1).replace('A','').replace('E','').replace('I','').replace('M','').replace('Q','').replace('U','').replace('Y','').replace('c','').replace('g','').replace('k','').replace('o','').replace('s','').replace('w','').replace('0','').replace('4','').replace('8','') != '') {<br \/>\n   \/\/ return 'JUNK' + iflegit;<br \/>\n   }<br \/>\n   for (var ijk=0; ijk&lt;ineleven.length; ijk++) {<br \/>\n    if (ineleven.substring(ijk).substring(0,1) &gt;= 'a' && ineleven.substring(ijk).substring(0,1) &lt;= 'z') {<br \/>\n     ijk=ijk;<br \/>\n    } else if (ineleven.substring(ijk).substring(0,1) &gt;= 'A' && ineleven.substring(ijk).substring(0,1) &lt;= 'Z') {<br \/>\n     ijk=ijk;<br \/>\n    } else if (ineleven.substring(ijk).substring(0,1) &gt;= '0' && ineleven.substring(ijk).substring(0,1) &lt;= '9') {<br \/>\n     ijk=ijk;<br \/>\n    } else if (ineleven.substring(ijk).substring(0,1) == '\/' || ineleven.substring(ijk).substring(0,1) == '+') {<br \/>\n     ijk=ijk;<br \/>\n    } else if (ineleven.substring(ijk).substring(0,1) == '-' || ineleven.substring(ijk).substring(0,1) == '_') {<br \/>\n     ijk=ijk;<br \/>\n    } else {<br \/>\n     return 'JUNK' + iflegit;<br \/>\n    }<br \/>\n   }<br \/>\n   return iflegit;<br \/>\n }<br \/>\n<br \/>\n  function maybelegit(ineleven, iflegit) {<br \/>\n   if (eval('' + ineleven.length) != 11) {<br \/>\n    return iflegit.replace('tube','tuJUNKbe');<br \/>\n   } else if (ineleven.slice(-1).replace('A','').replace('E','').replace('I','').replace('M','').replace('Q','').replace('U','').replace('Y','').replace('c','').replace('g','').replace('k','').replace('o','').replace('s','').replace('w','').replace('0','').replace('4','').replace('8','') != '') {<br \/>\n    return iflegit.replace('tube','tuJUNKbe');<br \/>\n   }<br \/>\n   for (var ijk=0; ijk&lt;ineleven.length; ijk++) {<br \/>\n    if (ineleven.substring(ijk).substring(0,1) &gt;= 'a' && ineleven.substring(ijk).substring(0,1) &lt;= 'z') {<br \/>\n     ijk=ijk;<br \/>\n    } else if (ineleven.substring(ijk).substring(0,1) &gt;= 'A' && ineleven.substring(ijk).substring(0,1) &lt;= 'Z') {<br \/>\n     ijk=ijk;<br \/>\n    } else if (ineleven.substring(ijk).substring(0,1) &gt;= '0' && ineleven.substring(ijk).substring(0,1) &lt;= '9') {<br \/>\n     ijk=ijk;<br \/>\n    } else if (ineleven.substring(ijk).substring(0,1) == '\/' || ineleven.substring(ijk).substring(0,1) == '+') {<br \/>\n     ijk=ijk;<br \/>\n    } else if (ineleven.substring(ijk).substring(0,1) == '-' || ineleven.substring(ijk).substring(0,1) == '_') {<br \/>\n     ijk=ijk;<br \/>\n    } else {<br \/>\n     return iflegit.replace('tube','tuJUNKbe');<br \/>\n    }<br \/>\n   }<br \/>\n   return iflegit;<br \/>\n }<br \/>\n <br \/>\n function subalt(inalt, dtlid) {<br \/>\n   var outalt=inalt;<br \/>\n   var wdsare=inalt.split(' ');<br \/>\n   var opst='', putb='';<br \/>\n   if (document.getElementById(dtlid)) {<br \/>\n     opst='' + document.getElementById(dtlid).open;<br \/>\n   }<br \/>\n   if (opst != '') {<br \/>\n     putb=\" setTimeout(function(){ document.getElementById('\" + dtlid + \"').open=\" + opst + \"; }, 300);  \";<br \/>\n   }<br \/>\n   <br \/>\n   for (var iws=0; iws&lt;wdsare.length; iws++) {<br \/>\n      var elevenlegit='';<br \/>\n      if (wdsare[iws].trim() != '') {<br \/>\n      if (eval('' + wdsare[iws].length) == 11) {<br \/>\n        elevenlegit=maybelegit(wdsare[iws], 'youtube');<br \/>\n      } else if (eval('' + wdsare[iws].length) == 34) {<br \/>\n        elevenlegit=otherlegit(wdsare[iws], 'youtube', 34);<br \/>\n      } else if (eval('' + wdsare[iws].length) == 22) {<br \/>\n        elevenlegit=otherlegit(wdsare[iws], 'spotify', 22);<br \/>\n      }<br \/>\n      if ((wdsare[iws].toLowerCase().indexOf('http') == 0 && wdsare[iws].toLowerCase().indexOf('\/\/') != -1) || wdsare[iws].toLowerCase().indexOf('\/\/') == 0) {<br \/>\n        outalt=outalt.replace(wdsare[iws], \"&lt;a title=\\\"Link\\\" onclick=\\\"event.stopPropagation(); window.open('\/\/\" + wdsare[iws].split('\/\/')[1] + \"','_blank','top=100,left=120,width=600,height=600'); \" + putb + \"\\\" style=text-decoration:underline;cursor:pointer;\\\"&gt;\" + wdsare[iws] + \"&lt;\/a&gt;\");<br \/>\n      } else if (elevenlegit == 'youtube') {<br \/>\n        if (eval('' + wdsare[iws].length) == 11) {<br \/>\n        outalt=outalt.replace(wdsare[iws], \"&lt;a title=\\\"YouTube video\\\" onclick=\\\"event.stopPropagation(); window.open('\/\/www.youtube.com\/watch?v=\" + wdsare[iws] + \"','_blank','top=120,left=100,width=600,height=600'); \" + putb + \"\\\" style=text-decoration:underline;cursor:pointer;\\\"&gt;\" + wdsare[iws] + \"&lt;\/a&gt;\");<br \/>\n        } else {<br \/>\n        outalt=outalt.replace(wdsare[iws], \"&lt;a title=\\\"YouTube playlist\\\" onclick=\\\"event.stopPropagation(); window.open('\/\/www.youtube.com\/playlist?list=\" + wdsare[iws] + \"','_blank','top=120,left=100,width=600,height=600'); \" + putb + \"\\\" style=text-decoration:underline;cursor:pointer;\\\"&gt;\" + wdsare[iws] + \"&lt;\/a&gt;\");<br \/>\n        }<br \/>\n      } else if (elevenlegit == 'spotify' && eval('' + wdsare[iws].length) == 22) {<br \/>\n        outalt=outalt.replace(wdsare[iws], \"&lt;a title=\\\"Spotify album\\\" onclick=\\\"event.stopPropagation(); window.open('\/\/open.spotify.com\/playlist\/\" + wdsare[iws] + \"','_blank','top=120,left=100,width=600,height=600'); \" + putb + \"\\\" style=text-decoration:underline;cursor:pointer;\\\"&gt;\" + wdsare[iws] + \"&lt;\/a&gt;\");<br \/>\n      } else if (wdsare[iws].indexOf('@') &gt; 0 && (wdsare[iws] + '~').indexOf('@~') == -1 && wdsare[iws].indexOf('.') != -1) {<br \/>\n        outalt=outalt.replace(wdsare[iws], \"&lt;a title=\\\"Email\\\" target=\\\"_top\\\" onclick=\\\"event.stopPropagation();\\\" href=\\\"mailto:\" + wdsare[iws] + \"?subject=\" + encodeURIComponent(inalt) + \"\\\" style=text-decoration:underline;cursor:pointer;\\\"&gt;\" + wdsare[iws] + \"&lt;\/a&gt;\");<br \/>\n      } else if (wdsare[iws].replace(\/^\\+(9[976]\\d|8[987530]\\d|6[987]\\d|5[90]\\d|42\\d|3[875]\\d|2[98654321]\\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\\W*\\d\\W*\\d\\W*\\d\\W*\\d\\W*\\d\\W*\\d\\W*\\d\\W*\\d\\W*(\\d{1,2})$\/g,'') != wdsare[iws]) {<br \/>\n        outalt=outalt.replace(wdsare[iws], \"&lt;a title=\\\"SMS\\\" target=\\\"_top\\\" onclick=\\\"event.stopPropagation();\\\" href=\\\"sms:\" + wdsare[iws] + \"&body=\" + encodeURIComponent(inalt) + \"\\\" style=text-decoration:underline;cursor:pointer;\\\"&gt;\" + wdsare[iws] + \"&lt;\/a&gt;\");<br \/>\n      } else if (eval('' + wdsare[iws].length) &gt; 4 && wdsare[iws].replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') == '') {<br \/>\n        outalt=outalt.replace(wdsare[iws], \"&lt;a title=\\\"SMS\\\" target=\\\"_top\\\" onclick=\\\"event.stopPropagation();\\\" href=\\\"sms:\" + wdsare[iws] + \"&body=\" + encodeURIComponent(inalt) + \"\\\" style=text-decoration:underline;cursor:pointer;\\\"&gt;\" + wdsare[iws] + \"&lt;\/a&gt;\");<br \/>\n      }<br \/>\n      }<br \/>\n   }<br \/>\n   <br \/>\n   return outalt;<br \/>\n }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>We hope you get to try it out!<\/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\/video-commentary-youtube-style-subrip-subtitles-tutorial\/' rel=\"noopener\">Video Commentary YouTube Style SubRip Subtitles Tutorial<\/a>.<\/p-->\n<hr>\n<p id='slkssrsat'>Previous relevant <a target=\"_blank\" title='Song Lyric Karaoke Style SubRip Subtitles Automated Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/song-lyric-karaoke-style-subrip-subtitles-automated-tutorial\/' rel=\"noopener\">Song Lyric Karaoke Style SubRip Subtitles Automated 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\/song_lyric_faux_pas.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Song Lyric Karaoke Style SubRip Subtitles Automated Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/song_lyric_faux_pas_automated_more.png\" title=\"Song Lyric Karaoke Style SubRip Subtitles Automated Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Song Lyric Karaoke Style SubRip Subtitles Automated Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Song Lyric Karaoke Style SubRip Subtitles Sharing Tutorial' href='#slkssrsst'>Song Lyric Karaoke Style SubRip Subtitles Sharing Tutorial<\/a>&#8216;s &#8220;automate&#8221; mention &#8230;<\/p>\n<blockquote><p>\n<\/p>\n<ul>\n<li><a target=\"_blank\" title=\"YouTube\" href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> 11 character video ID &#8230; and so far, in a rudimentary sense that we may automate better into the future &#8230;<\/li>\n<li>once there you can click a relevant &#8220;Create&#8221; link appearing to glean those start and end times (in seconds) our form asks for<\/li>\n<\/ul>\n<p>\n<\/p><\/blockquote>\n<p> &#8230; today we went about it, and in so doing realized hierarchical window object reference syntax ideas like &#8230;<\/p>\n<p><code><br \/>\ntop.window.opener.window.opener<br \/>\n<\/code><\/p>\n<p> &#8230; or &#8230;<\/p>\n<p><code><br \/>\nparent.window.opener.window.opener<br \/>\n<\/code><\/p>\n<p> &#8230; can happen <font size=1>(and be crucial to the state of play)<\/font>, and do happen within the logic of our hard working <sup>great<\/sup><sub>great<\/sub><sup>grand<\/sup>child <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html--------------------------------------------GETME\" rel=\"noopener\">further embellished<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html--------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">inhouse YouTube API interfacer<\/a> to make this automation happen.<\/p>\n<p>We were a bit surprised these types of hierarchical arrangements help in the scenario where within the first window.open window we must navigate via location.href to a new URL within the same window &#8230; amazing really!<\/p>\n<p>Another new concept that came with all this was to allow for more than one Faux Pas (content set) per YouTube video.  We chose an &#8220;inhouse logic&#8221; delimiter system based on &#8230;<\/p>\n<blockquote><p>\n<span style=background-color:yellow;>&nbsp;&nbsp;,&nbsp;&nbsp;<\/span>\n<\/p><\/blockquote>\n<p> &#8230; ie. two spaces comma two spaces.  This awkward delimitation (non-mobile users are &#8220;hover informed&#8221; about while mobile users can find out via a textbox double click) is to differentiate delimitation from your normal comma usage within text that might be a Song Lyric snippet.<\/p>\n<p>All this can be tried with the <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/song_lyric_faux_pas.html--GETME\" rel=\"noopener\">&#8220;third draft&#8221;<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/song_lyric_faux_pas.html--GETME\" rel=\"noopener\">song_lyric_faux_pas.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/song_lyric_faux_pas.html\" rel=\"noopener\">web application<\/a> <a href='#ifslfp'>below<\/a>.<\/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\/song-lyric-karaoke-style-subrip-subtitles-automation-tutorial\/' rel=\"noopener\">Song Lyric Karaoke Style SubRip Subtitles Automation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='slkssrsst'>Previous relevant <a target=\"_blank\" title='Song Lyric Karaoke Style SubRip Subtitles Sharing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/song-lyric-karaoke-style-subrip-subtitles-sharing-tutorial\/' rel=\"noopener\">Song Lyric Karaoke Style SubRip Subtitles Sharing 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\/song_lyric_faux_pas.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Song Lyric Karaoke Style SubRip Subtitles Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/song_lyric_faux_pas_more.png\" title=\"Song Lyric Karaoke Style SubRip Subtitles Sharing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Song Lyric Karaoke Style SubRip Subtitles Sharing Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Song Lyric Karaoke Style SubRip Subtitles Tutorial' href='#slkssrst'>Song Lyric Karaoke Style SubRip Subtitles Tutorial<\/a> may have been a salutary awakening for some humans <font size=1>(and perhaps even some Martians)<\/font> out there.  Is there a confession around the corner?!<\/p>\n<blockquote><p>\nWell, have we got news for you?!\n<\/p><\/blockquote>\n<p>We have added email and SMS sharing capabilities into the mix of our Song Lyric Faux Pas web application, along with allowing more than one song to be of interest in any one session using the <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/song_lyric_faux_pas.html-GETME\" rel=\"noopener\">&#8220;second draft&#8221;<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/song_lyric_faux_pas.html-GETME\" rel=\"noopener\">song_lyric_faux_pas.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/song_lyric_faux_pas.html\" rel=\"noopener\">web application<\/a> <a href='#ifslfp'>below<\/a>.<\/p>\n<p>Also, we&#8217;re hoping helps is that if you tab out of the Song Name textbox having filled that in with your song name of interest, a new popup window appears over to the right, and you can scour it&#8217;s resultant dropdown for the required &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title=\"YouTube\" href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> 11 character video ID &#8230; and so far, in a rudimentary sense that we may automate better into the future &#8230;<\/li>\n<li>once there you can click a relevant &#8220;Create&#8221; link appearing to glean those start and end times (in seconds) our form asks for<\/li>\n<\/ul>\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\/song-lyric-karaoke-style-subrip-subtitles-sharing-tutorial\/' rel=\"noopener\">Song Lyric Karaoke Style SubRip Subtitles Sharing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='slkssrst'>Previous relevant <a target=\"_blank\" title='Song Lyric Karaoke Style SubRip Subtitles Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/song-lyric-karaoke-style-subrip-subtitles-tutorial\/' rel=\"noopener\">Song Lyric Karaoke Style SubRip Subtitles 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\/song_lyric_faux_pas.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Song Lyric Karaoke Style SubRip Subtitles Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/song_lyric_faux_pas.png\" title=\"Song Lyric Karaoke Style SubRip Subtitles Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Song Lyric Karaoke Style SubRip Subtitles Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='YouTube API SubRip Subtitles Browsing Tutorial' href='#ytapisrsbt'>YouTube API SubRip Subtitles Browsing Tutorial<\/a>, do you remember at <a title='YouTube API SubRip Subtitles Primer Tutorial' href='#ytapisrspt'>YouTube API SubRip Subtitles Primer Tutorial<\/a> how all this latest blog posting thread was <a href='#pdtt'>because of an idea we had<\/a>?  Well, today, the work we&#8217;ve been doing on <a target=\"_blank\" title='SubRip information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/SubRip' rel=\"noopener\">SubRip<\/a> subtitle integrations into our <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">YouTube API<\/a> interfacing video play has reached the point where it can help with that idea, it being the creation of a &#8230;<\/p>\n<blockquote><p>\nSong Lyric Faux Pas\n<\/p><\/blockquote>\n<p> &#8230; web application.  Am sure a lot of people out there are like me, and find both amusing and excruciating, when discovering the error of our ways, in finding out that all those years ago, all those sessions in the shower later, you discover the <strong>actual<\/strong> words to a song lyric, and not the ones you&#8217;d been singing all that time?!<\/p>\n<p>In creating that <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/song_lyric_faux_pas.html_GETME\" rel=\"noopener\">&#8220;first draft&#8221;<\/a>, though, as you might imagine, there were nuances to the underlying <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-------------------------------------------GETME\" rel=\"noopener\">further changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">inhouse YouTube API interfacer<\/a> at the the <i>grandchild<\/i> level called by <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\" rel=\"noopener\">the <i>parent<\/i> level changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?rand=4325644\" rel=\"noopener\">inhouse YouTube Informational Organizer and improved Audio Recording Organizer<\/a> web application you <a href='#aifk'>can try below<\/a>.<\/p>\n<p>This new <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/song_lyric_faux_pas.html\" rel=\"noopener\">Song Lyric Faux Pas<\/a> web application sits at a <i>grandparent<\/i> level in the scheme of things here, and just below, that makes this blog posting webpage be at a <i>great-grandparent<\/i> level &#8230;<\/p>\n<p><iframe id=ifslfp src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/song_lyric_faux_pas.html' style='width:100%;height:900px;'><\/iframe><\/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\/song-lyric-karaoke-style-subrip-subtitles-tutorial\/' rel=\"noopener\">Song Lyric Karaoke Style SubRip Subtitles Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapisrsbt'>Previous relevant <a target=\"_blank\" title='YouTube API SubRip Subtitles Browsing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-subrip-subtitles-browsing-tutorial\/' rel=\"noopener\">YouTube API SubRip Subtitles Browsing 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?rand=7533765\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API SubRip Subtitles Browsing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_subrip_browsing.gif\" title=\"YouTube API SubRip Subtitles Browsing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube API SubRip Subtitles Browsing Tutorial<\/p><\/div>\n<p>Quite often, wherever in a web application we specify that content (which is SubRip subtitle file data in today&#8217;s case) is derived via &#8230;<\/p>\n<ul>\n<li>a user defined <a href='#myul'><strong>URL<\/strong><\/a> &#8230; then other input approaches that could spring to mind as alternatives are &#8230;<\/li>\n<li>as possible, the creation of what that data is via user actions (what we started doing yesterday) &#8230; and today &#8230;<\/li>\n<li>allow for local file browsing of that data &#8230; where <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--------------------------------------------------------GETME\" rel=\"noopener\">we&#8217;ve tweaked<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--------------------------------------------------------GETME\" rel=\"noopener\">our inhouse<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\" rel=\"noopener\">local file browsing<\/a> helper<\/li>\n<\/ul>\n<p>Also, today, it occurred to us that it should be a day where the user gets more control of things, and in that regard we&#8217;ve started &#8220;wrapping&#8221; the user defined captions and subtitles (that are separate to any <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">YouTube API<\/a> video calling ones) in a &#8220;reveal<sup>ing<\/sup>&#8221; <a target=\"_blank\" title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp' rel=\"noopener\">details<\/a>\/<a target=\"_blank\" title='HTML summary tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp' rel=\"noopener\">summary<\/a> nesting.<\/p>\n<p>Yesterday&#8217;s <a title='YouTube API SubRip Subtitles Creation Tutorial' href='#ytapisrsct'>YouTube API SubRip Subtitles Creation Tutorial<\/a> introduced that new textarea element to collect and create SubRip subtitle (and caption) data, but a more user interesting feature regarding this occurred to us, today.  Why not add to it an <i>onblur<\/i><sup><font size=1>=&#8221;hgrip=massage(this.value,hgrip);&#8221;<\/font><\/sup> function as per &#8230;<\/p>\n<p><code><br \/>\n      function massage(altval, actval) {<br \/>\n        if (1 == 1) {<br \/>\n          return altval.replace(\/\\{Awaiting\\ pause\\}\/g, 'youllneverfindthis');<br \/>\n        }<br \/>\n        return actval;<br \/>\n      }<br \/>\n<\/code><\/p>\n<p>Again, you can see this in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html------------------------------------------GETME\" rel=\"noopener\">a further changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">inhouse YouTube API interfacer<\/a> at the the <i>grandchild<\/i> level called by <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\" rel=\"noopener\">the <i>parent<\/i> level changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?rand=4325644\" rel=\"noopener\">inhouse YouTube Informational Organizer and improved Audio Recording Organizer<\/a> web application you <a href='#aifk'>can try below<\/a>.<\/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-api-subrip-subtitles-browsing-tutorial\/' rel=\"noopener\">YouTube API SubRip Subtitles Browsing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapisrsct'>Previous relevant <a target=\"_blank\" title='YouTube API SubRip Subtitles Creation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-subrip-subtitles-creation-tutorial\/' rel=\"noopener\">YouTube API SubRip Subtitles Creation 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?rand=7534765\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API SubRip Subtitles Creation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_subrip_creation.gif\" title=\"YouTube API SubRip Subtitles Creation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube API SubRip Subtitles Creation Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='YouTube API SubRip Subtitles Hashtag Tutorial' href='#ytapisrsht'>YouTube API SubRip Subtitles Hashtag Tutorial<\/a>, it being based on &#8230;<\/p>\n<ul id=myul>\n<li>a user supplied <a target=\"_blank\" title='SubRip information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/SubRip' rel=\"noopener\">SubRip<\/a> subtitles filename URL &#8230; but, today, we want more &#8220;recallability&#8221; by &#8230;<\/li>\n<li>adding functionality to create the contents of a SubRip subtitles file and &#8230;\n<ol>\n<li>pass it back in hashtag form back up through the hierarchy<\/li>\n<li>allow it to be copied and recallable in window.<a target=\"_blank\" title='window.localStorage information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp' rel=\"noopener\">localStorage<\/a>  relevant to the web browser and device being used<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>A new &#8220;Create&#8221; <i>&#8220;a&#8221;<\/i> link at the <i>parent<\/i> level allows this to happen, and once the SubRip subtitles file contents is completed at the <i>grandchild<\/i> level inhouse <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">YouTube API<\/a> interfacer and &#8220;hashtagged&#8221; back to the <i>parent<\/i> level where a &#8220;subtitles&#8221; &#8220;a&#8221; link can then be used to store this recallable hashtagging into (and out of) the window.localStorage web browser repository.<\/p>\n<p>You can see this in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-----------------------------------------GETME\" rel=\"noopener\">a further changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-----------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">inhouse YouTube API interfacer<\/a> at the the <i>grandchild<\/i> level called by <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\" rel=\"noopener\">the <i>parent<\/i> level changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-----------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?rand=4325644\" rel=\"noopener\">inhouse YouTube Informational Organizer and improved Audio Recording Organizer<\/a> web application you <a href='#aifk'>can try below<\/a>.<\/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-api-subrip-subtitles-creation-tutorial\/' rel=\"noopener\">YouTube API SubRip Subtitles Creation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapisrsht'>Previous relevant <a target=\"_blank\" title='YouTube API SubRip Subtitles Hashtag Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-subrip-subtitles-hashtag-tutorial\/' rel=\"noopener\">YouTube API SubRip Subtitles Hashtag 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?rand=7564765\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API SubRip Subtitles Hashtag Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_subrip.png\" title=\"YouTube API SubRip Subtitles Hashtag Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube API SubRip Subtitles Hashtag Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='YouTube API SubRip Subtitles Primer Tutorial' href='#ytapisrspt'>YouTube API SubRip Subtitles Primer Tutorial<\/a> had us allowing for a semi-integrated &#8230;<\/p>\n<ul>\n<li>recognition of <a target=\"_blank\" title='SubRip information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/SubRip' rel=\"noopener\">SubRip<\/a> subtitle file definition in the <i>grandchild<\/i> level inhouse <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">YouTube API<\/a> interfacing HTML and Javascript we have going, and testing in it&#8217;s &#8220;standalone&#8221; incarnation, if you will, via <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html----------------------------------------GETME\" rel=\"noopener\">a further changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html----------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">inhouse YouTube API interfacer<\/a> &#8230; in which we coaxed the <i>grandchild<\/i> to at least recognize that &#8230;<\/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\" rel=\"noopener\">the <i>parent<\/i> level changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?rand=4325644\" rel=\"noopener\">inhouse YouTube Informational Organizer and improved Audio Recording Organizer<\/a> web application &#8230;<\/li>\n<\/ul>\n<p> &#8230; can <i>move with the times<\/i>, and understand the nuances of SubRip jive talk, if encouraged?!  So &#8230;<\/p>\n<blockquote><p>\nYay!!!!!!!!! Team!!!!!!!!!! Give us a K &#8230; &#8230; &#8230;\n<\/p><\/blockquote>\n<p>And didn&#8217;t you just know that hashtagging within all the <i>document.URL<\/i> incarnations would help out here?!<\/p>\n<p>We add the ability at the <i>parent<\/i> level in that first textbox <font size=1>(that you can reach for yourself by clicking the last link or the tutorial image above)<\/font> so that an entry like &#8230;<\/p>\n<p><code><br \/>\n7o9wvYXR3n0#\/tokyo.srt<br \/>\n<\/code><\/p>\n<p> &#8230; you can simulate <a id=aifk style=text-decoration:underline;cursor:pointer; onclick=\"if (document.getElementById('difk').innerHTML == '' || 6 == 6) { document.getElementById('difk').innerHTML='' + document.getElementById('difk').getAttribute('data-if') + ''; }  document.getElementById('ifk').src=document.getElementById('ifk').getAttribute('data-src');  document.getElementById('ifk').style.display='block'; setTimeout(function(){  if (8 == 5) { document.getElementById('difk').innerHTML=''; } document.getElementById('aifk').scrollIntoView(); }, 40000);\" href='#ifk'>here by clicking this link<\/a>, below, or for a new window incarnation, <a style=text-decoration:underline;cursor:pointer; onclick=\"document.getElementById('aifk').click(); window.open(document.getElementById('ifk').getAttribute('data-src'),'_blank'); \" data-href='#aifk'>click here<\/a>.<\/p>\n<div id=difk data-if=\"\">\n<iframe onload=\"document.getElementById('difk').setAttribute('data-if',this.outerHTML);\" name=ifk id=ifk style=display:none;width:100%;height:800px; data-src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=7o9wvYXR3n0&#038;youtube_duration=22.0&#038;c0=on&#038;i0=0&#038;j0=22&#038;c1=on&#038;i1=&#038;j1=&#038;c2=off&#038;i2=0&#038;j2=0&#038;c3=off&#038;i3=0&#038;j3=0&#038;c4=off&#038;i4=0&#038;j4=0&#038;c5=off&#038;i5=0&#038;j5=0&#038;c6=off&#038;i6=0&#038;j6=0&#038;c7=off&#038;i7=0&#038;j7=0&#038;c8=off&#038;i8=0&#038;j8=0&#038;i9=0&#038;j9=0&#038;c9=off#srt=%2Ftokyo.srt' src='\/About_Us.html'><\/iframe>\n<\/div>\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-api-subrip-subtitles-hashtag-tutorial\/' rel=\"noopener\">YouTube API SubRip Subtitles Hashtag Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ytapisrspt'>Previous relevant <a target=\"_blank\" title='YouTube API SubRip Subtitles Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-subrip-subtitles-primer-tutorial\/' rel=\"noopener\">YouTube API SubRip Subtitles Primer 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\/stop_start_youtube.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"YouTube API SubRip Subtitles Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/yt_subrip.gif\" title=\"YouTube API SubRip Subtitles Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">YouTube API SubRip Subtitles Primer Tutorial<\/p><\/div>\n<p>We&#8217;re back at the <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">YouTube API<\/a> themes, like with <a title='Audio Stream of YouTube Video Play Safari Loading Tutorial' href='#asytvpslt'>Audio Stream of YouTube Video Play Safari Loading Tutorial<\/a>, today, allowing for &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='SubRip information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/SubRip' rel=\"noopener\">SubRip<\/a> subtitle<br \/>\n<\/code><\/p>\n<p id=pdtt> &#8230; file reading and processing just on the client side, via <a target=\"_blank\" title='Ajax information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Ajax_(programming)' rel=\"noopener\">Ajax<\/a> methodologies, following up on an idea we had for something &#8220;down the track&#8221; we hope benefits from the new Javascript below &#8230;<\/p>\n<p><code><br \/>\nvar stimes=[], etimes=[], timesubtitles=[], cursubi=-1, xhr=null, cursecselapsed=-1.0, enforcedtimeis=-1.0, isnotplaying=true, createdlh='';<br \/>\nvar gsrt=( ('' + location.search + ('' + location.hash).replace(\/^undefined\/g,'').replace(\/^null\/g,'')).indexOf('=1' + encodeURIComponent(String.fromCharCode(10))) != -1 ? processsrt('1' + encodeURIComponent(String.fromCharCode(10)) + ('' + location.search + ('' + location.hash).replace(\/^undefined\/g,'').replace(\/^null\/g,'')).split('=1' + encodeURIComponent(String.fromCharCode(10))[1].split(encodeURIComponent(String.fromCharCode(10)) + '&')[0].split(encodeURIComponent(String.fromCharCode(10)) + '#')[0])  ).replace(\/\\+\/g, ' ') : (('' + location.search + ('' + location.hash).replace(\/^undefined\/g,'').replace(\/^null\/g,'')).toLowerCase().replace(encodeURIComponent('.') + 'vtt',encodeURIComponent('.') + 'srt').indexOf(encodeURIComponent('.') + 'srt') != -1 ? processsrt(('' + location.search + ('' + location.hash).replace(\/^undefined\/g,'').replace(\/^null\/g,'')).replace(encodeURIComponent('.') + 'SRT','SRT' + encodeURIComponent('.') + 'srt').replace(encodeURIComponent('.') + 'vtt','vtt' + encodeURIComponent('.') + 'srt').replace(encodeURIComponent('.') + 'VTT','VTT' + encodeURIComponent('.') + 'srt').split(encodeURIComponent('.') + 'srt')[0].split(encodeURIComponent(String.fromCharCode(10)) + '&')[0].split(encodeURIComponent(String.fromCharCode(10)) + '#')[0]) : ''));<br \/>\n<br \/>\n function getlh() {<br \/>\n  return ('' + location.hash).replace(\/^undefined\/g,'').replace(\/^null\/g,'');<br \/>\n }<br \/>\n<br \/>\n function writeoutsubtitle() {<br \/>\n  var newsubi=-1, ithings=0;<br \/>\n  \/\/console.log('call ' + enforcedtimeis + ' ' + cursecselapsed);<br \/>\n  if (enforcedtimeis &gt;= 0.0) {<br \/>\n     cursecselapsed=enforcedtimeis;<br \/>\n  }<br \/>\n  if (cursecselapsed &gt;= 0.0 && cursubi &gt;= 0 && eval('' + etimes.length) &gt; 0 && eval('' + stimes.length) &gt; 0 && eval('' + timesubtitles.length) &gt; 0) {<br \/>\n    if (enforcedtimeis &lt; 0.0) {<br \/>\n     cursecselapsed+=0.1;<br \/>\n    }<br \/>\n    \/\/console.log('' + cursecselapsed);<br \/>\n    if (eval(cursecselapsed) &gt;= eval(stimes[cursubi]) && eval(cursecselapsed) &lt;= eval(etimes[cursubi])) {<br \/>\n    if (document.getElementById('subtitlegoeshere').innerHTML == '' && eval('' + timesubtitles.length) &gt; cursubi) {<br \/>\n      console.log('found for ' + cursubi);<br \/>\n      document.getElementById('subtitlegoeshere').innerHTML=timesubtitles[cursubi];<br \/>\n    }<br \/>\n    } else {<br \/>\n    for (ithings=0; ithings&lt;stimes.length; ithings++) {<br \/>\n      if (eval(cursecselapsed) &gt;= eval(stimes[ithings]) && eval(cursecselapsed) &lt;= eval(etimes[ithings])) {<br \/>\n        newsubi=ithings;<br \/>\n        \/\/alert('yes ' + ithings);<br \/>\n      }<br \/>\n    }<br \/>\n    if (eval(newsubi) &gt;= 0 && eval(cursubi) &gt;= 0 && eval(newsubi) != eval(cursubi)) {<br \/>\n    \/\/alert('' + timesubtitles.length + ' needs to be bigger than ' + newsubi);<br \/>\n    if (eval('' + timesubtitles.length) &gt; eval(newsubi)) {<br \/>\n      cursubi=newsubi;<br \/>\n      console.log('Found for ' + cursubi);<br \/>\n      if (('' + timesubtitles[cursubi]).replace(\/^undefined$\/g,'').replace('WEBVTT FILE', '') != '') {<br \/>\n      document.getElementById('subtitlegoeshere').innerHTML=('' + timesubtitles[cursubi]).replace(\/^undefined$\/g,'');<br \/>\n      if (window.parent) {<br \/>\n        if (parent.document.getElementById('subtitlegoeshere')) {<br \/>\n           parent.document.getElementById('subtitlegoeshere').innerHTML=('' + timesubtitles[cursubi]).replace(\/^undefined$\/g,'');<br \/>\n        }<br \/>\n      }<br \/>\n      }<br \/>\n    }<br \/>\n    } else if (eval(newsubi) &gt;= 0 && eval(cursubi) &gt;= 0 && document.getElementById('subtitlegoeshere').innerHTML == '') {<br \/>\n      console.log('Found For ' + cursubi);<br \/>\n      if (('' + timesubtitles[cursubi]).replace(\/^undefined$\/g,'').replace('WEBVTT FILE', '') != '') {<br \/>\n      document.getElementById('subtitlegoeshere').innerHTML=('' + timesubtitles[cursubi]).replace(\/^undefined$\/g,'');<br \/>\n      if (window.parent) {<br \/>\n        if (parent.document.getElementById('subtitlegoeshere')) {<br \/>\n           parent.document.getElementById('subtitlegoeshere').innerHTML=('' + timesubtitles[cursubi]).replace(\/^undefined$\/g,'');<br \/>\n        }<br \/>\n      }<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n  if (!isnotplaying) { enforcedtimeis=-1.0;  }<br \/>\n }<br \/>\n<br \/>\n function convertSrtToText(srt) { \/\/ thanks to https:\/\/medium.com\/@backlinkss.info\/convert-srt-to-text-regex-javascript-9660964ee3f0<br \/>\n  \/\/ Use a express\u00e3o regular para remover os n\u00fameros de linha e as marcas de tempo<br \/>\n  return srt.replace(\/^\\d+\\n([\\d:,.]+ --&gt; [\\d:,.]+\\n)\/gm, '');<br \/>\n }<br \/>\n <br \/>\n function tosecs(fromthistimestamp) {<br \/>\n   var outsecs=0.0, cola=[], cfactor=1.0, icf=0;<br \/>\n   if (fromthistimestamp.replace('.',',').indexOf(',') != -1) {<br \/>\n     outsecs+=eval(eval('' + fromthistimestamp.replace('.',',').split(',')[1]) \/ Math.pow(10.0, eval('' + fromthistimestamp.replace('.',',').split(',')[1].length)));<br \/>\n     fromthistimestamp=fromthistimestamp.replace('.',',').split(',')[0];<br \/>\n   }<br \/>\n   cola=fromthistimestamp.split(':');<br \/>\n   for (icf=eval(-1 + cola.length); icf&gt;=0; icf--) {<br \/>\n     outsecs+=eval(eval('' + cola[icf]) \/ cfactor);<br \/>\n     cfactor*=60.0;<br \/>\n   }<br \/>\n   return outsecs;<br \/>\n }<br \/>\n <br \/>\n function stateChanged() {<br \/>\n  if (xhr.readyState == 4) {<br \/>\n   if (xhr.status == 200) {<br \/>\n    if (xhr.response.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n     gsrt=xhr.response;<br \/>\n     stimes=[];<br \/>\n     etimes=[];<br \/>\n     timesubtitles=[];<br \/>\n     processsrt('');<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n }<br \/>\n    <br \/>\n function processsrt(instis) {<br \/>\n  var it=0, interimsrt=[];<br \/>\n  if (instis != '') {<br \/>\n    gsrt=decodeURIComponent(instis).replace(\/\\+\/g,' ');<br \/>\n    if (gsrt != '' && gsrt.indexOf(String.fromCharCode(10)) == -1 && gsrt.indexOf('=') != -1) {<br \/>\n      gsrt=gsrt.split('=')[eval(-1 + gsrt.split('=').length)] + '.srt';<br \/>\n    }<br \/>\n    if (gsrt.toLowerCase().trim() != gsrt.toLowerCase().trim().replace(\/\\.srt$\/g,'')) {<br \/>\n     xhr = new XMLHttpRequest();<br \/>\n     xhr.onreadystatechange=stateChanged;<br \/>\n     createdlh='#srt=' + encodeURIComponent(gsrt.replace(\/SRT\\.srt$\/g, '.SRT'));<br \/>\n     xhr.open('get',gsrt.replace(\/SRT\\.srt$\/g, '.SRT').replace(\/VTT\\.srt$\/g, '.VTT').replace(\/vtt\\.srt$\/g, '.vtt'),true);<br \/>\n     xhr.send(null);<br \/>\n    }<br \/>\n    gsrt='';<br \/>\n    return decodeURIComponent(instis).replace(\/SRT\\.srt$\/g, '.SRT').replace(\/VTT\\.srt$\/g, '.VTT').replace(\/vtt\\.srt$\/g, '.vtt');<br \/>\n  }<br \/>\n  if (gsrt != '') {<br \/>\n    interimsrt=gsrt.split(' --&gt; ');<br \/>\n    timesubtitles=convertSrtToText(gsrt).split(String.fromCharCode(10) + String.fromCharCode(10));<br \/>\n    \/\/ 1\\n00:00:10,500 --&gt; 00:00:13,000\\nhuh\\n\\n2\\n00:00:13,000 --&gt; 00:00:23,000\\nhuhagain<br \/>\n    stimes.push(0.0);<br \/>\n    etimes.push(0.0);<br \/>\n    for (it=1; it&lt;interimsrt.length; it++) {<br \/>\n      stimes.push(tosecs(interimsrt[eval(-1 + it)].split(String.fromCharCode(10))[eval(-1 + interimsrt[eval(-1 + it)].split(String.fromCharCode(10)).length)]));<br \/>\n      etimes.push(tosecs(interimsrt[eval(0 + it)].split(String.fromCharCode(10))[0]));<br \/>\n    }<br \/>\n  \/\/alert('' + stimes.length + '\/' + etimes.length + '\/' + timesubtitles.length);<br \/>\n    if (eval('' + etimes.length) &gt; 0) {<br \/>\n      cursubi=0;<br \/>\n      setInterval(writeoutsubtitle, 100);<br \/>\n    }<br \/>\n  }<br \/>\n  if (createdlh == '') {<br \/>\n     createdlh='#srt=' + encodeURIComponent(decodeURIComponent(instis).replace(\/\\+\/g,' '));<br \/>\n  }<br \/>\n  \/\/alert('' + stimes.length + '\/' + etimes.length + '\/' + timesubtitles.length);<br \/>\n  \/\/console.log(stimes);<br \/>\n  \/\/console.log(etimes);<br \/>\n  \/\/console.log(timesubtitles);<br \/>\n  return decodeURIComponent(instis);<br \/>\n }<br \/>\n<\/code><\/p>\n<p>Today&#8217;s &#8220;primer&#8221; tutorial hones in on the <i>grandchild<\/i> level inhouse YouTube API interfacing HTML and Javascript we have going, and testing on it&#8217;s &#8220;standalone&#8221; incarnation, if you will,  in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html---------------------------------------GETME\" rel=\"noopener\">the reworked<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html---------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">inhouse YouTube API interfacer<\/a> code.<\/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\/new-audio-stream-of-youtube-video-play-safari-loading-tutorial\/' rel=\"noopener\">New Audio Stream of YouTube Video Play Safari Loading Tutorial<\/a>.<\/p-->\n<hr>\n<p id='asytvpslt'>Previous relevant <a target=\"_blank\" title='Audio Stream of YouTube Video Play Safari Loading Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/audio-stream-of-youtube-video-play-safari-loading-tutorial\/' rel=\"noopener\">Audio Stream of YouTube Video Play Safari Loading Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/Mac\/iPhone\/safari_iphone_issue_loading.gif\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Audio Stream of YouTube Video Play Safari Loading Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPhone\/safari_iphone_issue_loading.gif\" title=\"Audio Stream of YouTube Video Play Safari Loading Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Audio Stream of YouTube Video Play Safari Loading Tutorial<\/p><\/div>\n<p>Regarding the day before yesterday&#8217;s <a title='Audio Stream of YouTube Video Play Safari Title Tutorial' href='#asytvpstt'>Audio Stream of YouTube Video Play Safari Title Tutorial<\/a>&#8216;s &#8220;first day&#8221; approach of <i>timing<\/i> as a concern when WordPress blog postings contain links to Audio Stream of YouTube Video Play inhouse functionality, we&#8217;re returning to that theme, from a different place.<\/p>\n<p>A pinch point with web applications needing memory resources are &#8230;<\/p>\n<ul>\n<li>document.body <i>onload<\/i> event <font size=1>(itself, or around the same time)<\/font> &#8230; as well as any &#8230;<\/li>\n<li>iframe <i>onload<\/i> events within that document.body innerHTML &#8220;innards&#8221;<\/li>\n<\/ul>\n<p>We think at the document.body <i>onload<\/i> event <font size=1>(itself, or around the same time)<\/font>, if there are more than one &#8220;a&#8221; link <i>class=ytaudioonly<\/i> involved, the modus operandi difference between &#8230;<\/p>\n<ul>\n<li>non-mobile &#8220;a&#8221; link emoji addition &#8230; versus &#8230;<\/li>\n<li>mobile &#8220;a&#8221; link transforms into an iframe element involving considerable resources<\/li>\n<\/ul>\n<p> &#8230; is better arranged so that for mobile platforms, the creation of those iframe elements is spaced out in time.<\/p>\n<p>And this was <font color=blue>pretty simple<\/font> to do in the relevant external Javascript &#8230;<\/p>\n<p><code><br \/>\n  <font color=blue>var slow_approach=false;<br \/>\n  if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    slow_approach=true;<br \/>\n  }<\/font><br \/>\n<br \/>\n  function audioytlook() {  \/\/ first happens around document.body onload event<br \/>\n    var isSafari = \/Safari\/.test(navigator.userAgent) && \/Apple Computer\/.test(navigator.vendor);<br \/>\n    if ('safari_iphone_repeatedly-issue' != 'safari_iphone_repeatedly-issue') { \/\/ now handled with stop_start_youtube.html via document.title reappraisal<br \/>\n    if (navigator.userAgent.match(\/iPhone\/i) && oktocheck && isSafari) {<br \/>\n     if (('' + top.document.URL).indexOf('\/external-javascript-') != -1 && ('' + top.document.URL).indexOf('andabit=') != -1) {<br \/>\n     if (document.URL.indexOf('\/karaoke_') == -1) {<br \/>\n      oktocheck=false;<br \/>\n      setTimeout(audioytlook, 180000);<br \/>\n      return '';<br \/>\n     }<br \/>\n     } else if (('' + top.document.URL).indexOf('\/external-javascript-') != -1) {<br \/>\n     if (document.URL.indexOf('\/karaoke_') == -1) {<br \/>\n      oktocheck=false;<br \/>\n      setTimeout(audioytlook, 180000);<br \/>\n      return '';<br \/>\n     }<br \/>\n     }<br \/>\n    }<br \/>\n    }<br \/>\n    oktocheck=false;<br \/>\n    <font color=blue>var onefound=false;<\/font><br \/>\n    var delts=['s','m','h','d'], deltv=[1,60,3600,196000], idel=0;<br \/>\n    var spos='0', sposspare='', altend='22223';<br \/>\n    var audioemoji='&lt;sup data-status=\"\" style=\"z-index:599;\" data-ontouchstart=\"event.stopPropagation(); onsupclick(event);\" data-onclick=\"event.stopPropagation(); onsupclick(event);\" title=\"Right click opens in new window the video and audio but normal click just plays audio in place.  Numerical only entry in textarea seeks that audio timing position.  Numerical space search text does YouTube search of search text to create the numerical number of audio only YouTube video links.  Eg. 7 octopus anatomy\"&gt; ' + String.fromCodePoint(128251) + String.fromCodePoint(127926) + '&lt;\/sup&gt;';<br \/>\n    \/\/audioemoji='&lt;sup&gt;&nbsp;' + String.fromCodePoint(128251) + String.fromCodePoint(127926) + '&lt;\/sup&gt;';<br \/>\n    \/\/audioemoji='';<br \/>\n    var suffixin='', suffixout='';<br \/>\n    var onoroff='on';<br \/>\n    var ipd=0, foundne=false, sscidea='';<br \/>\n    var audioonlyas=document.getElementsByTagName('a');<br \/>\n    if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n      audioemoji='&lt;sup data-status=\"\" style=\"z-index:599;\" data-ontouchstart=\"event.stopPropagation(); onsupclick(event);\" data-onclick=\"event.stopPropagation(); onsupclick(event);\" title=\"Right click opens in new window the video and audio but normal click just plays audio in place.  Numerical only entry in textarea seeks that audio timing position.  Numerical space search text does YouTube search of search text to create the numerical number of audio only YouTube video links.  Eg. 7 octopus anatomy\"&gt; ' + String.fromCodePoint(128251) + String.fromCodePoint(127926) + '&lt;\/sup&gt;';<br \/>\n    }<br \/>\n    for (var iuhg=eval(-1 + eval('' + audioonlyas.length)); iuhg&gt;=0; iuhg--) {  \/\/for (var iuhg=0; iuhg&lt;audioonlyas.length; iuhg++) {<br \/>\n       if (('' + audioonlyas[iuhg].className) == 'audioytplay'<font color=blue> && ('' + audioonlyas[iuhg].outerHTML).indexOf(' data-processed=') == -1<\/font>) {<br \/>\n  if (document.URL.indexOf('\/karYOULLNEVERFINDTHISaoke_') != -1) {<br \/>\n  alert(23);<br \/>\n  }<br \/>\n         if (('' + audioonlyas[iuhg].outerHTML).split('&gt;')[0].indexOf('HTMLCSS\/karaoke_youtube_api.htm') == -1 && ('' + audioonlyas[iuhg].outerHTML).split('&gt;')[0].indexOf('youtube.com\/watch?v=') != -1) {<br \/>\n  if (document.URL.indexOf('\/karYOULLNEVERFINDTHISaoke_') != -1) {<br \/>\n  alert(223);<br \/>\n  }<br \/>\n  <br \/>\n  \/\/ https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=kUI_P5eMVLo&youtube_duration=202.181&email=&email=&emoji=on&c0=on&i0=14&j0=22.181&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=<br \/>\n           altend='22223';<br \/>\n           spos='0';<br \/>\n           \/\/if (('' + audioonlyas[iuhg].innerHTML) == 'again') {<br \/>\n  \/\/alert('x:' + audioonlyas[iuhg].outerHTML);<br \/>\n           \/\/}<br \/>\n           if (('' + audioonlyas[iuhg].href).split('&gt;')[0].split('youtube.com\/watch?v=')[1].replace('#t','&t').indexOf('&t=') != -1) { \/\/ &t=2m37s<br \/>\n             sposspare=('' + audioonlyas[iuhg].href).split('&gt;')[0].split('youtube.com\/watch?v=')[1].replace('#t','&t').split('&t=')[1].split('&')[0].split('#')[0].split('\"')[0].split(\"'\")[0].split('&gt;')[0];<br \/>\n             if (sposspare.indexOf(':') != -1) {<br \/>\n               for (idel=eval(-1 + sposspare.split(':').length); idel&gt;=0; idel--) {<br \/>\n                 spos='' + eval(eval('' + spos) + eval(deltv[idel] * eval('' + sposspare.split(':')[idel]  )));<br \/>\n               }<br \/>\n             } else {<br \/>\n  \/\/alert(sposspare);<br \/>\n               for (idel=3; idel&gt;=0; idel--) {<br \/>\n                if (sposspare.indexOf(delts[idel]) != -1) {<br \/>\n                 spos='' + eval(eval('' + spos) + eval(deltv[idel] * eval('' + sposspare.split(delts[idel])[0].slice(-3).replace(delts[0],'').replace(delts[1],'').replace(delts[2],'').replace(delts[3],'')  )));<br \/>\n                } else if (idel == 3 && sposspare.indexOf(delts[2]) == -1 && sposspare.indexOf(delts[1]) == -1 && sposspare.indexOf(delts[0]) == -1) {<br \/>\n                 spos='' + sposspare;<br \/>\n                }<br \/>\n               }<br \/>\n             }<br \/>\n           }<br \/>\n           if (('' + audioonlyas[iuhg].href).split('&gt;')[0].split('youtube.com\/watch?v=')[1].indexOf('#e=') != -1) { \/\/ &t=2m37s<br \/>\n             sposspare=('' + audioonlyas[iuhg].href).split('&gt;')[0].split('youtube.com\/watch?v=')[1].split('#e=')[1].split('&')[0].split('#')[0].split('\"')[0].split(\"'\")[0].split('&gt;')[0];<br \/>\n             if (sposspare.indexOf(':') != -1) {<br \/>\n               altend='0.000';<br \/>\n               for (idel=eval(-1 + sposspare.split(':').length); idel&gt;=0; idel--) {<br \/>\n                 altend='' + eval(eval('' + altend) + eval(deltv[idel] * eval('' + sposspare.split(':')[idel]  )));<br \/>\n               }<br \/>\n             } else {<br \/>\n               altend='0.000';<br \/>\n               for (idel=3; idel&gt;=0; idel--) {<br \/>\n                if (sposspare.indexOf(delts[idel]) != -1) {<br \/>\n                 altend='' + eval(eval('' + altend) + eval(deltv[idel] * eval('' + sposspare.split(delts[idel])[0].slice(-3).replace(delts[0],'').replace(delts[1],'').replace(delts[2],'').replace(delts[3],'')  )));<br \/>\n                } else if (idel == 3 && sposspare.indexOf(delts[2]) == -1 && sposspare.indexOf(delts[1]) == -1 && sposspare.indexOf(delts[0]) == -1) {<br \/>\n                 altend='' + eval(eval('' + altend) + eval('' + sposspare));<br \/>\n                }<br \/>\n               }<br \/>\n             }<br \/>\n           }<br \/>\n           if (('' + audioonlyas[iuhg].href).split('&gt;')[0].split('youtube.com\/watch?v=')[1].indexOf('#d') != -1) { \/\/ &t=2m37s<br \/>\n           if (('' + audioonlyas[iuhg].href).split('&gt;')[0].split('youtube.com\/watch?v=')[1].split('#d')[1].indexOf('=') != -1) { \/\/ &t=2m37s<br \/>\n             sposspare=('' + audioonlyas[iuhg].href).split('&gt;')[0].split('youtube.com\/watch?v=')[1].split('#d')[1].split('=')[1].split('&')[0].split('#')[0].split('\"')[0].split(\"'\")[0].split('&gt;')[0];<br \/>\n             if (sposspare.indexOf(':') != -1) {<br \/>\n               altend=spos.split('.')[0] + '.000';<br \/>\n               for (idel=eval(-1 + sposspare.split(':').length); idel&gt;=0; idel--) {<br \/>\n                 altend='' + eval(eval('' + altend) + eval(deltv[idel] * eval('' + sposspare.split(':')[idel]  )));<br \/>\n               }<br \/>\n             } else {<br \/>\n               altend=spos.split('.')[0] + '.000';<br \/>\n               for (idel=3; idel&gt;=0; idel--) {<br \/>\n                if (sposspare.indexOf(delts[idel]) != -1) {<br \/>\n                 altend='' + eval(eval('' + altend) + eval(deltv[idel] * eval('' + sposspare.split(delts[idel])[0].slice(-3).replace(delts[0],'').replace(delts[1],'').replace(delts[2],'').replace(delts[3],'')  )));<br \/>\n                } else if (idel == 3 && sposspare.indexOf(delts[2]) == -1 && sposspare.indexOf(delts[1]) == -1 && sposspare.indexOf(delts[0]) == -1) {<br \/>\n                 altend='' + eval(eval('' + altend) + eval('' + sposspare));<br \/>\n                }<br \/>\n               }<br \/>\n             }<br \/>\n           }<br \/>\n           }<br \/>\n           theytcode=('' + audioonlyas[iuhg].outerHTML).split('&gt;')[0].split('youtube.com\/watch?v=')[1].split('&')[0].split('#')[0].split('\"')[0].split('&gt;')[0];<br \/>\n           thisaudiooh=audioonlyas[iuhg].outerHTML;<br \/>\n           thisaudioih=audioonlyas[iuhg].innerHTML;<br \/>\n           thisaudioit=audioonlyas[iuhg].innerText;<br \/>\n           \/\/alert(thisaudioih);<br \/>\n           suffixin='';<br \/>\n           suffixout='';<br \/>\n           foundne=false;<br \/>\n           dbidea=document.body;<br \/>\n           thisaudiotitle=('' + audioonlyas[iuhg].title).trim();<br \/>\n           if (('' + audioonlyas[iuhg].target + '_').substring(0,1) == '_') {<br \/>\n             while (document.getElementById(newaudioifid)) {<br \/>\n               newaudioifid+='x';<br \/>\n             }<br \/>\n             if (('' + audioonlyas[iuhg].outerHTML).split('&gt;')[0].indexOf(' id=') != -1) {<br \/>\n               newaudioaid='' + audioonlyas[iuhg].id;<br \/>\n             } else {<br \/>\n              while (document.getElementById(newaudioaid)) {<br \/>\n               newaudioaid+='x';<br \/>\n              }<br \/>\n             }<br \/>\n           }<br \/>\n           if (!foundne) {<br \/>\n             if (eval('' + thespansare.length) == 0) {<br \/>\n               thespansare=document.getElementsByTagName('span');<br \/>\n             }<br \/>\n             for (ipd=eval(-1 + eval('' + thespansare.length)); ipd&gt;=0; ipd--) {<br \/>\n               if (!foundne && thespansare[ipd].innerHTML.indexOf(audioonlyas[iuhg].outerHTML) != -1) {<br \/>\n                 dbidea=thespansare[ipd];<br \/>\n                 foundne=true;<br \/>\n           thisaudiooh=audioonlyas[iuhg].outerHTML;<br \/>\n           thisaudioih=audioonlyas[iuhg].innerHTML;<br \/>\n           thisaudioit=audioonlyas[iuhg].innerText;<br \/>\n           \/\/if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n  if (document.URL.indexOf('\/karYOULLNEVERFINDTHISaoke_') != -1) {<br \/>\n           alert('3:' + dbidea.outerHTML + ' vs ' + thisaudiooh);<br \/>\n  }<br \/>\n           \/\/}<br \/>\n               }<br \/>\n             }<br \/>\n           }<br \/>\n           if (!foundne) {<br \/>\n             if (eval('' + thepsare.length) == 0) {<br \/>\n               thepsare=document.getElementsByTagName('p');<br \/>\n             }<br \/>\n             for (ipd=eval(-1 + eval('' + thepsare.length)); ipd&gt;=0; ipd--) {<br \/>\n               if (!foundne && thepsare[ipd].innerHTML.indexOf(audioonlyas[iuhg].outerHTML) != -1) {<br \/>\n                 dbidea=thepsare[ipd];<br \/>\n                 foundne=true;<br \/>\n           thisaudiooh=audioonlyas[iuhg].outerHTML;<br \/>\n           thisaudioih=audioonlyas[iuhg].innerHTML;<br \/>\n           thisaudioit=audioonlyas[iuhg].innerText;<br \/>\n           \/\/if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n             if (document.URL.indexOf('\/karYOULLNEVERFINDTHISaoke_') != -1) {<br \/>\n           alert('1:' + dbidea.outerHTML + ' vs ' + thisaudiooh);<br \/>\n             }<br \/>\n           \/\/}<br \/>\n               }<br \/>\n             }<br \/>\n           }<br \/>\n           if (!foundne) {<br \/>\n             if (eval('' + thedivsare.length) == 0) {<br \/>\n               thedivsare=document.getElementsByTagName('div');<br \/>\n             }<br \/>\n             for (ipd=eval(-1 + eval('' + thedivsare.length)); ipd&gt;=0; ipd--) {<br \/>\n               if (!foundne && thedivsare[ipd].innerHTML.indexOf(audioonlyas[iuhg].outerHTML) != -1) {<br \/>\n                 dbidea=thedivsare[ipd];<br \/>\n                 foundne=true;<br \/>\n           thisaudiooh=audioonlyas[iuhg].outerHTML;<br \/>\n           thisaudioih=audioonlyas[iuhg].innerHTML;<br \/>\n           thisaudioit=audioonlyas[iuhg].innerText;<br \/>\n           \/\/if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n             if (document.URL.indexOf('\/karYOULLNEVERFINDTHISaoke_') != -1) {<br \/>\n           alert('2:' + dbidea.outerHTML + ' vs ' + thisaudiooh);<br \/>\n             }<br \/>\n           \/\/}<br \/>\n               }<br \/>\n             }<br \/>\n           }<br \/>\n  if (document.URL.indexOf('\/karYOULLNEVERFINDTHISaoke_') != -1) {<br \/>\n  alert(1123);<br \/>\n  }<br \/>\n           curdbih='' + dbidea.innerHTML;<br \/>\n           thisaudiooh=audioonlyas[iuhg].outerHTML;<br \/>\n           thisaudioih=audioonlyas[iuhg].innerHTML;<br \/>\n           thisaudioit=audioonlyas[iuhg].innerText;<br \/>\n           if (curdbih.indexOf(thisaudiooh) != -1) {<br \/>\n             if ((curdbih + '&lt;').split(thisaudiooh)[1].substring(0,1) != '&lt;') {<br \/>\n                suffixin=(curdbih + '').split(thisaudiooh)[1].split('&lt;')[0];<br \/>\n                if (suffixin.replace(String.fromCharCode(10),'').replace(String.fromCharCode(10),'').trim() != '') {<br \/>\n                  suffixout='&lt;span&gt;' + suffixin.replace(String.fromCharCode(10),'').replace(String.fromCharCode(10),'') + '&lt;\/span&gt;';<br \/>\n                } else {<br \/>\n                  suffixin='';<br \/>\n                }<br \/>\n             }<br \/>\n             suffixin='';<br \/>\n             suffixout='';<br \/>\n  if (document.URL.indexOf('\/karYOULLNEVERFINDTHISaoke_') != -1) {<br \/>\n   alert('dbidea.outerHTML=' + dbidea.outerHTML);<br \/>\n   alert('41123 ' + audioonlyas[iuhg].getBoundingClientRect().height + ' ' + audioonlyas[iuhg].getBoundingClientRect().width);<br \/>\n   alert(\"&lt;a class=processytplay id=\\\"\" + newaudioaid + \"\\\" target=\\\"_blank\\\" title=\\\"\" + thisaudiotitle + \"\\\" onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  this.title+=' ';  this.target='\" + newaudioifid + \"';  document.getElementById('\" + newaudioifid + \"').src=this.href; } setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100);\\\" href=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioit) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/a&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').href + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioit) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=0&j0=2&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:none;&gt;&lt;\/iframe&gt;\");<br \/>\n   }<br \/>\n             \/\/document.body.innerHTML=curdbih.replace(thisaudiooh, \"&lt;a class=processytplay id=\\\"\" + newaudioaid + \"\\\" target=\\\"_blank\\\" title=\\\"\" + thisaudiotitle + \"\\\" onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  this.title+=' ';  this.target='\" + newaudioifid + \"';  document.getElementById('\" + newaudioifid + \"').src=this.href; } setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100);\\\" href=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioit) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=0&j0=2&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/a&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').href + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioit) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=0&j0=2&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:none;&gt;&lt;\/iframe&gt;\");<br \/>\n             if (eval('' + audioonlyas[iuhg].getBoundingClientRect().height) &gt; 60) {<br \/>\n             if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) || 1 == 11) {<br \/>\n             onoroff='on';<br \/>\n             if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  onoroff='off'; }<br \/>\n  \/\/setTimeout(function(){<br \/>\n             \/\/document.body.innerHTML=curdbih.replace(thisaudiooh, \"&lt;br&gt;&lt;a style=display:inline-block; class=processytplay id=\\\"\" + newaudioaid + \"\\\" target=\\\"_blank\\\" title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  this.title+=' ';  this.target='\" + newaudioifid + \"';  if (2 == 2) { document.getElementById('\" + newaudioifid + \"').src=this.href; } } setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100);\\\" href=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/a&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').href + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:none;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;&gt;&lt;\/iframe&gt;\");<br \/>\n        \/\/dbidea.innerHTML=curdbih.replace(thisaudiooh, \"&lt;br&gt;&lt;a style=display:inline-block; class=processytplay id=\\\"\" + newaudioaid + \"\\\" target='\" + newaudioifid + \"\\' title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  this.title+=' ';  this.target='\" + newaudioifid + \"';  if (2 == 2) { document.getElementById('\" + newaudioifid + \"').src=this.href; } } setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100);\\\" href=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/a&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').href + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:none;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;&gt;&lt;\/iframe&gt;\");<br \/>\n             \/\/\/\/dbidea.innerHTML=curdbih.replace(thisaudiooh, \"&lt;br&gt;&lt;div style=display:inline-block; class=processytplay id=\\\"\" + newaudioaid + \"\\\" target='\" + newaudioifid + \"\\' title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  this.title+=' ';  this.target='\" + newaudioifid + \"';  if (2 == 2) { document.getElementById('\" + newaudioifid + \"').src=this.title; } } setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100);\\\" title=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/div&gt;&lt;div id=idiJUNKvf&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').href + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:none;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;&gt;&lt;\/iframe&gt;&lt;\/div&gt;\");<br \/>\n\/\/alert(344);<br \/>\n             \/\/ \/\/ \/\/dbidea.innerHTML=curdbih.replace(thisaudiooh, \"&lt;br&gt;&lt;div style=display:inline-block; class=processytplay id=\\\"\" + newaudioaid + \"\\\" data-target='\" + newaudioifid + \"\\' data-title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  this.title+=' ';  this.target='\" + newaudioifid + \"';  if (2 == 2) { document.getElementById('\" + newaudioifid + \"').src=this.title; } } setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100);\\\" title=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/div&gt;&lt;div id=idiJUNKvf&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').title + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/About_Us.html' style=display:none;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;&gt;&lt;\/iframe&gt;&lt;\/div&gt;\");<br \/>\n     <br \/> <br \/>\n             \/\/sscidea=decodeURIComponent(('' + window.sessionStorage.getItem('_words_' + window.btoa(thisaudioit))).replace(\/^null\/g,'').replace(\/^undefined\/g,''));<br \/>\n             \/\/if (sscidea != '') {<br \/>\n             \/\/dbidea.innerHTML=curdbih.replace(thisaudiooh + suffixin, sscidea + suffixout);<br \/>\n             \/\/} else {<br \/>\n             \/\/window.sessionStorage.setItem('_words_' + window.btoa(thisaudioit), encodeURIComponent(\"&lt;br&gt;&lt;!--div style=display:inline-block; class=processytplay id=\\\"\" + newaudioaid + \"\\\" data-target='\" + newaudioifid + \"\\' data-title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';   } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  this.title+=' ';   if (document.getElementById('\" + newaudioifid + \"').src != this.title.trim()) { document.getElementById('\" + newaudioifid + \"').src=this.title.trim(); } } \\\" title=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"--&gt;&lt;iframe data-onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {    if (this.src.indexOf('About_Us.') != -1) {  this.src=document.getElementById('\" + newaudioaid + \"').title.trim() + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:inline-block;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;height:\" + audioonlyas[iuhg].getBoundingClientRect().height + \"px;&gt;&lt;\/iframe&gt;&lt;!--\/div--&gt;\"));<br \/>\n\/\/             dbidea.innerHTML=curdbih.replace(thisaudiooh + suffixin, \"&lt;br&gt;&lt;div style='width:100%;' data-pp='pause' data-ts=\\\"\" + ('' + new Date()) + \"\\\" data-it=\\\"\" + encodeURIComponent(thisaudioit) + \"\\\" data-at='0.0000' data-duration='22223.0000' ontouchstart=onmaybesupclick(event); onmousedown=onmaybesupclick(event); style=display:inline-block; class=processytplay id=\\\"\" + newaudioaid + \"\\\" data-target='\" + newaudioifid + \"\\' data-title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';   } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  document.getElementById('inp\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';   this.title+=' ';   if (2 == 2) { document.getElementById('\" + newaudioifid + \"').src=this.title.trim(); } } \\\" title=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=\" + onoroff + \"&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;&lt;iframe data-onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {    if (this.src.indexOf('About_Us.') != -1) {  this.src=document.getElementById('\" + newaudioaid + \"').title.trim() + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:inline-block;width:\" + eval(2.2 * audioonlyas[iuhg].getBoundingClientRect().width) + \"px;height:\" + eval(4.2 * audioonlyas[iuhg].getBoundingClientRect().height) + \"px;&gt;&lt;\/iframe&gt;&lt;textarea rows=3 data-loop='' data-val='' id='inp\" + newaudioaid + \"_\" + newaudioifid + \"' style=background-color:rgb(250,250,250);display:inline-block;width:95%;font-size:12px;; type=text onblur=ansis(event); placeholder='Audio control ... P=pause\/play S=stop M=mute U=unmute L=loop ...'  id= value=''&gt;&lt;\/textarea&gt;&lt;div style=display:inline-block; id='ldi\" + newaudioaid + \"'&gt;&lt;!--input type=text style=position:absolute;top:-567px;left:-564px; value=''&gt;&lt;\/input--&gt;&lt;\/div&gt;&lt;\/div&gt;\" + suffixout);<br \/>\n             if (dbidea.innerHTML == audioonlyas[iuhg].outerHTML) {<br \/>\n             <font color=blue>onefound=true;<\/font><br \/>\n             dbidea.innerHTML=(\"&lt;br&gt;&lt;div style='width:100%;' data-pp='pause' data-ts=\\\"\" + ('' + new Date()) + \"\\\" data-it=\\\"\" + encodeURIComponent(thisaudioit) + \"\\\" data-at='0.0000' data-duration='22223.0000' ontouchstart=onmaybesupclick(event); onmousedown=onmaybesupclick(event); style=display:inline-block; class=processytplay id=\\\"\" + newaudioaid + \"\\\" data-target='\" + newaudioifid + \"\\' data-title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';   } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  document.getElementById('inp\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';   this.title+=' ';   if (2 == 2) { document.getElementById('\" + newaudioifid + \"').src=this.title.trim(); } } \\\" title=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=\" + onoroff + \"&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;&lt;iframe data-onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {    if (this.src.indexOf('About_Us.') != -1) {  this.src=document.getElementById('\" + newaudioaid + \"').title.trim() + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:inline-block;width:\" + eval(2.2 * audioonlyas[iuhg].getBoundingClientRect().width) + \"px;height:\" + eval(4.2 * audioonlyas[iuhg].getBoundingClientRect().height) + \"px;&gt;&lt;\/iframe&gt;&lt;textarea rows=3 data-loop='' data-mute='' data-val='' id='inp\" + newaudioaid + \"_\" + newaudioifid + \"' style=background-color:rgb(250,250,250);display:inline-block;width:95%;font-size:12px;; type=text onblur=ansis(event); placeholder='Audio control ... P=pause\/play S=stop M=mute U=unmute L=loop ...'  id= value=''&gt;&lt;\/textarea&gt;&lt;div style=display:inline-block; id='ldi\" + newaudioaid + \"'&gt;&lt;!--input type=text style=position:absolute;top:-567px;left:-564px; value=''&gt;&lt;\/input--&gt;&lt;\/div&gt;&lt;\/div&gt;\" + suffixout);<br \/>\n             } else {<br \/>\n             <font color=blue>onefound=true;<\/font><br \/>\n             dbidea.innerHTML=dbidea.innerHTML.replace(audioonlyas[iuhg].outerHTML + suffixin, \"&lt;br&gt;&lt;div style='width:100%;' data-pp='pause' data-ts=\\\"\" + ('' + new Date()) + \"\\\" data-it=\\\"\" + encodeURIComponent(thisaudioit) + \"\\\" data-at='0.0000' data-duration='22223.0000' ontouchstart=onmaybesupclick(event); onmousedown=onmaybesupclick(event); style=display:inline-block; class=processytplay id=\\\"\" + newaudioaid + \"\\\" data-target='\" + newaudioifid + \"\\' data-title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';   } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  document.getElementById('inp\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';   this.title+=' ';   if (2 == 2) { document.getElementById('\" + newaudioifid + \"').src=this.title.trim(); } } \\\" title=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=\" + onoroff + \"&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;&lt;iframe data-onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {    if (this.src.indexOf('About_Us.') != -1) {  this.src=document.getElementById('\" + newaudioaid + \"').title.trim() + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:inline-block;width:\" + eval(2.2 * audioonlyas[iuhg].getBoundingClientRect().width) + \"px;height:\" + eval(4.2 * audioonlyas[iuhg].getBoundingClientRect().height) + \"px;&gt;&lt;\/iframe&gt;&lt;textarea rows=3 data-loop='' data-mute='' data-val='' id='inp\" + newaudioaid + \"_\" + newaudioifid + \"' style=background-color:rgb(250,250,250);display:inline-block;width:95%;font-size:12px;; type=text onblur=ansis(event); placeholder='Audio control ... P=pause\/play S=stop M=mute U=unmute L=loop ...'  id= value=''&gt;&lt;\/textarea&gt;&lt;div style=display:inline-block; id='ldi\" + newaudioaid + \"'&gt;&lt;!--input type=text style=position:absolute;top:-567px;left:-564px; value=''&gt;&lt;\/input--&gt;&lt;\/div&gt;&lt;\/div&gt;\" + suffixout);<br \/>\n             }<br \/>\n             if (dbidea.outerHTML.split('&gt;')[0].indexOf('placeforvideo') != -1 || dbidea.outerHTML.split('&gt;')[0].indexOf('areyousinging') != -1) {<br \/>\n               dbidea.style.visibility='visible';<br \/>\n             }<br \/>\n             \/\/}<br \/>\n  \/\/}, 8000);<br \/>\n             } else {<br \/>\n             \/\/document.body.innerHTML=curdbih.replace(thisaudiooh, \"&lt;br&gt;&lt;a class=processytplay id=\\\"\" + newaudioaid + \"\\\" target='\" + newaudioifid + \"\\' title=\\\"\" + thisaudiotitle + \"\\\" onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  this.title+=' ';  this.target='\" + newaudioifid + \"';  document.getElementById('\" + newaudioifid + \"').src=this.href; } setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100);\\\" href=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/a&gt;&lt;div id=idivf&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').href + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/About_Us.html' style=display:none;&gt;&lt;\/iframe&gt;&lt;\/div&gt;\");<br \/>\n\/\/alert(98);<br \/>\n\/\/             dbidea.innerHTML=curdbih.replace(thisaudiooh + suffixin, \"&lt;br&gt;&lt;a data-pp='pause' data-ts=\\\"\" + ('' + new Date()) + \"\\\" data-it=\\\"\" + encodeURIComponent(thisaudioit) + \"\\\" data-at='0.0000' data-duration='22223.0000' oncontextmenu=\\\"window.open('\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaNOid=\" + newaudioaid + \"&theifrNOameid=\" + newaudioifid + \"&thebuttoNOnwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=','_blank');\\\" class=processytplay id=\\\"\" + newaudioaid + \"\\\" target='\" + newaudioifid + \"\\' title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  document.getElementById('spn\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';   document.getElementById('inp\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';   if (okdclick) {  this.title+=' ';  this.target='\" + newaudioifid + \"';  if (document.getElementById('\" + newaudioifid + \"').src != this.href) { document.getElementById('\" + newaudioifid + \"').src=this.href; this.href=this.href.replace('thebuttonwording=','thatbuttonwording='); } } } if (9 == 6) { setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100); }\\\" href=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/a&gt;&lt;div id=idivf style=display:inline-block;&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').href + '&rand=' + Math.floor(Math.random() * 1989786);  document.getElementById('\" + newaudioaid + \"').title+=' ';  } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=off&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:none;visibility:hidden;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;height:\" + audioonlyas[iuhg].getBoundingClientRect().height + \"px;&gt;&lt;\/iframe&gt;&lt;div id='spn\" + newaudioaid + \"_\" + newaudioifid + \"' style=display:NONE;white-space:pre-line;&gt; &lt;br&gt;&lt;textarea data-loop='' rows=4 data-val='' id='inp\" + newaudioaid + \"_\" + newaudioifid + \"' style=background-color:rgb(250,250,250);display:NONE;width:95%;font-size:8px;  data-loop='' data-val='' type=text onblur=ansis(event); placeholder='Audio control ... P=pause\/play S=stop M=mute U=unmute L=loop ...' value=''&gt;&lt;\/textarea&gt;&lt;\/div&gt;&lt;div style=display:inline-block; id='ldi\" + newaudioaid + \"'&gt;&lt;!--input type=text style=position:absolute;top:-567px;left:-564px; value=''&gt;&lt;\/input--&gt;&lt;\/div&gt;&lt;\/div&gt;\" + suffixout);<br \/>\n             if (dbidea.innerHTML == audioonlyas[iuhg].outerHTML) {<br \/>\n             <font color=blue>onefound=true;<\/font><br \/>\n             dbidea.innerHTML=(\"&lt;br&gt;&lt;a data-pp='pause' data-ts=\\\"\" + ('' + new Date()) + \"\\\" data-it=\\\"\" + encodeURIComponent(thisaudioit) + \"\\\" data-at='0.0000' data-duration='22223.0000' oncontextmenu=\\\"window.open('\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaNOid=\" + newaudioaid + \"&theifrNOameid=\" + newaudioifid + \"&thebuttoNOnwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=','_blank');\\\" class=processytplay id=\\\"\" + newaudioaid + \"\\\" target='\" + newaudioifid + \"\\' title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  document.getElementById('spn\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';   document.getElementById('inp\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';   if (okdclick) {  this.title+=' ';  this.target='\" + newaudioifid + \"';  if (document.getElementById('\" + newaudioifid + \"').src != this.href) { document.getElementById('\" + newaudioifid + \"').src=this.href; this.href=this.href.replace('thebuttonwording=','thatbuttonwording='); } } } if (9 == 6) { setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100); }\\\" href=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/a&gt;&lt;div id=idivf\" + newaudioaid + \" style=display:inline-block;&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').href + '&rand=' + Math.floor(Math.random() * 1989786);  document.getElementById('\" + newaudioaid + \"').title+=' ';  } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=off&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:none;visibility:hidden;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;height:\" + audioonlyas[iuhg].getBoundingClientRect().height + \"px;&gt;&lt;\/iframe&gt;&lt;div id='spn\" + newaudioaid + \"_\" + newaudioifid + \"' style=display:NONE;white-space:pre-line;&gt; &lt;br&gt;&lt;textarea data-loop='' rows=4 data-mute='' data-val='' id='inp\" + newaudioaid + \"_\" + newaudioifid + \"' style=background-color:rgb(250,250,250);display:NONE;width:95%;font-size:8px;  data-loop='' data-mute='' data-val='' type=text onblur=ansis(event); placeholder='Audio control ... P=pause\/play S=stop M=mute U=unmute L=loop ...' value=''&gt;&lt;\/textarea&gt;&lt;\/div&gt;&lt;div style=display:inline-block; id='ldi\" + newaudioaid + \"'&gt;&lt;!--input type=text style=position:absolute;top:-567px;left:-564px; value=''&gt;&lt;\/input--&gt;&lt;\/div&gt;&lt;\/div&gt;\" + suffixout);<br \/>\n             } else {<br \/>\n             <font color=blue>onefound=true;<\/font><br \/>\n             dbidea.innerHTML=dbidea.innerHTML.replace(audioonlyas[iuhg].outerHTML + suffixin, \"&lt;br&gt;&lt;a data-pp='pause' data-ts=\\\"\" + ('' + new Date()) + \"\\\" data-it=\\\"\" + encodeURIComponent(thisaudioit) + \"\\\" data-at='0.0000' data-duration='22223.0000' oncontextmenu=\\\"window.open('\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaNOid=\" + newaudioaid + \"&theifrNOameid=\" + newaudioifid + \"&thebuttoNOnwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=','_blank');\\\" class=processytplay id=\\\"\" + newaudioaid + \"\\\" target='\" + newaudioifid + \"\\' title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  document.getElementById('spn\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';   document.getElementById('inp\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';   if (okdclick) {  this.title+=' ';  this.target='\" + newaudioifid + \"';  if (document.getElementById('\" + newaudioifid + \"').src != this.href) { document.getElementById('\" + newaudioifid + \"').src=this.href; this.href=this.href.replace('thebuttonwording=','thatbuttonwording='); } } } if (9 == 6) { setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100); }\\\" href=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/a&gt;&lt;div id=idivf\" + newaudioaid + \" style=display:inline-block;&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').href + '&rand=' + Math.floor(Math.random() * 1989786);  document.getElementById('\" + newaudioaid + \"').title+=' ';  } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=off&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:none;visibility:hidden;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;height:\" + audioonlyas[iuhg].getBoundingClientRect().height + \"px;&gt;&lt;\/iframe&gt;&lt;div id='spn\" + newaudioaid + \"_\" + newaudioifid + \"' style=display:NONE;white-space:pre-line;&gt; &lt;br&gt;&lt;textarea data-loop='' rows=4 data-mute='' data-val='' id='inp\" + newaudioaid + \"_\" + newaudioifid + \"' style=background-color:rgb(250,250,250);display:NONE;width:95%;font-size:8px;  data-loop='' data-mute='' data-val='' type=text onblur=ansis(event); placeholder='Audio control ... P=pause\/play S=stop M=mute U=unmute L=loop ...' value=''&gt;&lt;\/textarea&gt;&lt;\/div&gt;&lt;div style=display:inline-block; id='ldi\" + newaudioaid + \"'&gt;&lt;!--input type=text style=position:absolute;top:-567px;left:-564px; value=''&gt;&lt;\/input--&gt;&lt;\/div&gt;&lt;\/div&gt;\" + suffixout);<br \/>\n             }<br \/>\n             if (dbidea.outerHTML.split('&gt;')[0].indexOf('placeforvideo') != -1 || dbidea.outerHTML.split('&gt;')[0].indexOf('areyousinging') != -1) {<br \/>\n               dbidea.style.visibility='visible';<br \/>\n             }<br \/>\n             }<br \/>\n             } else {<br \/>\n             if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) || 1 == 11) {<br \/>\n             onoroff='on';<br \/>\n             if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  onoroff='off'; }<br \/>\n  \/\/setTimeout(function(){<br \/>\n             \/\/document.body.innerHTML=curdbih.replace(thisaudiooh, \"&lt;a style=display:inline-block; class=processytplay id=\\\"\" + newaudioaid + \"\\\" target=\\\"_blank\\\" title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  this.title+=' ';  this.target='\" + newaudioifid + \"';  if (2 == 2) { document.getElementById('\" + newaudioifid + \"').src=this.href; } } setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100);\\\" href=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/a&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').href + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:none;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;&gt;&lt;\/iframe&gt;\");<br \/>\n        \/\/dbidea.innerHTML=curdbih.replace(thisaudiooh, \"&lt;a style=display:inline-block; class=processytplay id=\\\"\" + newaudioaid + \"\\\" target='\" + newaudioifid + \"\\' title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  this.title+=' ';  this.target='\" + newaudioifid + \"';  if (2 == 2) { document.getElementById('\" + newaudioifid + \"').src=this.href; } } setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100);\\\" href=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/a&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').href + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:none;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;&gt;&lt;\/iframe&gt;\");<br \/>\n             \/\/\/\/dbidea.innerHTML=curdbih.replace(thisaudiooh, \"&lt;div style=display:inline-block; class=processytplay id=\\\"\" + newaudioaid + \"\\\" data-target='\" + newaudioifid + \"\\' data-title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  this.title+=' ';  this.target='\" + newaudioifid + \"';  if (2 == 2) { document.getElementById('\" + newaudioifid + \"').src=this.title; } } setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100);\\\" title=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/div&gt;&lt;div id=idiJUNKvf&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').href + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:none;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;&gt;&lt;\/iframe&gt;&lt;\/div&gt;\");<br \/>\nconsole.warn('34 ' + curdbih.replace(thisaudiooh, \"&lt;div style=display:inline-block; class=processytplay id=\\\"\" + newaudioaid + \"\\\" data-target='\" + newaudioifid + \"\\' data-title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  this.title+=' ';  this.target='\" + newaudioifid + \"';  if (document.getElementById('\" + newaudioifid + \"').src != this.title.trim()) { document.getElementById('\" + newaudioifid + \"').src=this.title.trim(); } } if (9 == 6) { setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100); }\\\" title=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;&lt;iframe title=\\\"\" + thisaudioih + \"\\\" onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').title + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:none;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;height:\" + audioonlyas[iuhg].getBoundingClientRect().height + \"px;&gt;&lt;\/iframe&gt;&lt;textarea rows=4 data-loop='' data-mute='' data-val='' id='inp\" + newaudioaid + \"_\" + newaudioifid + \"' style=background-color:rgb(250,250,250);display:NONE;width:95%;font-size:8px;; type=text onblur=ansis(event); placeholder='Audio control ... P=pause\/play S=stop M=mute U=unmute L=loop ...'  value=''&gt;&lt;\/textarea&gt;&lt;\/div&gt;\" + suffixout));<br \/>\n\/\/if (curdbih.indexOf(thisaudiooh) != -1) { alert(564); }<br \/>\n             \/\/ \/\/ \/\/dbidea.innerHTML=curdbih.replace(thisaudiooh, \"&lt;div style=display:inline-block; class=processytplay id=\\\"\" + newaudioaid + \"\\\" data-target='\" + newaudioifid + \"\\' data-title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  this.title+=' ';  this.target='\" + newaudioifid + \"';  if (2 == 2) { document.getElementById('\" + newaudioifid + \"').src=this.title; } } setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100);\\\" title=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/div&gt;&lt;div id=idiJUNKvf&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').title + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/About_Us.html' style=display:none;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;&gt;&lt;\/iframe&gt;&lt;\/div&gt;\");<br \/>\n             \/\/ dbidea.innerHTML=curdbih.replace(thisaudiooh, \"&lt;div style=display:inline-block; class=processytplay id=\\\"\" + newaudioaid + \"\\\" data-target='\" + newaudioifid + \"\\' data-title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';   } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  this.title+=' ';   if (2 == 2) { document.getElementById('\" + newaudioifid + \"').src=this.title.trim(); } } \\\" title=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {   if (this.src.indexOf('About_Us.') != -1) {  this.src=document.getElementById('\" + newaudioaid + \"').title.trim() + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:inline-block;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;&gt;&lt;\/iframe&gt;&lt;\/div&gt;\");<br \/>\n \/\/     alert(23);<br \/>\n             \/\/sscidea=decodeURIComponent(('' + window.sessionStorage.getItem('_words_' + window.btoa(thisaudioit))).replace(\/^null\/g,'').replace(\/^undefined\/g,''));<br \/>\n \/\/     alert(263);<br \/>\n             \/\/if (sscidea != '') {<br \/>\n \/\/     alert(423);<br \/>\n             \/\/dbidea.innerHTML=curdbih.replace(thisaudiooh, sscidea);<br \/>\n \/\/     alert(1223);<br \/>\n             \/\/} else {<br \/>\n \/\/      alert(823);<br \/>\n            \/\/window.sessionStorage.setItem('_words_' + window.btoa(thisaudioit), encodeURIComponent(\"&lt;!--div style=display:inline-block; class=processytplay id=\\\"\" + newaudioaid + \"\\\" data-target='\" + newaudioifid + \"\\' data-title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';   } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  this.title+=' ';   if (document.getElementById('\" + newaudioifid + \"').src != this.title.trim()) { document.getElementById('\" + newaudioifid + \"').src=this.title.trim(); } } \\\" title=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"--&gt;&lt;iframe data-onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {    if (this.src.indexOf('About_Us.') != -1) {  this.src=document.getElementById('\" + newaudioaid + \"').title.trim() + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:inline-block;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;height:\" + audioonlyas[iuhg].getBoundingClientRect().height + \"px;&gt;&lt;\/iframe&gt;&lt;!--\/div--&gt;\"));<br \/>\n \/\/     alert(923);<br \/>\n\/\/             dbidea.innerHTML=curdbih.replace(thisaudiooh + suffixin, \"&lt;div data-pp='pause' data-ts=\\\"\" + ('' + new Date()) + \"\\\" data-it=\\\"\" + encodeURIComponent(thisaudioit) + \"\\\" data-at='0.0000' data-duration='22223.0000' ontouchstart=onmaybesupclick(event); onmousedown=onmaybesupclick(event); style=display:inline-block; class=processytplay id=\\\"\" + newaudioaid + \"\\\" data-target='\" + newaudioifid + \"\\' data-title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';   } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  document.getElementById('inp\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';   this.title+=' ';   if (document.getElementById('\" + newaudioifid + \"').src != this.title.trim()) { document.getElementById('\" + newaudioifid + \"').src=this.title.trim(); } } \\\" title=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {    if (this.src.replace('c0=off','About_Us.').indexOf('About_Us.') != -1) {  this.src=document.getElementById('\" + newaudioaid + \"').title.trim() + '&rand=' + Math.floor(Math.random() * 1989786);   } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=\" + onoroff + \"&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:inline-block;width:\" + eval(4.2 * audioonlyas[iuhg].getBoundingClientRect().width) + \"px;height:\" + eval(1.2 * audioonlyas[iuhg].getBoundingClientRect().height) + \"px;&gt;&lt;\/iframe&gt;&lt;textarea rows=3 data-loop='' data-val='' id='inp\" + newaudioaid + \"_\" + newaudioifid + \"' style=background-color:rgb(250,250,250);display:inline-block;width:95%;font-size:12px;; type=text onblur=ansis(event); placeholder='Audio control ... P=pause\/play S=stop M=mute U=unmute L=loop ...' value=''&gt;&lt;\/textarea&gt;&lt;div style=display:inline-block; id='ldi\" + newaudioaid + \"'&gt;&lt;!--input type=text style=position:absolute;top:-567px;left:-564px; value=''&gt;&lt;\/input--&gt;&lt;\/div&gt;&lt;\/div&gt;\");<br \/>\n             if (dbidea.innerHTML == audioonlyas[iuhg].outerHTML) {<br \/>\n             <font color=blue>onefound=true;<\/font><br \/>\n             dbidea.innerHTML=(\"&lt;div data-pp='pause' data-ts=\\\"\" + ('' + new Date()) + \"\\\" data-it=\\\"\" + encodeURIComponent(thisaudioit) + \"\\\" data-at='0.0000' data-duration='22223.0000' ontouchstart=onmaybesupclick(event); onmousedown=onmaybesupclick(event); style=display:inline-block; class=processytplay id=\\\"\" + newaudioaid + \"\\\" data-target='\" + newaudioifid + \"\\' data-title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';   } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  document.getElementById('inp\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';   this.title+=' ';   if (document.getElementById('\" + newaudioifid + \"').src != this.title.trim()) { document.getElementById('\" + newaudioifid + \"').src=this.title.trim(); } } \\\" title=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {    if (this.src.replace('c0=off','About_Us.').indexOf('About_Us.') != -1) {  this.src=document.getElementById('\" + newaudioaid + \"').title.trim() + '&rand=' + Math.floor(Math.random() * 1989786);   } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=\" + onoroff + \"&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:inline-block;width:\" + eval(4.2 * audioonlyas[iuhg].getBoundingClientRect().width) + \"px;height:\" + eval(1.2 * audioonlyas[iuhg].getBoundingClientRect().height) + \"px;&gt;&lt;\/iframe&gt;&lt;textarea rows=3 data-loop='' data-mute='' data-val='' id='inp\" + newaudioaid + \"_\" + newaudioifid + \"' style=background-color:rgb(250,250,250);display:inline-block;width:95%;font-size:12px;; type=text onblur=ansis(event); placeholder='Audio control ... P=pause\/play S=stop M=mute U=unmute L=loop ...' value=''&gt;&lt;\/textarea&gt;&lt;div style=display:inline-block; id='ldi\" + newaudioaid + \"'&gt;&lt;!--input type=text style=position:absolute;top:-567px;left:-564px; value=''&gt;&lt;\/input--&gt;&lt;\/div&gt;&lt;\/div&gt;\");<br \/>\n             } else {<br \/>\n             <font color=blue>onefound=true;<\/font><br \/>\n             dbidea.innerHTML=dbidea.innerHTML.replace(audioonlyas[iuhg].outerHTML + suffixin, \"&lt;div data-pp='pause' data-ts=\\\"\" + ('' + new Date()) + \"\\\" data-it=\\\"\" + encodeURIComponent(thisaudioit) + \"\\\" data-at='0.0000' data-duration='22223.0000' ontouchstart=onmaybesupclick(event); onmousedown=onmaybesupclick(event); style=display:inline-block; class=processytplay id=\\\"\" + newaudioaid + \"\\\" data-target='\" + newaudioifid + \"\\' data-title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';   } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  document.getElementById('inp\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';   this.title+=' ';   if (document.getElementById('\" + newaudioifid + \"').src != this.title.trim()) { document.getElementById('\" + newaudioifid + \"').src=this.title.trim(); } } \\\" title=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {    if (this.src.replace('c0=off','About_Us.').indexOf('About_Us.') != -1) {  this.src=document.getElementById('\" + newaudioaid + \"').title.trim() + '&rand=' + Math.floor(Math.random() * 1989786);   } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=\" + onoroff + \"&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:inline-block;width:\" + eval(4.2 * audioonlyas[iuhg].getBoundingClientRect().width) + \"px;height:\" + eval(1.2 * audioonlyas[iuhg].getBoundingClientRect().height) + \"px;&gt;&lt;\/iframe&gt;&lt;textarea rows=3 data-loop='' data-mute='' data-val='' id='inp\" + newaudioaid + \"_\" + newaudioifid + \"' style=background-color:rgb(250,250,250);display:inline-block;width:95%;font-size:12px;; type=text onblur=ansis(event); placeholder='Audio control ... P=pause\/play S=stop M=mute U=unmute L=loop ...' value=''&gt;&lt;\/textarea&gt;&lt;div style=display:inline-block; id='ldi\" + newaudioaid + \"'&gt;&lt;!--input type=text style=position:absolute;top:-567px;left:-564px; value=''&gt;&lt;\/input--&gt;&lt;\/div&gt;&lt;\/div&gt;\");<br \/>\n             }<br \/>\n             if (dbidea.outerHTML.split('&gt;')[0].indexOf('placeforvideo') != -1 || dbidea.outerHTML.split('&gt;')[0].indexOf('areyousinging') != -1) {<br \/>\n               dbidea.style.visibility='visible';<br \/>\n             }<br \/>\n \/\/     alert(9823);<br \/>\n             \/\/}<br \/>\n  \/\/}, 8000);<br \/>\n             } else {<br \/>\n             \/\/document.body.innerHTML=curdbih.replace(thisaudiooh, \"&lt;a class=processytplay id=\\\"\" + newaudioaid + \"\\\" target='\" + newaudioifid + \"\\' title=\\\"\" + thisaudiotitle + \"\\\" onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  this.title+=' ';  this.target='\" + newaudioifid + \"';  document.getElementById('\" + newaudioifid + \"').src=this.href; } setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100);\\\" href=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/a&gt;&lt;div id=idivf&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').href + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/About_Us.html' style=display:none;&gt;&lt;\/iframe&gt;&lt;\/div&gt;\");<br \/>\n\/\/alert(198);<br \/>\n             \/\/ \/\/ dbidea.innerHTML=curdbih.replace(thisaudiooh, \"&lt;a class=processytplay id=\\\"\" + newaudioaid + \"\\\" target='\" + newaudioifid + \"\\' title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  this.title+=' ';  this.target='\" + newaudioifid + \"';  if (document.getElementById('\" + newaudioifid + \"').src != this.href) { document.getElementById('\" + newaudioifid + \"').src=this.href; } } if (9 == 6) { setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank';  },100); }\\\" href=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/a&gt;&lt;div id=idivf&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').href + '&rand=' + Math.floor(Math.random() * 1989786); } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=off&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:none;&gt;&lt;\/iframe&gt;&lt;\/div&gt;\");<br \/>\n\/\/             dbidea.innerHTML=curdbih.replace(thisaudiooh + suffixin, \"&lt;a data-pp='pause' data-ts=\\\"\" + ('' + new Date()) + \"\\\" data-it=\\\"\" + encodeURIComponent(thisaudioit) + \"\\\" data-at='0.0000' data-duration='22223.0000' oncontextmenu=\\\"window.open('\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theNOaid=\" + newaudioaid + \"&theiframeNOid=\" + newaudioifid + \"&thebuttonNOwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=','_blank');\\\" class=processytplay id=\\\"\" + newaudioaid + \"\\\" target='\" + newaudioifid + \"\\' title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  document.getElementById('spn\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';  document.getElementById('inp\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';   if (okdclick) { this.title+=' ';  this.target='\" + newaudioifid + \"';  if (document.getElementById('\" + newaudioifid + \"').src != this.href) { document.getElementById('\" + newaudioifid + \"').src=this.href; this.href=this.href.replace('thebuttonwording=','thatbuttonwording=');  } } } if (9 == 6) { setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100); }\\\" href=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/a&gt;&lt;div id=idivf style=display:inline-block;&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').href + '&rand=' + Math.floor(Math.random() * 1989786);   document.getElementById('\" + newaudioaid + \"').title+=' '; } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=off&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:none;visibility:hidden;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;height:\" + audioonlyas[iuhg].getBoundingClientRect().height + \"px;&gt;&lt;\/iframe&gt;&lt;div id='spn\" + newaudioaid + \"_\" + newaudioifid + \"' style=display:NONE;white-space:pre-line;&gt; &lt;br&gt;&lt;textarea rows=4 data-loop='' data-val='' id='inp\" + newaudioaid + \"_\" + newaudioifid + \"' style=background-color:rgb(250,250,250);display:NONE;width:95%;font-size:8px; type=text onblur=ansis(event); placeholder='Audio control ... P=pause\/play S=stop M=mute U=unmute L=loop ...' value=''&gt;&lt;\/textarea&gt;&lt;\/div&gt;&lt;div style=display:inline-block; id='ldi\" + newaudioaid + \"'&gt;&lt;!--input type=text style=position:absolute;top:-567px;left:-564px; value=''&gt;&lt;\/input--&gt;&lt;\/div&gt;&lt;\/div&gt;\" + suffixout);<br \/>\n             if (dbidea.innerHTML == audioonlyas[iuhg].outerHTML) {<br \/>\n             <font color=blue>onefound=true;<\/font><br \/>\n             dbidea.innerHTML=(\"&lt;a data-pp='pause' data-ts=\\\"\" + ('' + new Date()) + \"\\\" data-it=\\\"\" + encodeURIComponent(thisaudioit) + \"\\\" data-at='0.0000' data-duration='22223.0000' oncontextmenu=\\\"window.open('\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theNOaid=\" + newaudioaid + \"&theiframeNOid=\" + newaudioifid + \"&thebuttonNOwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=','_blank');\\\" class=processytplay id=\\\"\" + newaudioaid + \"\\\" target='\" + newaudioifid + \"\\' title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  document.getElementById('spn\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';  document.getElementById('inp\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';   if (okdclick) { this.title+=' ';  this.target='\" + newaudioifid + \"';  if (document.getElementById('\" + newaudioifid + \"').src != this.href) { document.getElementById('\" + newaudioifid + \"').src=this.href; this.href=this.href.replace('thebuttonwording=','thatbuttonwording=');  } } } if (9 == 6) { setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100); }\\\" href=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/a&gt;&lt;div id=idivf\" + newaudioaid + \" style=display:inline-block;&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').href + '&rand=' + Math.floor(Math.random() * 1989786);   document.getElementById('\" + newaudioaid + \"').title+=' '; } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=off&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:none;visibility:hidden;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;height:\" + audioonlyas[iuhg].getBoundingClientRect().height + \"px;&gt;&lt;\/iframe&gt;&lt;div id='spn\" + newaudioaid + \"_\" + newaudioifid + \"' style=display:NONE;white-space:pre-line;&gt; &lt;br&gt;&lt;textarea rows=4 data-loop='' data-mute='' data-val='' id='inp\" + newaudioaid + \"_\" + newaudioifid + \"' style=background-color:rgb(250,250,250);display:NONE;width:95%;font-size:8px; type=text onblur=ansis(event); placeholder='Audio control ... P=pause\/play S=stop M=mute U=unmute L=loop ...' value=''&gt;&lt;\/textarea&gt;&lt;\/div&gt;&lt;div style=display:inline-block; id='ldi\" + newaudioaid + \"'&gt;&lt;!--input type=text style=position:absolute;top:-567px;left:-564px; value=''&gt;&lt;\/input--&gt;&lt;\/div&gt;&lt;\/div&gt;\" + suffixout);<br \/>\n             } else {<br \/>\n    \/\/ \/\/ \/\/ dbidea.innerHTML=dbidea.innerHTML.replace(audioonlyas[iuhg].outerHTML + suffixin, \"&lt;a data-pp='pause' data-ts=\\\"\" + ('' + new Date()) + \"\\\" data-it=\\\"\" + encodeURIComponent(thisaudioit) + \"\\\" data-at='0.0000' data-duration='22223.0000' oncontextmenu=\\\"window.open('\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theNOaid=\" + newaudioaid + \"&theiframeNOid=\" + newaudioifid + \"&thebuttonNOwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=','_blank');\\\" class=processytplay id=\\\"\" + newaudioaid + \"\\\" target='\" + newaudioifid + \"\\' title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  document.getElementById('spn\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';  document.getElementById('inp\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';   if (okdclick) { this.title+=' ';  this.target='\" + newaudioifid + \"';  if (document.getElementById('\" + newaudioifid + \"').src != this.href) { document.getElementById('\" + newaudioifid + \"').src=this.href; this.href=this.href.replace('thebuttonwording=','thatbuttonwording=');  } } } if (9 == 6) { setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100); }\\\" href=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/a&gt;&lt;div id=idivf\" + newaudioaid + \" style=display:inline-block;&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').href + '&rand=' + Math.floor(Math.random() * 1989786);   document.getElementById('\" + newaudioaid + \"').title+=' '; } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=off&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:none;visibility:hidden;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;height:\" + audioonlyas[iuhg].getBoundingClientRect().height + \"px;&gt;&lt;\/iframe&gt;&lt;div id='spn\" + newaudioaid + \"_\" + newaudioifid + \"' style=display:NONE;white-space:pre-line;&gt; &lt;br&gt;&lt;textarea rows=4 data-loop='' data-mute='' data-val='' id='inp\" + newaudioaid + \"_\" + newaudioifid + \"' style=background-color:rgb(250,250,250);display:NONE;width:95%;font-size:8px; type=text onblur=ansis(event); placeholder='Audio control ... P=pause\/play S=stop M=mute U=unmute L=loop ...' value=''&gt;&lt;\/textarea&gt;&lt;\/div&gt;&lt;div style=display:inline-block; id='ldi\" + newaudioaid + \"'&gt;&lt;!--input type=text style=position:absolute;top:-567px;left:-564px; value=''&gt;&lt;\/input--&gt;&lt;\/div&gt;&lt;\/div&gt;\" + suffixout);<br \/>\n             <font color=blue>onefound=true;<\/font><br \/>\n             dbidea.innerHTML=dbidea.innerHTML.replace(audioonlyas[iuhg].outerHTML + suffixin, \"&lt;a data-pp='pause' data-ts=\\\"\" + ('' + new Date()) + \"\\\" data-it=\\\"\" + encodeURIComponent(thisaudioit) + \"\\\" data-at='0.0000' data-duration='22223.0000' oncontextmenu=\\\"window.open('\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaNOid=\" + newaudioaid + \"&theifrNOameid=\" + newaudioifid + \"&thebuttoNOnwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=','_blank');\\\" class=processytplay id=\\\"\" + newaudioaid + \"\\\" target='\" + newaudioifid + \"\\' title=\\\"\" + thisaudiotitle + \"\\\" data-onmouseover=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {  this.title+=' ';  this.target='\" + newaudioifid + \"'; } \\\" onclick=\\\"if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && this.title == this.title.trim()) {  document.getElementById('spn\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';   document.getElementById('inp\" + newaudioaid + \"_\" + newaudioifid + \"').style.display='inline-block';   if (okdclick) {  this.title+=' ';  this.target='\" + newaudioifid + \"';  if (document.getElementById('\" + newaudioifid + \"').src != this.href) { document.getElementById('\" + newaudioifid + \"').src=this.href; this.href=this.href.replace('thebuttonwording=','thatbuttonwording='); } } } if (9 == 6) { setTimeout(function(){ document.getElementById('\" + newaudioaid + \"').target='_blank'; },100); }\\\" href=\\\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=on&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=\\\" rel=\\\"noopener\\\"&gt;\" + thisaudioih + \"&lt;\/a&gt;&lt;div id=idivf\" + newaudioaid + \" style=display:inline-block;&gt;&lt;iframe onload=\\\"if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"';   if (this.src.indexOf('About_Us.') != -1) { document.getElementById('\" + newaudioaid + \"').target='\" + newaudioifid + \"'; this.src=document.getElementById('\" + newaudioaid + \"').href + '&rand=' + Math.floor(Math.random() * 1989786);  document.getElementById('\" + newaudioaid + \"').title+=' ';  } } \\\" id=\" + newaudioifid + \" name=\" + newaudioifid + \" src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=\" + theytcode + \"&theaid=\" + newaudioaid + \"&theiframeid=\" + newaudioifid + \"&thebuttonwording=\" + encodeURIComponent(thisaudioih.replace(\/\\'\/g,'`') + audioemoji.replace('&lt;sup','&lt;sup id=\"sup' + newaudioaid + '_' + newaudioifid + '\" ')) + \"&justaJUNKudio=&youtube_duration=22223.000&email=&emoji=on&c0=off&i0=\" + spos + \"&j0=\" + altend + \"&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=' style=display:none;visibility:hidden;width:\" + audioonlyas[iuhg].getBoundingClientRect().width + \"px;height:\" + audioonlyas[iuhg].getBoundingClientRect().height + \"px;&gt;&lt;\/iframe&gt;&lt;div id='spn\" + newaudioaid + \"_\" + newaudioifid + \"' style=display:NONE;white-space:pre-line;&gt; &lt;br&gt;&lt;textarea data-loop='' rows=4 data-mute='' data-val='' id='inp\" + newaudioaid + \"_\" + newaudioifid + \"' style=background-color:rgb(250,250,250);display:NONE;width:95%;font-size:8px;  data-loop='' data-mute='' data-val='' type=text onblur=ansis(event); placeholder='Audio control ... P=pause\/play S=stop M=mute U=unmute L=loop ...' value=''&gt;&lt;\/textarea&gt;&lt;\/div&gt;&lt;div style=display:inline-block; id='ldi\" + newaudioaid + \"'&gt;&lt;!--input type=text style=position:absolute;top:-567px;left:-564px; value=''&gt;&lt;\/input--&gt;&lt;\/div&gt;&lt;\/div&gt;\" + suffixout);<br \/>\n             }<br \/>\n             if (dbidea.outerHTML.split('&gt;')[0].indexOf('placeforvideo') != -1 || dbidea.outerHTML.split('&gt;')[0].indexOf('areyousinging') != -1) {<br \/>\n               dbidea.style.visibility='visible';<br \/>\n             }<br \/>\n             }<br \/>\n             }<br \/>\n\/\/ alert(51123);<br \/>\n           } \/\/else {<br \/>\n             \/\/alert('oops');<br \/>\n           \/\/}<br \/>\n         }<br \/>\n         <font color=blue>if (onefound && slow_approach) {<br \/>\n           audioonlyas[iuhg].setAttribute('data-processed', 'y');<br \/>\n           setTimeout(audioytlook, 20000);<br \/>\n           return '';<br \/>\n         }<\/font><br \/>\n       }<br \/>\n    }<br \/>\n    <font color=blue>return '';<\/font><br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; to shore up the work over the last few days regarding that Safari iPhone error &#8230;<\/p>\n<blockquote><p>\nA problem repeatedly occurred with &#8230;\n<\/p><\/blockquote>\n<p> &#8230; we&#8217;re hoping happens less regarding recent WordPress blog postings, such as this one, in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/ytaudioonly.js--------GETME\" rel=\"noopener\">us changing<\/a> external Javascript <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/ytaudioonly.js--------GETME\" rel=\"noopener\">ytaudioonly.js<\/a> external Javascript.<\/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\/audio-stream-of-youtube-video-play-safari-loading-tutorial\/' rel=\"noopener\">Audio Stream of YouTube Video Play Safari Loading Tutorial<\/a>.<\/p-->\n<hr>\n<p id='asytvpstt'>Previous relevant <a target=\"_blank\" title='Audio Stream of YouTube Video Play Safari Title Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/audio-stream-of-youtube-video-play-safari-title-tutorial\/' rel=\"noopener\">Audio Stream of YouTube Video Play Safari Title Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/Mac\/iPhone\/safari_iphone_issue_reappraisal.gif\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Audio Stream of YouTube Video Play Safari Title Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPhone\/safari_iphone_issue_reappraisal.gif\" title=\"Audio Stream of YouTube Video Play Safari Title Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Audio Stream of YouTube Video Play Safari Title Tutorial<\/p><\/div>\n<p>The day after yesterday&#8217;s <a title='Audio Stream of YouTube Video Play Safari Error Tutorial' href='#asytvpset'>Audio Stream of YouTube Video Play Safari Error Tutorial<\/a> was <font size=1>(not <i>only<\/i> today, but)<\/font> a chance to retest the &#8230;<\/p>\n<ul>\n<li>Safari <font size=1>web browser<\/font> &#8230; on &#8230;<\/li>\n<li>iPhone <font size=1>but not iPad, gobsmackingly (of devices that we know of)<\/font><\/li>\n<\/ul>\n<p> &#8230; problem at issue, from yesterday&#8217;s <i>timing<\/i> approach, and discovered two things, with fresh eyes <font size=2>(and nose<\/font><font size=1>, or has Nala just released<\/font><font size=2> &#8230; <a target=\"_blank\" title=\"?\" href='https:\/\/www.rjmprogramming.com.au\/PHP\/TimelineChart\/nala_in_charge.jpg' rel=\"noopener\">Nala<\/a>!!)<\/font> &#8230;<\/p>\n<ol>\n<li>minutes down the line, the problem could still occur &#8230; maybe we were just pushing the problem just further into the future &#8230; and &#8230;<\/li>\n<li>we noticed this weird thing where, rather than crash with the error &#8230;<br \/>\n<blockquote><p>\nA problem repeatedly occurred with &#8230;\n<\/p><\/blockquote>\n<p> &#8230; sometimes, instead, the WordPress blog webpage would redirect to a whole lot of <a target=\"_blank\" title='YouTube' href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> windows derived from stop_start_youtube.html (our inhouse <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">YouTube Embedded iframe API<\/a> interfacer) means by which it opens YouTube videos, briefly, to determine their duration<\/li>\n<\/li>\n<\/ol>\n<p> &#8230; and then it tweaked with us, looking at (the &#8220;grandchild&#8221; level of hierarchy) stop_start_youtube.html code afresh <font size=1>(just with the eyes, <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">that is<\/a><sup>?!<\/sup>)<\/font> that regarding the &#8230;<\/p>\n<blockquote><p>\n<font size=1>[windowObject].document.<\/font>URL\n<\/p><\/blockquote>\n<p> &#8230; attribute, we&#8217;d had to change from <i>top.document.URL<\/i> thinking to <i>parent.parent.document.URL<\/i> thinking.  What if the same reasoning is sometimes needed because there is a conflict of interest when using &#8230;<\/p>\n<blockquote><p>\n<font size=1>[windowObject].document.<\/font>title\n<\/p><\/blockquote>\n<p> &#8230; attribute <font size=1>(which, in terms of <i>top.document.title<\/i> have found immensely useful, in the past, as a repository to place information that can be shared by all hierarchical levels of a web application project, and used a lot, here)<\/font>, up at wherever <i>top<\/i> (as a [windowObject]) points at?  And so we started, conditionally, via &#8230;<\/p>\n<p><code><br \/>\nvar ttt=document;   \/\/sometimes we will use parent.parent.document.title to write to rather than top.document.title<br \/>\nif (window.top) {<br \/>\nttt=top.document;<br \/>\nif (('' + ttt.title).indexOf('External Javascript ') == 0 || ('' + ttt.URL).replace('\/wordpress', '\/ITblog').toLowerCase().indexOf('\/itblog') != -1) {<br \/>\n  ttt=parent.parent.document;<br \/>\n}<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; starting to refer to what was <i>top.document.title<\/i> as <i>ttt.title<\/i> in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html------------------------------------GETME\" rel=\"noopener\">the reworked<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">inhouse YouTube API interfacer<\/a> code.<\/p>\n<p>Implementing this, improved matters a lot!  Yay!!!<\/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\/audio-stream-of-youtube-video-play-safari-title-tutorial\/' rel=\"noopener\">Audio Stream of YouTube Video Play Safari Title Tutorial<\/a>.<\/p-->\n<hr>\n<p id='asytvpset'>Previous relevant <a target=\"_blank\" title='Audio Stream of YouTube Video Play Safari Error Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/audio-stream-of-youtube-video-play-safari-error-tutorial\/' rel=\"noopener\">Audio Stream of YouTube Video Play Safari Error Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/Mac\/iPhone\/sus_safari_iphone.gif\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Audio Stream of YouTube Video Play Safari Error Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPhone\/sus_safari_iphone.gif\" title=\"Audio Stream of YouTube Video Play Safari Error Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Audio Stream of YouTube Video Play Safari Error Tutorial<\/p><\/div>\n<p>Like with <a title='GeoJson World Countries SVG Overlay Safari Error Tutorial' href='#gjwcsvgoset'>GeoJson World Countries SVG Overlay Safari Error Tutorial<\/a> we have another incarnation of the &#8230;<\/p>\n<blockquote><p>\nA problem repeatedly occurred with &#8230;\n<\/p><\/blockquote>\n<p> &#8230; style of erroneous webpage scenario hosting an iframe using that Audio Stream of YouTube Video Play web application logic within some of this WordPress blog&#8217;s postings, but very specifically only using &#8230;<\/p>\n<ul>\n<li>Safari <font size=1>web browser<\/font> &#8230; on &#8230;<\/li>\n<li>iPhone <font size=1>but not iPad, gobsmackingly (of devices that we know of)<\/font><\/li>\n<\/ul>\n<p> &#8230; as we tested <font size=1>(and you should do as many tests as you can over browsers and platforms when you get <i>this<\/i> error <i>in particular<\/i>)<\/font>.<\/p>\n<p>We think, this way, as with the situation below, you can get these errors to do with memory issues when using the browser\/platform combination where it happens.<\/p>\n<p>However, as a programmer you should be curious enough to test and debug for memory leaks, at the very least, in your own code, and any setInterval or setTimeout related abnormalities that may be causing the error.  Luckily, if you have access to &#8230;<\/p>\n<ul>\n<li>iPhone Safari web browser &#8230;<\/li>\n<li>macOS Safari web browser with Developer debugging capabilities &#8230;<\/li>\n<li>Apple white lead that connect these two<\/li>\n<\/ul>\n<p> &#8230; then you can &#8230;<\/p>\n<ul>\n<li>be in Safari web browser at new tabs in both iPhone and macOS (eg. MacAir) &#8230;<\/li>\n<li>connect the two devices with Apple White Lead<\/li>\n<li>on iPhone Safari type in and go to URL where problem is known<\/li>\n<li>on macOS Safari click Developer menu to reach and select the session with offending URL<\/li>\n<li>debug via the Console and Network and Errors and whatever else helps to try to track down issues with the web application, in this environment<\/li>\n<\/ul>\n<p>We think <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/ytaudioonly.js-------GETME\" rel=\"noopener\">us changing<\/a> external Javascript <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/ytaudioonly.js-------GETME\" rel=\"noopener\">ytaudioonly.js<\/a> <font color=blue>this way<\/font> &#8230;<\/p>\n<p><code><br \/>\n  <font color=blue>var oktocheck=true;<\/font><br \/>\n<br \/>\n  function audioytlook() {<br \/>\n    <font color=blue>var isSafari = \/Safari\/.test(navigator.userAgent) && \/Apple Computer\/.test(navigator.vendor);<br \/>\n    if (navigator.userAgent.match(\/iPhone\/i) && oktocheck && isSafari) {<br \/>\n     if (('' + top.document.URL).indexOf('\/external-javascript-') != -1 && ('' + top.document.URL).indexOf('andabit=') != -1) {<br \/>\n     if (document.URL.indexOf('\/karaoke_') == -1) {<br \/>\n      oktocheck=false;<br \/>\n      setTimeout(audioytlook, 180000);<br \/>\n      return '';<br \/>\n     }<br \/>\n     } else if (('' + top.document.URL).indexOf('\/external-javascript-') != -1) {<br \/>\n     if (document.URL.indexOf('\/karaoke_') == -1) {<br \/>\n      oktocheck=false;<br \/>\n      setTimeout(audioytlook, 180000);<br \/>\n      return '';<br \/>\n     }<br \/>\n     }<br \/>\n    }<br \/>\n    oktocheck=false;<\/font><br \/>\n    \/* Rest of function audioytlook is as is, below ... *\/<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; having helped here shows, again, that <i>timing<\/i> can be the issue with this error.  But to know where to time things better will probably be the result of doing this Safari iPhone debugging via macOS Safari web browser Developer menu.<\/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\/audio-stream-of-youtube-video-play-safari-error-tutorial\/' rel=\"noopener\">Audio Stream of YouTube Video Play Safari Error Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcsvgoset'>Previous relevant <a target=\"_blank\" title='GeoJson World Countries SVG Overlay Safari Error Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-svg-overlay-safari-error-tutorial\/' rel=\"noopener\">GeoJson World Countries SVG Overlay Safari Error 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\/countries.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries SVG Overlay Safari Error Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_lime.jpg\" title=\"GeoJson World Countries SVG Overlay Safari Error Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Countries SVG Overlay Safari Error Tutorial<\/p><\/div>\n<p>Mostly on smaller devices (such as an iPhone), but elsewhere as well, but less drastically, this morning, using <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" rel=\"noopener\">our current Display GeoJson Countries web application<\/a> we would get the Safari web browser error &#8230;<\/p>\n<blockquote><p>\nA problem repeatedly occurred with https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\n<\/p><\/blockquote>\n<p> &#8230; with web application work up to yesterday&#8217;s <a title='GeoJson World Countries SVG Overlay Colour Infill Tutorial' href='#gjwcsvgocit'>GeoJson World Countries SVG Overlay Colour Infill Tutorial<\/a>.<\/p>\n<p>On discovering our first solution theory of turning yesterday&#8217;s mapsvg.js external Javascript work into an <a target=\"_blank\" title='Javascript async information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/async_function' rel=\"noopener\"><i>async<\/i><\/a> piece of work made no difference to this situation, we surmised that the huge amount of content held in the Javascript (ie. client side) global variable <i>appendtoinnerHTML<\/i> was causing memory issues.  We couldn&#8217;t shift much to do with the overall amount of &#8220;data&#8221; needing to be handled, in order to implement country SVG colour infilling, but we could shift the data from being &#8230;<\/p>\n<ul>\n<li>client side (external) Javascript held &#8230; to, instead, (have that data) be (determined on the) &#8230;<\/li>\n<li>server side PHP filling in the contents of our (relevant) HTML div id=svgd ahead of the document.body onload event timing &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n$icnt=0;<br \/>\n<br \/>\nfunction apptohtmstuff($coordsare, $origc) {<br \/>\n  global $icnt;<br \/>\n  $minl=-1;<br \/>\n  $mint=-1;<br \/>\n  $maxl=-1;<br \/>\n  $maxt=-1;<br \/>\n  $zysare=explode(',', $coordsare);<br \/>\n  $svgcis='';<br \/>\n  for ($ij=0; $ij&lt;sizeof($zysare); $ij+=2) {<br \/>\n    if ($minl &lt; 0) {<br \/>\n      $minl=$zysare[$ij];<br \/>\n      $maxl=$zysare[$ij];<br \/>\n      $mint=$zysare[1 + $ij];<br \/>\n      $maxt=$zysare[1 + $ij];<br \/>\n    } else {<br \/>\n      if ($zysare[$ij] &lt; $minl) { $minl=$zysare[$ij];  }<br \/>\n      if ($zysare[$ij] &gt; $maxl) { $maxl=$zysare[$ij];  }<br \/>\n      if ($zysare[1 + $ij] &lt; $mint) { $mint=$zysare[1 + $ij];  }<br \/>\n      if ($zysare[1 + $ij] &gt; $maxt) { $maxt=$zysare[1 + $ij];  }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  for ($ij=0; $ij&lt;sizeof($zysare); $ij+=2) {<br \/>\n    if ($svgcis == '') {<br \/>\n      $svgcis='' . ($zysare[$ij] - $minl) . ',' . ($zysare[1 + $ij] - $mint);<br \/>\n    } else {<br \/>\n      $svgcis.=' ' . ($zysare[$ij] - $minl) . ',' . ($zysare[1 + $ij] - $mint);<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  $icnt++;<br \/>\n  return '&lt;div title=\"' . $coordsare . '\" id=\"dsa' . (-1 + $icnt) . '\" style=\"position:absolute;left:' . $minl . 'px;top:' . $mint . 'px;width:' . ($maxl - $minl) . 'px;height:' . ($maxt - $mint) . ';display:BLOCK;z-index:24;\"&gt;&lt;svg height=\"100%\" width=\"100%\"&gt;&lt;polygon points=\"' . $svgcis . '\" style=\"fill:lime;stroke:purple;stroke-width:1\"&gt;&lt;\/polygon&gt;&lt;\/svg&gt;&lt;\/div&gt;';<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; meaning the web application&#8217;s underlying HTML size increased at the expense of no need for external Javascript involvement any more<\/li>\n<\/ul>\n<p> &#8230;  in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php----GETME\" title=\"countries.php\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php----GETME\" title=\"countries.php\" rel=\"noopener\">countries.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"Click picture\" rel=\"noopener\">web application<\/a> you can <a href='#countriesif'>also try below<\/a>.<\/p>\n<p>We&#8217;re not exactly sure why, but &#8230;<\/p>\n<ul>\n<li>this improved web application stability &#8230;<br \/>\n<img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_iphone.jpg'><\/img><br \/>\n &#8230;everywhere &#8230; and an idea we&#8217;d ditched yesterday of &#8230;<\/li>\n<li>idea to pre-colour &#8220;land&#8221; parts of the world GeoJson map green (ahead of the document.body onload event) also came good (after causing problems yesterday)<\/li>\n<\/ul>\n<p> &#8230; meaning now, &#8220;overlay&#8221; wise, <font color=blue>we could say<\/font> &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-svg-overlay-colour-infill-tutorial\/'>\n<ul>\n<li>document.body lowest level &#8230;<\/li>\n<li>overlayed by HTML canvas element plotted with world country linework &#8230;<\/li>\n<li>overlayed by HTML img (transparent image) element and its associated image map area elements &#8230; and today we add into the mix &#8230;<\/li>\n<li>HTML div hosting <a target=\"_blank\" title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp' rel=\"noopener\">SVG<\/a> elements overlay<font color=blue><strike>ing<\/strike> initialized with &#8220;land&#8221; parts green infilled SVG at a mid range z-index<\/font> (<font color=blue><strike>only<\/strike> as well as<\/font> when called upon) individual GeoJson entities overlay<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; and we (reckon we&#8217;ve) improved the colour coding user experience at the same time.<\/p>\n<p>We noticed that tweaks in the changed &#8230;<\/p>\n<p><code><br \/>\nvar lastflagged='', appendtoinnerHTML='', waitplease=false; \/\/ used to make sure \"area\" element onclick code precedes any document.body onmousedown or ontouchdown code<br \/>\n<br \/>\nfunction checkdsa(ath) {<br \/>\n  waitplease=true;<br \/>\n  var wasih='';<br \/>\n  var athcoords=('' + ath.coords); \/\/.substring(0, Math.floor(eval(0.1 * ('' + ath.coords).length)));<br \/>\n  if (document.getElementById('svgd').innerHTML.indexOf(('' + athcoords)) != -1) {<br \/>\n    wasih='&lt;div title=' + String.fromCharCode(34) + '' + ath.coords + document.getElementById('svgd').innerHTML.split(ath.coords)[1].split('&lt;div ')[0];<br \/>\n    if (lastflagged == '') {<br \/>\n    if (wasih.indexOf(' id=' + String.fromCharCode(34)) != -1) { lastflagged=wasih.split(' id=' + String.fromCharCode(34))[1].split(String.fromCharCode(34))[0]; } else { lastflagged=''; }<br \/>\n    } else {<br \/>\n    document.getElementById(lastflagged).innerHTML=document.getElementById(lastflagged).innerHTML.replace(\/rgba\\(255\\,87\\,51\\,0.5\\)\/g, 'rgba(200,200,200,0.3)');<br \/>\n    if (wasih.indexOf(' id=' + String.fromCharCode(34)) != -1) { lastflagged=wasih.split(' id=' + String.fromCharCode(34))[1].split(String.fromCharCode(34))[0]; } else { lastflagged=''; }<br \/>\n    }<br \/>\n    if (lastflagged != '') {<br \/>\n    document.getElementById(lastflagged).innerHTML=document.getElementById(lastflagged).innerHTML.replace('z-index:24;', 'z-index:123;').replace('lime;', 'rgba(255,87,51,0.5);');<br \/>\n    document.getElementById(lastflagged).title=ath.title;<br \/>\n    } else {<br \/>\n    document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(wasih, '&lt;div title=' + String.fromCharCode(34) + '' + ath.title + wasih.split(ath.coords)[1].split('&lt;div ')[0].replace('none;', 'block;z-index:123;').replace('lime;', 'rgba(255,87,51,0.5);'));<br \/>\n    }<br \/>\n  } else if (('' + appendtoinnerHTML).indexOf(('' + athcoords)) != -1) {<br \/>\n    if (document.getElementById('svgd').innerHTML.indexOf(' title=' + String.fromCharCode(34) + '' + ath.title + '' + String.fromCharCode(34) + '') != -1) {<br \/>\n    document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(\/rgba\\(255\\,87\\,51\\,0.5\\)\/g, 'rgba(200,200,200,0.3)');<br \/>\n    document.getElementById('svgd').innerHTML+='&lt;div title=' + String.fromCharCode(34) + '' + ath.title + appendtoinnerHTML.split(ath.coords)[1].split('&lt;div ')[0].replace('none;', 'block;z-index:123;').replace(\/\\ id\\=\/g, ' data-id=').replace('lime;', 'rgba(255,87,51,0.5);');<br \/>\n    } else {<br \/>\n    document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(\/rgba\\(255\\,87\\,51\\,0.5\\)\/g, 'rgba(200,200,200,0.3)');<br \/>\n    document.getElementById('svgd').innerHTML+='&lt;div title=' + String.fromCharCode(34) + '' + ath.title + appendtoinnerHTML.split(ath.coords)[1].split('&lt;div ')[0].replace('none;', 'block;z-index:123;').replace('lime;', 'rgba(255,87,51,0.5);');<br \/>\n    }<br \/>\n  }<br \/>\n  waitplease=false;<br \/>\n  return '';<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; also lessened the burden on the client side by only asking any Javascript DOM command operations act on single HTML element at a time, not a whole swathe of hosted ones, in any operation.<\/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\/new-geojson-world-countries-svg-overlay-colour-infill-tutorial\/' rel=\"noopener\">New GeoJson World Countries SVG Overlay Colour Infill Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='gjwcsvgocit'>Previous relevant <a target=\"_blank\" title='GeoJson World Countries SVG Overlay Colour Infill Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-svg-overlay-colour-infill-tutorial\/' rel=\"noopener\">GeoJson World Countries SVG Overlay Colour Infill Tutorial<\/a> is shown below.<\/p>\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"GeoJson World Countries SVG Overlay Colour Infill Tutorial\"]<a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries SVG Overlay Colour Infill Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countriessvg.jpg\" title=\"GeoJson World Countries SVG Overlay Colour Infill Tutorial\"  style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>The \"overlay\" situation as of yesterday's <a title='GeoJson World Countries Geo Chart Tutorial' href='#gjwcgct'>GeoJson World Countries Geo Chart Tutorial<\/a> was ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>document.body lowest level ...<\/li>\n\n\n\n\n<li>overlayed by HTML canvas element plotted with world country linework ...<\/li>\n\n\n\n\n<li>overlayed by HTML img (transparent image) element and its associated image map area elements ... and today we add into the mix ...<\/li>\n\n\n\n\n<li>HTML div hosting <a target=\"_blank\" title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp' rel=\"noopener\">SVG<\/a> elements overlaying (only when called upon) individual GeoJson entities overlay<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p>What can this achieve?  The GeoJson can become more user friendly via colour coding ...<\/li>\n\n\n\n\n\n<ul>\n\n\n<li>country linework is black and background colour is white to start with ... and ...<\/li>\n\n\n\n\n<li>as a user clicks an individual GeoJson entity the canvas element has a plotting circle created at a <a target=\"_blank\" title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp' rel=\"noopener\">z-index<\/a> below that of ...<\/li>\n\n\n\n\n<li>overlayed new div and SVG element initialized to <span style='color:rgba(255,87,51,0.5);'>infill colour<\/span> rgba(255,87,51,0.5) while any other previous infills become <span style='color:rgba(200,200,200,0.3);'>dimmer infill colour<\/span> rgba(200,200,200,0.3) ... the transparency of which allows the canvas plotting circle to show through<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p> ... helping contextualize in other \"drilled into\" maps presented, in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php---GETME\" title=\"countries.php\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php---GETME\" title=\"countries.php\" rel=\"noopener\">countries.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"Click picture\" rel=\"noopener\">web application<\/a> you can <a href='#countriesif'>also try below<\/a>, now helped out by <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mapsvg.js--GETME\" title=\"mapsvg.js\" rel=\"noopener\">the tweaked<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mapsvg.js--GETME\" title=\"mapsvg.js\" rel=\"noopener\">mapsvg.js<\/a> external Javascript helper last talked about at <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-map-element-svg-context-google-search-tutorial\/' title='HTML Map Element SVG Context Google Search Tutorial' rel=\"noopener\">HTML Map Element SVG Context Google Search Tutorial<\/a>.  Its analysis of existent HTML webpage image map area subelements is called via a new Javascript function ...<\/p>\n\n\n\n<code>\nfunction checkdsa(ath) {\n  if (('' + appendtoinnerHTML).indexOf(('' + ath.coords)) != -1) {\n    if (document.getElementById('svgd').innerHTML.indexOf(' title=' + String.fromCharCode(34) + '' + ath.title + '' + String.fromCharCode(34) + '') != -1) {\n    document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(\/rgba\\(255\\,87\\,51\\,0.5\\)\/g, 'rgba(200,200,200,0.3)');\n    document.getElementById('svgd').innerHTML+='&lt;div title=' + String.fromCharCode(34) + '' + ath.title + appendtoinnerHTML.split(ath.coords)[1].split('&lt;div ')[0].replace('none;', 'block;z-index:123;').replace(\/\\ id\\=\/g, ' data-id=').replace('lime;', 'rgba(255,87,51,0.5);');\n    } else {\n    document.getElementById('svgd').innerHTML=document.getElementById('svgd').innerHTML.replace(\/rgba\\(255\\,87\\,51\\,0.5\\)\/g, 'rgba(200,200,200,0.3)');\n    document.getElementById('svgd').innerHTML+='&lt;div title=' + String.fromCharCode(34) + '' + ath.title + appendtoinnerHTML.split(ath.coords)[1].split('&lt;div ')[0].replace('none;', 'block;z-index:123;').replace('lime;', 'rgba(255,87,51,0.5);');\n    }\n  }\n}\n<\/code>  \n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-svg-overlay-colour-infill-tutorial\/' rel=\"noopener\">GeoJson World Countries SVG Overlay Colour Infill Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcgct'>Previous relevant <a target=\"_blank\" title='GeoJson World Countries Geo Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-geo-chart-tutorial\/' rel=\"noopener\">GeoJson World Countries Geo Chart 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\/countries.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries Geo Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_geo_chartmore.jpg\" title=\"GeoJson World Countries Geo Chart Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Countries Geo Chart Tutorial<\/p><\/div>\n<p>There are many advantages regarding today&#8217;s task to &#8230;<\/p>\n<blockquote><p>\nIntegrate <a 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.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Chart<\/a> <a title=\"Google Chart Geo Chart information from Google\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart\" target=\"_blank\" rel=\"noopener\">Geo Chart<\/a>\n<\/p><\/blockquote>\n<p> &#8230; as an additional &#8220;drill down&#8221; map option, functionality adding onto the work of yesterday&#8217;s <a title='GeoJson World Countries Tutorial' href='#gjwct'>GeoJson World Countries Tutorial<\/a>.<\/p>\n<p>What deducible data item needs to be determined for these Geo Charts to work?  We need a way to deduce ISO-2 character country codes from the ISO-3 character codes existing in the GeoJson &#8220;countries.geojson&#8221; data from yesterday&#8217;s work.  We happened upon the <a target=\"_blank\" title='Useful link' href='http:\/\/gist.github.com\/tadast\/8827699' rel=\"noopener\">extremely generous mapping data webpage<\/a> <font color=blue>to help with these ISO-2 character deductions<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$geojsonis=file_get_contents('countries.geojson');<br \/>\n$parts=explode(\"]]\", $geojsonis);<br \/>\n$globalattr=\"\";<br \/>\n<font color=blue>$mappings=file_get_contents('ht<\/font><font color=blue>tp:\/\/gist.github.com\/tadast\/8827699');  \/\/ thanks<br \/>\nif (strpos($mappings, '&gt;IN&lt;\/td&gt;') !== false) {<br \/>\n  $mappings.='&lt;td&gt;IN&lt;\/td&gt;&lt;td&gt;KAS&lt;\/td&gt;&lt;td&gt;EH&lt;\/td&gt;&lt;td&gt;SAH&lt;\/td&gt;&lt;td&gt;SO&lt;\/td&gt;&lt;td&gt;SOL&lt;\/td&gt;&lt;td&gt;SS&lt;\/td&gt;&lt;td&gt;SDS&lt;\/td&gt;&lt;td&gt;XK&lt;\/td&gt;&lt;td&gt;KOS&lt;\/td&gt;&lt;td&gt;CY&lt;\/td&gt;&lt;td&gt;CYN&lt;\/td&gt;&lt;\/body&gt;';<br \/>\n}<\/font><br \/>\n<br \/>\nfor ($i=0; $i&lt;(-1 + sizeof($parts)); $i++) {<br \/>\n  if (strpos($parts[$i], '\"sr_sov_a3\":\"') !== false) {<br \/>\n    $globalattr=' data-iso3=\"' . explode('\"', explode('\"sr_sov_a3\":\"', $parts[$i])[1])[0] . '\"';<br \/>\n    if (strpos($mappings, '&gt;' . explode('\"', explode('\"sr_sov_a3\":\"', $parts[$i])[1])[0] . '&lt;\/td&gt;') !== false) {<br \/>\n      $iparts=explode('&gt;' . explode('\"', explode('\"sr_sov_a3\":\"', $parts[$i])[1])[0] . '&lt;\/td&gt;', $mappings);<br \/>\n      $globalattr.=' data-iso2=\"' . explode('&gt;', explode('&lt;\/td&gt;', $iparts[0])[-2 + sizeof(explode('&lt;\/td&gt;', $iparts[0]))])[-1 + sizeof(explode('&gt;', explode('&lt;\/td&gt;', $iparts[0])[-2 + sizeof(explode('&lt;\/td&gt;', $iparts[0]))]))] . '\"';<br \/>\n    } else if (substr(explode('\"', explode('\"sr_sov_a3\":\"', $parts[$i])[1])[0],-1,1) &gt;= '0' && substr(explode('\"', explode('\"sr_sov_a3\":\"', $parts[$i])[1])[0],-1,1) &lt;= '9') {<br \/>\n      $globalattr.=' data-iso2=\"' . substr(explode('\"', explode('\"sr_sov_a3\":\"', $parts[$i])[1])[0],0,2) . '\"';<br \/>\n    }<br \/>\n  }<br \/>\n  if (strpos($parts[$i], '\"sr_subunit\":\"') !== false) {<br \/>\n    $globalattr.=' data-cname=\"' . explode('\"', explode('\"sr_subunit\":\"', $parts[$i])[1])[0] . '\"';<br \/>\n  }<br \/>\n  $coords=str_replace('[','',str_replace(']','',explode('[[' , $parts[$i])[-1 + sizeof(explode('[[' , $parts[$i]))]));<br \/>\n  $newcoords=$coords;<br \/>\n  if (!$dolatlong || 1 == 1) {<br \/>\n  $lls=explode(\",\", $coords);<br \/>\n  $newcoords=\"\";<br \/>\n  for ($j=0; $j&lt;sizeof($lls); $j+=2) {<br \/>\n  $lls[$j]=($lls[$j] + $longoff) * $factor;<br \/>\n  $lls[$j + 1]=($lls[$j + 1] + $latoff) * $factor;<br \/>\n  if ($newcoords != \"\") { $newcoords.=\",\";  $htmlis=str_replace(\"}\", \" context.lineTo(\" . $lls[$j] . ',' . ((180.0 * $factor) - $lls[$j + 1]) . \"); \\n}\", $htmlis);  } else { $htmlis=str_replace(\"}\", \" context.stroke(); \\n context.beginPath(); \\n context.moveTo(\" . $lls[$j] . ',' . ((180.0 * $factor) - $lls[$j + 1]) . \"); \\n}\", $htmlis); }<br \/>\n  $newcoords.='' . $lls[$j] . ',' . ((180.0 * $factor) - $lls[$j + 1]);<br \/>\n  }<br \/>\n  }<br \/>\n  $abit.=\"&lt;area\" . $globalattr . \" onclick=\\\"ouralert(this.getAttribute('data-cname'),this.getAttribute('data-iso3'),this.getAttribute('data-iso2'),'Longitude,Latitude coordinates are \" . $coords . \"');\\\" shape='poly' coords='\" . $newcoords . \"'&gt;&lt;\/area&gt;\\n\";<br \/>\n  \/\/echo \"&lt;area type='poly' coords='\" . $newcoords . \"'&gt;&lt;\/area&gt;\\n\";<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; in our image map area elements PHP creation code above.  As you can see, extra &#8220;intelligence&#8221;, moving forward, is contained in area element <a target=\"_blank\" href='https:\/\/www.w3schools.com\/tags\/att_global_data.asp' title='Global data attributes information from W3schools' rel=\"noopener\">global data attributes<\/a>.<\/p>\n<p>Which leaves us with why any of this helps functionality within <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php--GETME\" title=\"countries.php\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php--GETME\" title=\"countries.php\" rel=\"noopener\">countries.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"Click picture\" rel=\"noopener\">web application<\/a> you can <a href='#countriesif'>also try below<\/a>?<\/p>\n<ul>\n<li>Geo Chart can zoom into a country view &#8230;<\/li>\n<li>Geo Chart can involve emoji (&#127968; &amp;127968;) or image (SVG) circle based symbology for the &#8220;User Clicked Place&#8221; and nearby TimeZone places respectively &#8230;<\/li>\n<li>all these symbols can be clicked to open popup windows containing TimeZone Place <a target=\"_blank\" title='Wikipedia ... thanks' href='http:\/\/wikipedia.org' rel=\"noopener\">Wikipedia<\/a> webpages of relevance &#8230;<\/li>\n<li>an emoji national flag (eg. Zambia &#8220;ZA&#8221; could be used to derive &amp;#127487;&amp;#127462; &#127487;&#127462; flag emoji) derived from those ISO-2 character codes can supplement the GeoJson (more ISO-3 character based) names presented in the underlying data, in the Geo Chart title &#8230;<\/li>\n<li>contextualizing the accompanying Map Chart &#8230; and &#8230;<\/li>\n<li>vice versa regarding hovering over symbology (which works on Map Chart, but not Geo Chart) &#8230;<\/li>\n<li>within the Map Chart iframe a &#8220;Geo&#8221; link can glean a &#8220;zoomed out&#8221; world Geo Chart view of your TimeZone places<\/li>\n<\/ul>\n<p>And feel free to (re-)try <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php---GETME\" title=\"regions.php\" rel=\"noopener\">our tweaked &#8220;to make thinner the coastline linework&#8221;<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php---GETME\" title=\"regions.php\" rel=\"noopener\">regions.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\" rel=\"noopener\">GeoJson PHP web application<\/a> in a new window, or you can <a href='#regionsif'>also try below<\/a>.<\/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\/geojson-world-countries-geo_chart-tutorial\/' rel=\"noopener\">GeoJson World Countries Geo Chart Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwct'>Previous relevant <a target=\"_blank\" title='GeoJson World Countries Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-countries-tutorial\/' rel=\"noopener\">GeoJson World Countries 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\/countries.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Countries Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries_ontop.jpg\" title=\"GeoJson World Countries Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Countries Tutorial<\/p><\/div>\n<p>Know your GeoJson!  Yes, pretty obviously, any two GeoJson datasets might display the same in that &#8220;map plotting&#8221; sense, but one might have different and\/or more &#8220;intelligence&#8221; than the other.  Often, an XML has more &#8220;intelligence&#8221; than equivalent HTML (barring the use of global data attributes, <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">that is<\/a>), as today&#8217;s <strike>Corolla<\/strike>corollary.<\/p>\n<p>And so, moving on from yesterday&#8217;s <a title='GeoJson World Coastline TimeZone Tutorial' href='#gjwctzt'>GeoJson World Coastline TimeZone Tutorial<\/a>, today, we present a new GeoJson <a target=\"_blank\" href='https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_50m_admin_0_scale_rank.geojson' rel=\"noopener\">admin 0 countries we download, and upload as &#8220;countries.geojson&#8221;<\/a> data set, again via the excellent <a target=\"_blank\" title='http:\/\/geojson.xyz\/' href='http:\/\/geojson.xyz\/' rel=\"noopener\">HTTP:\/\/geojson.xyz\/<\/a> repository, thanks.<\/p>\n<p>From it, we do get a <font color=blue>different JSON additional &#8220;intelligence&#8221;<\/font> &#8230;<\/p>\n<p><code><br \/>\n{\"type\":\"FeatureCollection\",\"features\":[{\"type\":\"Feature\"<font color=blue>,\"properties\":{\"scalerank\":1,\"labelrank\":1,\"sr_sov_a3\":\"ZWE\",\"sr_adm0_a3\":\"ZWE\",\"sr_gu_a3\":\"ZWE\",\"sr_su_a3\":\"ZWE\",\"sr_subunit\":\"Zimbabwe\",\"featureclass\":\"Admin-0 scale ranks\"}<\/font>,\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[31.287890625000017,-22.40205078125001],[31.197265625,-22.34492187500001],[31.07343750000001,-22.30781250000001],[30.916113281250006,-22.29072265625001],[30.71162109375001,-22.2978515625],[30.46015625000001,-22.32900390625001],[30.1904296875,-22.291113281250006],[29.90234375,-22.184179687500006],[29.6630859375,-22.146289062500003],[29.37744140625,-22.19277343750001],[29.36484375,-22.193945312500006],[29.315234375000017,-22.15771484375],[29.237207031250023,-22.07949218750001],[29.106835937500023,-22.065722656250003],[29.07148437500001,-22.047460937500006],[29.042382812500023,-22.018359375],[29.023339843750023,-21.98125],[29.01582031250001,-21.93994140625],[29.03730468750001,-21.811328125],[29.02558593750001,-21.796875],[28.99072265625,-21.78144531250001],[28.919335937500023,-21.766015625],[28.74775390625001,-21.707617187500006],[28.532031250000017,-21.65126953125001],[28.181640625,-21.58935546875],[28.04560546875001,-21.573046875],[28.014062500000023,-21.55419921875],[27.974609375,-21.50673828125001],[27.90742187500001,-21.35908203125001],[27.844140625000023,-21.261523437500003],[27.693457031250006,-21.11103515625001],[27.66943359375,-21.064257812500003],[27.67695312500001,-20.94482421875],[27.688085937500006,-20.84833984375001],[27.70429687500001,-20.76640625],[27.69697265625001,-20.689746093750003],[27.69482421875,-20.59453125],[27.699609375000023,-20.53066406250001],[27.679296875,-20.503027343750006],[27.624609375,-20.48359375000001],[27.46894531250001,-20.47480468750001],[27.28076171875,-20.47871093750001],[27.27460937500001,-20.3818359375],[27.256738281250023,-20.23203125],[27.221484375000017,-20.145800781250003],[27.17822265625,-20.10097656250001],[27.091796875,-20.05419921875],[26.91669921875001,-19.99013671875001],[26.67822265625,-19.89277343750001],[26.474609375,-19.748632812500006],[26.241015625000017,-19.5693359375],[26.168066406250006,-19.53828125000001],[26.081933593750023,-19.369921875],[25.95068359375,-19.08173828125001],[25.95917968750001,-18.985644531250003],[25.939355468750023,-18.93867187500001],[25.811914062500023,-18.79707031250001],[25.78369140625,-18.72353515625001],[25.76123046875,-18.64921875],[25.55830078125001,-18.441796875],[25.4892578125,-18.35126953125001],[25.43671875000001,-18.234960937500006],[25.384375,-18.14199218750001],[25.340234375000023,-18.1044921875],[25.28242187500001,-18.04121093750001],[25.242285156250006,-17.969042968750003],[25.224023437500023,-17.91523437500001],[25.239062500000017,-17.843066406250003],[25.2587890625,-17.793554687500006],[25.451757812500006,-17.84511718750001],[25.55712890625,-17.84951171875001],[25.6396484375,-17.82412109375001],[25.741601562500023,-17.858203125],[25.86328125,-17.951953125],[25.995898437500017,-17.969824218750006],[26.139550781250023,-17.91171875],[26.333398437500023,-17.929296875],[26.577539062500023,-18.022558593750006],[26.779882812500006,-18.04150390625],[27.020800781250017,-17.95839843750001],[27.235742187500023,-17.728320312500003],[27.437890625000023,-17.51191406250001],[27.63671875,-17.262109375],[27.75654296875001,-17.060351562500003],[27.932226562500006,-16.89619140625001],[28.16376953125001,-16.76972656250001],[28.399804687500023,-16.66279296875001],[28.760644531250023,-16.53193359375001],[28.760546875000017,-16.53212890625001],[28.83271484375001,-16.424121093750003],[28.856738281250017,-16.30615234375],[28.856738281250017,-16.14228515625001],[28.875585937500006,-16.0361328125],[28.9130859375,-15.98779296875],[28.973046875000023,-15.950097656250009],[29.050585937500017,-15.901171875],[29.287890625000017,-15.776464843750006],[29.4873046875,-15.69677734375],[29.729589843750006,-15.644628906250006],[29.994921875000017,-15.64404296875],[30.25068359375001,-15.643457031250009],[30.39609375,-15.64306640625],[30.39814453125001,-15.80078125],[30.409375,-15.978222656250011],[30.437792968750017,-15.995312500000011],[30.630175781250017,-15.999218750000011],[30.938769531250017,-16.01171875],[31.236230468750023,-16.02363281250001],[31.426171875000023,-16.15234375],[31.48984375,-16.1796875],[31.687597656250006,-16.214160156250003],[31.939843750000023,-16.428808593750006],[32.243261718750006,-16.44873046875],[32.45195312500002,-16.515722656250006],[32.635839843750006,-16.589453125],[32.741796875,-16.67763671875001],[32.81025390625001,-16.69765625],[32.902929687500006,-16.704199218750006],[32.94804687500002,-16.71230468750001],[32.93789062500002,-16.775976562500006],[32.87626953125002,-16.88359375],[32.884375,-17.03779296875001],[32.969335937500006,-17.2515625],[32.98076171875002,-17.4375],[32.9546875,-17.765429687500003],[32.95556640625,-18.08291015625001],[32.96464843750002,-18.1962890625],[32.978515625,-18.271484375],[32.99638671875002,-18.312597656250006],[32.99306640625002,-18.35957031250001],[32.942480468750006,-18.49267578125],[32.90166015625002,-18.632910156250006],[32.90029296875002,-18.6890625],[32.88457031250002,-18.728515625],[32.8544921875,-18.763671875],[32.72197265625002,-18.828417968750003],[32.69921875,-18.868457031250003],[32.69970703125,-18.94091796875],[32.71650390625001,-19.00185546875001],[32.766210937500006,-19.02431640625001],[32.826171875,-19.05878906250001],[32.84980468750001,-19.10439453125001],[32.85,-19.152441406250006],[32.83095703125002,-19.24140625000001],[32.77763671875002,-19.388769531250006],[32.83076171875001,-19.558203125],[32.89042968750002,-19.668066406250006],[32.97265625,-19.79541015625],[33.00673828125002,-19.873828125],[33.0048828125,-19.93017578125],[32.992773437500006,-19.98486328125],[32.86962890625,-20.2171875],[32.780859375,-20.36152343750001],[32.67255859375001,-20.51611328125],[32.529296875,-20.613085937500003],[32.49238281250001,-20.659765625],[32.477636718750006,-20.712988281250006],[32.48281250000002,-20.82890625],[32.476171875,-20.95009765625001],[32.353613281250006,-21.136523437500003],[32.429785156250006,-21.29707031250001],[32.41240234375002,-21.311816406250003],[32.37109375,-21.33486328125001],[32.19472656250002,-21.515429687500003],[32.01630859375001,-21.698046875],[31.88593750000001,-21.83154296875],[31.737695312500023,-21.9833984375],[31.57148437500001,-22.15351562500001],[31.429492187500017,-22.298828125],[31.287890625000017,-22.40205078125001]]]}}<br \/>\n<\/code><\/p>\n<p> &#8230; and &#8220;mapping look&#8221; because country borders are added in, and some JSON attributes we can call on to allow for &#8230;<\/p>\n<ul>\n<li>the similar  <a 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.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Chart<\/a> <a title=\"Google Chart Map Chart information from Google\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map\" target=\"_blank\" rel=\"noopener\">Map Chart<\/a> maps introduced yesterday into the user interaction mix &#8230; as well as &#8230;<\/li>\n<li><a target=\"_blank\" title='Wikipedia ... thanks' href='http:\/\/wikipedia.org' rel=\"noopener\">Wikipedia<\/a>, thanks, webpage lookup possibilities calling on those new GeoJson property attributes presented within the dataset above<\/li>\n<\/ul>\n<p>We enable this, as we just add in some Javascript popup window type equals &#8220;prompt&#8221; to the existant &#8220;confirm&#8221; and &#8220;alert&#8221; logic of yesterday.<\/p>\n<p>Feel free to try <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php-GETME\" title=\"countries.php\" rel=\"noopener\">the how we got there<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php-GETME\" title=\"countries.php\" rel=\"noopener\">regions.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\" title=\"GeoJson PHP web application\" rel=\"noopener\">GeoJson PHP World Countries web application<\/a> in a new window, or below &#8230;<\/p>\n<p><iframe id=countriesif style='width:100%;height:600px;' src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/countries.php\"><\/iframe><\/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\/geojson-world-countries-tutorial\/' rel=\"noopener\">GeoJson World Countries Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwctzt'>Previous relevant <a target=\"_blank\" title='GeoJson World Coastline TimeZone Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-coastline-timezone-tutorial\/' rel=\"noopener\">GeoJson World Coastline TimeZone 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\/regions.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Coastline TimeZone Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_tz.jpg\" title=\"GeoJson World Coastline TimeZone Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Coastline TimeZone Tutorial<\/p><\/div>\n<p>Luckily for programmers all over, the organization of TimeZones has had an International flavour in its development and maintenance.  As such, given the &#8220;purely coastline&#8221; GeoJson data involved in our fledgling PHP web application of yesterday&#8217;s <a title='GeoJson World Coastline Primer Tutorial' href='#gjwcpt'>GeoJson World Coastline Primer Tutorial<\/a> a useful arrangement for improvement involves &#8230;<\/p>\n<ul>\n<li>document.body onclick event co-ordinates &#8230; able to be converted to &#8230;<\/li>\n<li>longitude, latitude <font size=1>(easily, only because of our simplistic map projection, of course)<\/font> &#8230; onfed to &#8230;<\/li>\n<li>our inhouse <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\" rel=\"noopener\">&#8220;TimeZone Places&#8221; web application<\/a> PHP helper<\/li>\n<\/ul>\n<p> &#8230; can have us helping out your curious web &#8220;clicking&#8221; user with the 3 nearest TimeZone places, as a reference as to where they are &#8220;clicking&#8221; in the world.<\/p>\n<p>Feel free to try <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php-GETME\" title=\"regions.php\" rel=\"noopener\">our improved<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php-GETME\" title=\"regions.php\" rel=\"noopener\">regions.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\" rel=\"noopener\">GeoJson PHP web application<\/a> in a new window, or below &#8230;<\/p>\n<p><iframe id=regionsif style='width:100%;height:600px;' src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\"><\/iframe><\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>Our efforts in making <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php--GETME\" title=\"regions.php\" rel=\"noopener\">our new tweaked<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php--GETME\" title=\"regions.php\" rel=\"noopener\">regions.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\" rel=\"noopener\">GeoJson PHP web application<\/a> more mobile platform user friendly reminds us about a salutary issue regarding touch gestures &#8230;<\/a><\/p>\n<ul>\n<li>in a discrete click methodology of interest, you could adopt a non-mobile &#8220;onmousedown&#8221; logic set that does not get interfered with by a mobile &#8220;ontouchdown&#8221; logic set (perhaps leaving &#8220;onclick&#8221; event, which both non-mobile and mobile both recognise, for another event logic role) &#8230; and &#8230;<\/li>\n<li>neither will interrupt the mobile gestures associated with swiping and pinching, which refer to the events &#8220;ontouchstart&#8221; and &#8220;ontouchend&#8221; at either end of their lifespan<\/li>\n<\/ul>\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\/new-geojson-world-coastline-primer-tutorial\/' rel=\"noopener\">New GeoJson World Coastline Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gjwcpt'>Previous relevant <a target=\"_blank\" title='GeoJson World Coastline Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/geojson-world-coastline-primer-tutorial\/' rel=\"noopener\">GeoJson World Coastline Primer 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\/regions.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GeoJson World Coastline Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/geojson_coastline.jpg\" title=\"GeoJson World Coastline Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GeoJson World Coastline Primer Tutorial<\/p><\/div>\n<p>We&#8217;re keen to further explore the possibilities of <a target=\"_blank\" title='GeoJson information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/GeoJSON' rel=\"noopener\">GeoJson<\/a> public data sets, further to yesterday&#8217;s <a target=\"_blank\" title='Swift Playgrounds on macOS Map Emoji Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/swift-playgrounds-on-macos-map-emoji-tutorial' rel=\"noopener\">Swift Playgrounds on macOS Map Emoji Tutorial<\/a>.<\/p>\n<p>And then we remembered some of the methodologies we used with <a target=\"_blank\" title='Responsive Web Design Landing Page Image Map Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/responsive-web-design-landing-page-image-map-tutorial\/' rel=\"noopener\">Responsive Web Design Landing Page Image Map Tutorial<\/a>, talking about <a target=\"_blank\" title='HTML map element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp' rel=\"noopener\">image maps<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/responsive-web-design-landing-page-image-map-tutorial\/'><p>\nAnd so, we arrive at a long planned for tilt at Image Map functionality that we often turn to Mobilefish.Com and its excellent Image Map Creation to help us out \u2026 but not today?! Why not?  We have a funny set of needs, they being \u2026<br \/>\n<\/p>\n<ul>\n<li>our Image Map\u2019s image will have a variable set of width x height dimensions \u2026<\/li>\n<li>our Image Map\u2019s image will be transparent<\/li>\n<li>our Image Map needs to have a hole left aside inside it where the functionality that originally existed (and pointed to WordPress Blog content like you are reading), is still working<\/li>\n<\/blockquote>\n<p> &#8230; the first two ideas of which, along with &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp' rel=\"noopener\">canvas<\/a> element where the &#8230;<\/li>\n<li>GeoJson coordinates &#8230; thanks to <a target=\"_blank\" title=\"https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_110m_coastline.geojson\" href='https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_110m_coastline.geojson' rel=\"noopener\">https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_110m_coastline.geojson<\/a> via <a target=\"_blank\" title='http:\/\/geojson.xyz\/' href='http:\/\/geojson.xyz\/' rel=\"noopener\">HTTP:\/\/geojson.xyz\/<\/a> &#8230;<\/li>\n<li>will be plotted &#8230; but the canvas element &#8230;<\/li>\n<li>has a <a target=\"_blank\" title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp' rel=\"noopener\">z-index<\/a> set below the image and image map above &#8230; meaning &#8230;<\/li>\n<li>we can add some region specific coding into the &#8230;<\/li>\n<li>image map <a target=\"_blank\" title='HTML area element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_area.asp' rel=\"noopener\">area<\/a> element (shape=poly) onclick logics<\/li>\n<\/ul>\n<p> &#8230; in our &#8220;early days&#8221; &#8220;proof of concept&#8221; <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php_GETME\" title=\"regions.php\" rel=\"noopener\">regions.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions.php\" title=\"GeoJson PHP web application\" rel=\"noopener\">GeoJson PHP web application<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d57945' onclick='var dv=document.getElementById(\"d57945\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geojson\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57945' 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='#d57962' onclick='var dv=document.getElementById(\"d57962\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/integration\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57962' 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='#d57970' onclick='var dv=document.getElementById(\"d57970\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/countries\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57970' 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='#d57985' onclick='var dv=document.getElementById(\"d57985\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geo-chart\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57985' 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='#d58002' onclick='var dv=document.getElementById(\"d58002\"); 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='d58002' 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='#d58015' onclick='var dv=document.getElementById(\"d58015\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dom\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58015' 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='#d68533' onclick='var dv=document.getElementById(\"d68533\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/safari\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68533' 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='#d68454' onclick='var dv=document.getElementById(\"d68454\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/title\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68454' 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='#d68576' onclick='var dv=document.getElementById(\"d68576\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onload\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68576' 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='#d68874' onclick='var dv=document.getElementById(\"d68874\"); 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='d68874' 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='#d68883' onclick='var dv=document.getElementById(\"d68883\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hierarchy\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68883' 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='#d68911' onclick='var dv=document.getElementById(\"d68911\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/link\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68911' 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='#d68918' onclick='var dv=document.getElementById(\"d68918\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68918' 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='#d68928' onclick='var dv=document.getElementById(\"d68928\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/song\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68928' 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='#d68939' onclick='var dv=document.getElementById(\"d68939\"); 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='d68939' 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='#d68945' onclick='var dv=document.getElementById(\"d68945\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/window\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68945' 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='#d68951' onclick='var dv=document.getElementById(\"d68951\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/clone\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68951' 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='#d68961' onclick='var dv=document.getElementById(\"d68961\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/url\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68961' 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='#d68969' onclick='var dv=document.getElementById(\"d68969\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onclick\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68969' 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='#d68981' onclick='var dv=document.getElementById(\"d68981\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/peer\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68981' 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='#d68993' onclick='var dv=document.getElementById(\"d68993\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onkeydown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68993' 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='#d69005' onclick='var dv=document.getElementById(\"d69005\"); 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='d69005' 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='#d69018' onclick='var dv=document.getElementById(\"d69018\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/button\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d69018' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We all hope the &#8220;latest button&#8221; will help out achieving something with online endeavours. So what about a &#8220;button&#8221; with a dual purpose according to need &#8230; well &#8230; quick &#8230; get thee to The Button Shop &#8230; post haste! &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-style-subrip-subtitles-button-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":[2,4,12,14,37],"tags":[69,84,88,3092,119,1993,3531,174,2571,5226,1824,2503,2509,1604,4033,2442,5229,281,2380,2276,2147,5233,367,380,1929,5230,451,452,2229,557,3961,564,576,587,652,2016,673,3038,1807,2169,721,739,795,5231,845,860,861,1705,876,894,5234,3440,914,5113,997,1761,1059,5232,1125,1126,1133,1137,1159,1172,5132,1184,1209,1212,5227,5228,4342,1262,1675,1319,1345,1369,1431,2455,3098,1493,2017,1496],"class_list":["post-69018","post","type-post","status-publish","format-standard","hentry","category-ajax","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-ajax","tag-animation-2","tag-api","tag-automate","tag-automation","tag-browse","tag-browsing","tag-button","tag-caption","tag-captioning","tag-character","tag-clone","tag-cloning","tag-collaboration","tag-commentary","tag-contenteditable","tag-create","tag-css","tag-delay","tag-delimitation","tag-delimiter","tag-domparser","tag-dropdown","tag-email","tag-error","tag-faux-pas","tag-font","tag-form","tag-hash","tag-hashtag","tag-hashtagging","tag-hierarchy","tag-html","tag-iframe","tag-javascript","tag-karaoke","tag-keyboard","tag-level","tag-link","tag-location-hash","tag-lyrics","tag-mailto","tag-mobile","tag-not","tag-notes","tag-onblur","tag-onclick","tag-onkeydown","tag-opacity","tag-overlay","tag-parsefromstring","tag-peer","tag-peer-to-peer","tag-plus","tag-programming","tag-prompt","tag-resize","tag-resizing","tag-setinterval","tag-settimeout","tag-share","tag-sharing","tag-sms","tag-song","tag-song-lyrics","tag-spotify","tag-style","tag-styling","tag-subrip","tag-subrip-subtitle","tag-subtitle","tag-textarea","tag-textbox","tag-tutorial","tag-url","tag-video","tag-wikipedia","tag-wrap","tag-wrapper","tag-youtube","tag-youtube-api","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69018"}],"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=69018"}],"version-history":[{"count":12,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69018\/revisions"}],"predecessor-version":[{"id":69032,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/69018\/revisions\/69032"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=69018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=69018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=69018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}