{"id":72861,"date":"2026-05-01T03:01:00","date_gmt":"2026-04-30T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=72861"},"modified":"2026-04-30T23:12:07","modified_gmt":"2026-04-30T13:12:07","slug":"shower-song-sharing-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/shower-song-sharing-tutorial\/","title":{"rendered":"Shower Song Sharing Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Shower Song Sharing Tutorial\" src=\"\/HTMLCSS\/email_share_showers.jpg\" title=\"Shower Song Sharing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Shower Song Sharing Tutorial<\/p><\/div>\n<p>Though we like programming in (serverside) PHP we&#8217;d prefer to leave it to (clientside) HTML and Javascript and CSS to contain solutions to web application challenges, as much as anything because PHP relies on an arrangement such as the great <a target=\"_blank\" title='MAMP for Apache\/PHP\/MySql on Mac OS X local web server' href='http:\/\/www.mamp.info' rel=\"noopener\">MAMP<\/a>, as a local Apache web server environment, to test your PHP.<\/p>\n<p>With the Shower Songs project up until yesterday&#8217;s <a title='Shower Song Media Insertions Tutorial' href='#ssmit'>Shower Song Media Insertions Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>clientside only worked &#8230; but &#8230;<\/li>\n<li>introducing sharing functionality along with the potential sharing of local media files needs serverside (ie. in our case, PHP)<\/li>\n<\/ul>\n<p> &#8230; and we decided that &#8220;PHP is it&#8221; both as the &#8230;<\/p>\n<ul>\n<li>software .. and the data &#8230;<\/li>\n<li>storage<\/li>\n<\/ul>\n<p>Huh?!   Yes, PHP can do it all!  But we are not saying this idea is for everyone.<\/p>\n<p>The reason we plumped for it, is the simple nature to the requirement we are after (when it boils down to it) that being &#8230;<\/p>\n<ol>\n<li>a three argument Ajax (clientside) &#8230;<br \/>\n<code><br \/>\n  var zhr=null, zform=null, itrs=[], ibetter=-1, iind=0;<br \/>\n<br \/>\n  function stateChanged() {<br \/>\n   if (zhr.readyState == 4) {<br \/>\n    if (zhr.status == 200) {<br \/>\n     if (iind < eval(-1 + eval('' + itrs.length))) {\n       ajaxit();\n     }\n    }\n   }\n  }\n<br \/>\n  function ajaxit() { \/\/ Ajax POST dataform onetoseven durl<br \/>\n    if (ibetter &gt;= 1 && eval('' + itrs.length) > 0) {<br \/>\n  zhr = new XMLHttpRequest();<br \/>\n  zform = new FormData();<br \/>\n  zform.append('dataform', '' + dcombos[ibetter]);<br \/>\n  zform.append('onetoseven', '' + itrs[iind]);<br \/>\n  if (document.getElementById('inp00' + itrs[iind]).value.indexOf('data:') == 0) {<br \/>\n  zform.append('durl', '' + document.getElementById('inp00' + itrs[iind]).value);<br \/>\n  } else if (document.getElementById('inp00' + itrs[iind]).placeholder.indexOf('data:') == 0) {<br \/>\n  zform.append('durl', '' + document.getElementById('inp00' + itrs[iind]).placeholder);<br \/>\n  }<br \/>\n  zhr.onreadystatechange=stateChanged;<br \/>\n  zhr.open('post', '.\/shower_songs.php', true);<br \/>\n  zhr.send(zform);<br \/>\n  iind++;<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  function doemail() {<br \/>\n  var azx = document.createElement(\"a\");<br \/>\n  var onoff=[];<br \/>\n  ibetter=-1;<br \/>\n  itrs=[];<br \/>\n  document.body.appendChild(azx);<br \/>\n  azx.style = \"display: none\"; \/\/ %3B%7Cdata%3A%7C%7C%7C%7C%7C 1 and 2 %3Bdata%3A%7Cdata%3A%7C%7C%7C%7C%7C<br \/>\n  var durl=documentURL;<br \/>\n  var newdurl='';<br \/>\n  if (durl.indexOf('data%3A%') != -1) {<br \/>\n   if (durl.indexOf('%3Bdata%3A%') != -1) { \/\/ 1<br \/>\n     durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');<br \/>\n     itrs.push(1);<br \/>\n     while (ibetter &lt; 1) {<br \/>\n        ibetter=Math.floor(Math.random() * eval('' + dcombos.length));<br \/>\n     }<br \/>\n     onoff.push(true);<br \/>\n   } else {<br \/>\n     onoff.push(false);<br \/>\n     durl=durl.replace('%3B%7C','%3B');<br \/>\n   }<br \/>\n   if (durl.indexOf('%3Bdata%3A%') != -1) { \/\/ 2<br \/>\n     durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');<br \/>\n     itrs.push(2);<br \/>\n     while (ibetter &lt; 1) {<br \/>\n        ibetter=Math.floor(Math.random() * eval('' + dcombos.length));<br \/>\n     }<br \/>\n     onoff.push(true);<br \/>\n   } else {<br \/>\n     durl=durl.replace('%3B%7C','%3B');<br \/>\n     onoff.push(false);<br \/>\n   }<br \/>\n   if (durl.indexOf('%3Bdata%3A%') != -1) { \/\/ 3<br \/>\n     durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');<br \/>\n     itrs.push(3);<br \/>\n     while (ibetter &lt; 1) {<br \/>\n        ibetter=Math.floor(Math.random() * eval('' + dcombos.length));<br \/>\n     }<br \/>\n     onoff.push(true);<br \/>\n   } else {<br \/>\n     durl=durl.replace('%3B%7C','%3B');<br \/>\n     onoff.push(false);<br \/>\n   }<br \/>\n   if (durl.indexOf('%3Bdata%3A%') != -1) { \/\/ 4<br \/>\n     durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');<br \/>\n     itrs.push(4);<br \/>\n     while (ibetter &lt; 1) {<br \/>\n        ibetter=Math.floor(Math.random() * eval('' + dcombos.length));<br \/>\n     }<br \/>\n     onoff.push(true);<br \/>\n   } else {<br \/>\n     durl=durl.replace('%3B%7C','%3B');<br \/>\n     onoff.push(false);<br \/>\n   }<br \/>\n   if (durl.indexOf('%3Bdata%3A%') != -1) { \/\/ 5<br \/>\n     durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');<br \/>\n     itrs.push(5);<br \/>\n     while (ibetter &lt; 1) {<br \/>\n        ibetter=Math.floor(Math.random() * eval('' + dcombos.length));<br \/>\n     }<br \/>\n     onoff.push(true);<br \/>\n   } else {<br \/>\n     durl=durl.replace('%3B%7C','%3B');<br \/>\n     onoff.push(false);<br \/>\n   }<br \/>\n   if (durl.indexOf('%3Bdata%3A%') != -1) { \/\/ 6<br \/>\n     durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');<br \/>\n     itrs.push(6);<br \/>\n     while (ibetter &lt; 1) {<br \/>\n        ibetter=Math.floor(Math.random() * eval('' + dcombos.length));<br \/>\n     }<br \/>\n     onoff.push(true);<br \/>\n   } else {<br \/>\n     durl=durl.replace('%3B%7C','%3B');<br \/>\n     onoff.push(false);<br \/>\n   }<br \/>\n   if (durl.indexOf('%3Bdata%3A%') != -1) { \/\/ 7<br \/>\n     durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');<br \/>\n     itrs.push(7);<br \/>\n     while (ibetter &lt; 1) {<br \/>\n        ibetter=Math.floor(Math.random() * eval('' + dcombos.length));<br \/>\n     }<br \/>\n     onoff.push(true);<br \/>\n   } else {<br \/>\n     durl=durl.replace('%3B%7C','%3B');<br \/>\n     onoff.push(false);<br \/>\n   }<br \/>\n   console.warn(onoff); \/\/ Ajax POST dataform onetoseven durl<br \/>\n   if (ibetter &gt;= 1) {<br \/>\n    if (documentURL.indexOf('?') != -1) {<br \/>\n     newdurl=documentURL.replace(\/data\\%\/g, dcombos[ibetter] + '%').replace('.html','.php').replace('#','&dataform=' + dcombos[ibetter] + '&');<br \/>\n    } else {<br \/>\n     newdurl=documentURL.replace(\/data\\%\/g, dcombos[ibetter] + '%').replace('.html','.php').replace('#','?dataform=' + dcombos[ibetter] + '&');<br \/>\n    }<br \/>\n    setTimeout(ajaxit, 500);<br \/>\n   }<br \/>\n   azx.href = 'mailto:?subject=' + encodeURIComponent(   (document.getElementById('subject').value.trim() != '' ? document.getElementById('subject').value : (document.getElementById('subject').placeholder.trim() != '' ? document.getElementById('subject').placeholder : 'Shower Songs'))   ) + '&body=' + encodeURIComponent((newdurl != '' ? newdurl : documentURL));<br \/>\n  } else {<br \/>\n  azx.href = 'mailto:?subject=' + encodeURIComponent(   (document.getElementById('subject').value.trim() != '' ? document.getElementById('subject').value : (document.getElementById('subject').placeholder.trim() != '' ? document.getElementById('subject').placeholder : 'Shower Songs'))   ) + '&body=' + encodeURIComponent((newdurl != '' ? newdurl : documentURL));<br \/>\n  }<br \/>\n  azx.click();<br \/>\n  }<br \/>\n<br \/>\n  function dosms() {<br \/>\n  var onoff=[];<br \/>\n  ibetter=-1;<br \/>\n  itrs=[];<br \/>\n  var azx = document.createElement(\"a\");<br \/>\n  document.body.appendChild(azx);<br \/>\n  azx.style = \"display: none\";<br \/>\n  var durl=documentURL;<br \/>\n  var newdurl='';<br \/>\n  if (durl.indexOf('data%3A%') != -1) {<br \/>\n   if (durl.indexOf('%3Bdata%3A%') != -1) { \/\/ 1<br \/>\n     durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');<br \/>\n     itrs.push(1);<br \/>\n     while (ibetter &lt; 1) {<br \/>\n        ibetter=Math.floor(Math.random() * eval('' + dcombos.length));<br \/>\n     }<br \/>\n     onoff.push(true);<br \/>\n   } else {<br \/>\n     onoff.push(false);<br \/>\n     durl=durl.replace('%3B%7C','%3B');<br \/>\n   }<br \/>\n   if (durl.indexOf('%3Bdata%3A%') != -1) { \/\/ 2<br \/>\n     durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');<br \/>\n     itrs.push(2);<br \/>\n     while (ibetter &lt; 1) {<br \/>\n        ibetter=Math.floor(Math.random() * eval('' + dcombos.length));<br \/>\n     }<br \/>\n     onoff.push(true);<br \/>\n   } else {<br \/>\n     durl=durl.replace('%3B%7C','%3B');<br \/>\n     onoff.push(false);<br \/>\n   }<br \/>\n   if (durl.indexOf('%3Bdata%3A%') != -1) { \/\/ 3<br \/>\n     durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');<br \/>\n     itrs.push(3);<br \/>\n     while (ibetter &lt; 1) {<br \/>\n        ibetter=Math.floor(Math.random() * eval('' + dcombos.length));<br \/>\n     }<br \/>\n     onoff.push(true);<br \/>\n   } else {<br \/>\n     durl=durl.replace('%3B%7C','%3B');<br \/>\n     onoff.push(false);<br \/>\n   }<br \/>\n   if (durl.indexOf('%3Bdata%3A%') != -1) { \/\/ 4<br \/>\n     durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');<br \/>\n     itrs.push(4);<br \/>\n     while (ibetter &lt; 1) {<br \/>\n        ibetter=Math.floor(Math.random() * eval('' + dcombos.length));<br \/>\n     }<br \/>\n     onoff.push(true);<br \/>\n   } else {<br \/>\n     durl=durl.replace('%3B%7C','%3B');<br \/>\n     onoff.push(false);<br \/>\n   }<br \/>\n   if (durl.indexOf('%3Bdata%3A%') != -1) { \/\/ 5<br \/>\n     durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');<br \/>\n     itrs.push(5);<br \/>\n     while (ibetter &lt; 1) {<br \/>\n        ibetter=Math.floor(Math.random() * eval('' + dcombos.length));<br \/>\n     }<br \/>\n     onoff.push(true);<br \/>\n   } else {<br \/>\n     durl=durl.replace('%3B%7C','%3B');<br \/>\n     onoff.push(false);<br \/>\n   }<br \/>\n   if (durl.indexOf('%3Bdata%3A%') != -1) { \/\/ 6<br \/>\n     durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');<br \/>\n     itrs.push(6);<br \/>\n     while (ibetter &lt; 1) {<br \/>\n        ibetter=Math.floor(Math.random() * eval('' + dcombos.length));<br \/>\n     }<br \/>\n     onoff.push(true);<br \/>\n   } else {<br \/>\n     durl=durl.replace('%3B%7C','%3B');<br \/>\n     onoff.push(false);<br \/>\n   }<br \/>\n   if (durl.indexOf('%3Bdata%3A%') != -1) { \/\/ 7<br \/>\n     durl=durl.replace('%3Bdata%3A%7C', '%3B%7C');<br \/>\n     itrs.push(7);<br \/>\n     while (ibetter &lt; 1) {<br \/>\n        ibetter=Math.floor(Math.random() * eval('' + dcombos.length));<br \/>\n     }<br \/>\n     onoff.push(true);<br \/>\n   } else {<br \/>\n     durl=durl.replace('%3B%7C','%3B');<br \/>\n     onoff.push(false);<br \/>\n   }<br \/>\n   console.warn(onoff); \/\/ Ajax POST dataform onetoseven durl<br \/>\n   if (ibetter &gt;= 1) {<br \/>\n    if (documentURL.indexOf('?') != -1) {<br \/>\n     newdurl=documentURL.replace(\/data\\%\/g, dcombos[ibetter] + '%').replace('.html','.php').replace('#','&dataform=' + dcombos[ibetter] + '&');<br \/>\n    } else {<br \/>\n     newdurl=documentURL.replace(\/data\\%\/g, dcombos[ibetter] + '%').replace('.html','.php').replace('#','?dataform=' + dcombos[ibetter] + '&');<br \/>\n    }<br \/>\n    setTimeout(ajaxit, 500);<br \/>\n   }<br \/>\n   azx.href = 'sms:&body=' + encodeURIComponent((newdurl != '' ? newdurl : documentURL));<br \/>\n  } else {<br \/>\n  azx.href = 'sms:body=' + encodeURIComponent((newdurl != '' ? newdurl : documentURL));<br \/>\n  }<br \/>\n  azx.click();<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; writing, into the PHP itself &#8230; as comments from clientside to serverside method=POST scenario &#8230;<\/li>\n<li>a one argument reading back serverside PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.php_GETME\" rel=\"noopener\">shower_songs.php<\/a> &#8230;<br \/>\n<code><br \/>\n&lt;?php<br \/>\n\/\/ shower_songs.php<br \/>\n\/\/ April, 2026<br \/>\n\/\/ RJM Programming<br \/>\n\/\/ Help out shower_songs.html regarding local media files accessed via email or SMS<br \/>\n<br \/>\n$dst=str_replace('~','',str_replace('3~','2',(substr(date(\"Ymd\"),0,7) . '~'))) . '0';<br \/>\n$phpis=file_get_contents(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'shower_songs.php');<br \/>\n$newphpis='';<br \/>\n<br \/>\nif (strpos($phpis, ' of ' . $dst . ' goes ') !== false) {<br \/>\n  $dst=$dst;<br \/>\n} else if (strpos($phpis, 'Data of ') !== false) {<br \/>\n  $olddst=explode(' ',explode('Data of ', $phpis)[1])[0];<br \/>\n  $allrecs=explode('\/' . '\/' . '\/' . '\/', $phpis);<br \/>\n  $newphpis=$phpis;<br \/>\n  for ($ij=1; $ij&lt;sizeof($allrecs); $ij++) {<br \/>\n    if (substr(substr($allrecs[$ij],4,7)) == substr($olddst,0,7)) {<br \/>\n      $newphpis=str_replace('\/' . '\/' . '\/' . '\/' . explode('\/' . '\/' . '\/' . '\/',explode(\"\\n\",$allrecs[$ij])[0])[0], \"\", str_replace('\/' . '\/' . '\/' . '\/' . explode('\/' . '\/' . '\/' . '\/',explode(\"\\n\",$allrecs[$ij])[0])[0] . \"\\n\", \"\", $newphpis));<br \/>\n    }<br \/>\n  }<br \/>\n  $newphpis=str_replace('Data of ' . $olddst . ' ', 'Data of ' . $dst . ' ', $newphpis);<br \/>\n}<br \/>\n<br \/>\nif (isset($_POST['dataform'])) {<br \/>\n<br \/>\n if (isset($_POST['onetoseven']) && isset($_POST['durl'])) {<br \/>\n   if ($newphpis == '') {<br \/>\n     $newphpis=$phpis;<br \/>\n   }<br \/>\n   $newphpis.=\"\\n\/\" . \"\/\" . \"\/\" . \"\/\" . $_POST['dataform'] . substr($dst,0,7) . $_POST['onetoseven'] . str_replace(' ','+',urldecode($_POST['durl'])) . \"\\n\";<br \/>\n }<br \/>\n<br \/>\n if ($newphpis != '' && $newphpis != $phpis) {<br \/>\n   file_put_contents(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'shower_songs.php', $newphpis);<br \/>\n }<br \/>\n<br \/>\n exit;<br \/>\n} else if (isset($_GET['dataform'])) {<br \/>\n $htmlis=file_get_contents(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'shower_songs.html');<br \/>\n $relrecs=explode('\/' . '\/' . '\/' . '\/' . $_GET['dataform'] . substr($dst,0,7), $phpis);<br \/>\n for ($ij=1; $ij&lt;sizeof($relrecs); $ij++) {<br \/>\n   if (substr($relrecs[$ij],0,1) &gt;= '1' && substr($relrecs[$ij],0,1) &lt;= '7') {<br \/>\n     \/\/file_put_contents('xz.xz', '' . substr($relrecs[$ij],0,1));<br \/>\n     $relplaces=explode(substr($relrecs[$ij],0,1) . '\" value=\"', $htmlis);<br \/>\n     \/\/file_put_contents('xz2.xz2', '' . sizeof($relplaces) . ' ' . sizeof(explode('1\" value=\"',$htmlis)));<br \/>\n     if (sizeof($relplaces) &gt; 1) {<br \/>\n       $htmlis=str_replace(substr($relrecs[$ij],0,1) . '\" value=\"' . explode('\"',$relplaces[1])[0] . '\"', substr($relrecs[$ij],0,1) . '\" value=\"' . explode('\/' . '\/' . '\/' . '\/',explode(\"\\n\",substr($relrecs[$ij],1))[0])[0] . '\"', $htmlis);<br \/>\n     }<br \/>\n   }<br \/>\n }<br \/>\n file_put_contents(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'shower_songs.htm', $htmlis);<br \/>\n<br \/>\n if ($newphpis != '' && $newphpis != $phpis) {<br \/>\n   file_put_contents(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'shower_songs.php', $newphpis);<br \/>\n }<br \/>\n<br \/>\n header('Location: .\/shower_songs.htm' . str_replace('&#order=','#order=',str_replace('order=','#order=',str_replace('??','?',('?' . $_SERVER['QUERY_STRING'])))));<br \/>\n<br \/>\n exit;<br \/>\n}<br \/>\n<br \/>\nif (str_replace('?','',$_SERVER['QUERY_STRING']) == '') {<br \/>\nheader('Location: .\/shower_songs.html');<br \/>\n} else {<br \/>\nheader('Location: .\/shower_songs.html' . str_replace('&#order=','#order=',str_replace('order=','#order=',str_replace('??','?',('?' . $_SERVER['QUERY_STRING'])))));<br \/>\n}<br \/>\n<br \/>\n?&gt;<br \/>\n\/\/ Data of 20260420 goes below ...<br \/>\n<\/code><br \/>\n &#8230; populating clientside HTML form scenario<\/li>\n<\/ol>\n<p>So feel free to try <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html-------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html-------GETME\" rel=\"noopener\">eighth draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\">Shower Songs<\/a> <a href='#myifq'>below<a\/> and helped out a lot via <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html-----------------------------------------------GETME\" rel=\"noopener\">that changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html-----------------------------------------------GETME\" rel=\"noopener\">swipe_media.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Radio Play<\/a> project web application and <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html------------------------------------------------------------------GETME' rel=\"noopener\">today&#8217;s changed<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html------------------------------------------------------------------GETME' rel=\"noopener\">client_browsing.htm<\/a> client side <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm' rel=\"noopener\">local file browsing HTML and Javascript inhouse helper<\/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\/new-shower-song-media-insertions-tutorial\/' rel=\"noopener\">New Shower Song Media Insertions Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ssmit'>Previous relevant <a target=\"_blank\" title='Shower Song Media Insertions Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/shower-song-media-insertions-tutorial\/' rel=\"noopener\">Shower Song Media Insertions Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Shower Song Media Insertions Tutorial\" src=\"\/HTMLCSS\/shower_songs_media.jpg\" title=\"Shower Song Media Insertions Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Shower Song Media Insertions Tutorial<\/p><\/div>\n<p>The recent <a title='Shower Song Radio Play Better Integration Tutorial' href='#ssrpbit'>Shower Song Radio Play Better Integration Tutorial<\/a> may represent &#8230;<\/p>\n<p><code><br \/>\n ... a Shower Song project \"by name\" ...<br \/>\n<\/code><\/p>\n<p> &#8230; but recent work and what we have here today, can potentially allow this project&#8217;s scope to be a lot more ambitious than that.<\/p>\n<p>So what is today&#8217;s work?  Well, up until today &#8230;<\/p>\n<ul>\n<li>data has been <a target=\"_blank\" title=\"YouTube\" href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> video related data exclusively &#8230; but as of today &#8230;<\/li>\n<li>we integrate our inhouse <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/client-browsing-and-pasting-and-file-dropping-tutorial\/' title='Client Browsing and Pasting and File Dropping Tutorial' rel=\"noopener\">Client Browsing and Pasting and File Dropping Tutorial<\/a>&#8216;s web application now capable of &#8230;<br \/>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/client-browsing-and-pasting-and-file-dropping-tutorial\/'>\n<ul class=\"noclass\" title=\" ... welcome to the long hover functionality that shows Blog Post regarding Ul\/Li Tag CSS\">\n<li style=\"display:none;\">type it in \u2026<\/li>\n<li>browse it in \u2026<\/li>\n<li>paste it in as text (at an animated GIF slide textbox) \u2026 or, as of today \u2026<\/li>\n<li>paste it in as graphical content via the inhouse Client Browsing (and now \u201cPasting\u201d) web application\u2019s iframe element hosted span contenteditable=true onpaste and onblur event savvy new inclusion into the mix<\/li>\n<li><font color=\"blue\">drop it in \u2026<\/font><\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; means to other local media file data conduits &#8230;\n<\/li>\n<\/ul>\n<p> &#8230; and so, on offer to Shower Songs users of the form off the &#8220;Songs&#8221; button, to add any non-YouTube local media source file data of interest, into the &#8220;presentation mix&#8221;, via &#8230;<\/p>\n<table>\n<tr>\n<th>HTML<\/th>\n<\/tr>\n<tr>\n<td>\n<code style=\"font-size:10px;word-break:break-all;text-wrap:wrap;\"><br \/>\n&lt;div id=divcbi style=visibility:hidden;&gt;<br \/>\n&lt;iframe onload=\"checkit(this);\" scrolling=no frameborder=0 id=cbi data-accept=\"image\/*\"<br \/>\n style=\"width:163px; height:228px; margin-top:-204px; display:inline-block; background-color:transparent;\"<br \/>\n src=\"\/HTMLCSS\/client_browsing.htm?d=31226&amp;wording=Allimages%20images%2E%20\"&gt;<br \/>\n&lt;\/iframe&gt;<br \/>\n&lt;\/div&gt;<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th>Javascript<\/th>\n<\/tr>\n<tr>\n<td>\n<code style=\"font-size:10px;word-break:break-all;text-wrap:wrap;\"><br \/>\n  var twaconto=null, twacontoiurl=null, twacontojurl=null;<br \/>\n  var imgo=null;<br \/>\n  var imagedurl='', reldone=false;<br \/>\n  var bigdu='', lastname='', dcbi='';<br \/>\n  var initval='&lt;textarea style=width:98%;height:560px;background-color:#f9f9f9; onblur=\"popshow(this.value);\" id=mysubrip&gt;&lt;\/textarea&gt;', contis='', woo=null;<br \/>\n  var curtaidis='', curavid='', curpos=0, curdelta=0, somethingplaying=false, cmds=[], sofara='', gtaidis='', lastgreen=null;<br \/>\n  var wastab='', todo='', aone='1', tacstarted=false, onep='p', gdurlf=false, bonep='p', thattaid='', ithattaid=-1, jgoing=false;<br \/>\n  <br \/>\n   function butnotavmediawis(inid) { \/\/ to pause<br \/>\n    bonep='p';<br \/>\n    var xsuff='';<br \/>\n    try {<br \/>\n      xsuff=inid.split('_')[0].slice(-3)<br \/>\n    } catch(yfj) { xsuff=''; }<br \/>\n    if ((xsuff + 'x').substring(0,1) == '0') {<br \/>\n    if (document.getElementById(inid)) {<br \/>\n    if (document.getElementById(inid).placeholder.indexOf('P=play\/') != -1 && gdurlf) {<br \/>\n      bonep='';<br \/>\n      return 'spareu';<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n    if (!document.getElementById(inid)) {<br \/>\n      var tasare=document.getElementsByTagName('textarea');<br \/>\n      for (var ibn=0; ibn&lt;tasare.length; ibn++) {<br \/>\n        if (tasare[ibn].outerHTML.indexOf('2px dotted ') != -1) {  return '' + tasare[ibn].id; }<br \/>\n      }<br \/>\n    }<br \/>\n    return inid;<br \/>\n  }<br \/>\n  <br \/>\n  function dotodo() {<br \/>\n    if (todo != '') {<br \/>\n     if (document.getElementById(todo).placeholder.indexOf('P=play\/') != -1) {<br \/>\n      document.getElementById(todo).value='P';<br \/>\n     }<br \/>\n    }<br \/>\n    todo='';<br \/>\n  }<br \/>\n  <br \/>\n  function tanearest(avoid) {<br \/>\n    var myt=document.getElementById('mytable').innerHTML;<br \/>\n    if (lastgreen) {<br \/>\n      lastgreen.style.border='1px solid black';<br \/>\n    }<br \/>\n    lastgreen=document.getElementById(myt.split(avoid)[1].split(' id=\"')[1].split('\"')[0])<br \/>\n    return lastgreen;<br \/>\n  }<br \/>\n  <br \/>\n  function butnotavmediap() {<br \/>\n    var inid=gtaidis;<br \/>\n    if (gdurlf && document.getElementById('avmedia' + inid.split('_')[0].slice(-3))) {<br \/>\n      document.getElementById(inid).placeholder=document.getElementById(inid).placeholder.replace(document.getElementById(inid).placeholder.split('\/')[0],'1');<br \/>\n      document.getElementById('avmedia' + inid.split('_')[0].slice(-3)).currentTime=0;<br \/>\n      gtaidis='';<br \/>\n      return 'spareu';<br \/>\n    }<br \/>\n    if (!document.getElementById(inid)) {<br \/>\n      var tasare=document.getElementsByTagName('textarea');<br \/>\n      for (var ibn=0; ibn&lt;tasare.length; ibn++) {<br \/>\n        if (tasare[ibn].outerHTML.indexOf('2px dotted ') != -1) {  return '' + tasare[ibn].id; }<br \/>\n      }<br \/>\n    }<br \/>\n    return inid;<br \/>\n  }<br \/>\n  <br \/>\n  function justtheone() {<br \/>\n      jgoing=true;<br \/>\n      var iicnt=0, ibn=0, allv=true;<br \/>\n      var tasare=document.getElementsByTagName('textarea');<br \/>\n      for (ibn=eval(-1 + eval('' + tasare.length)); ibn&gt;=0; ibn--) {<br \/>\n        if (tasare[ibn].value != '') { allv=false; }<br \/>\n      }<br \/>\n      if (allv) {<br \/>\n      if (!gdurlf) {<br \/>\n      for (ibn=0; ibn&lt;tasare.length; ibn++) {<br \/>\n        if (tasare[ibn].placeholder.indexOf('P=pause\/') != -1 && tasare[ibn].placeholder.indexOf('0\/') != 0 && tasare[ibn].placeholder.indexOf('Audio ') != 0) {<br \/>\n          iicnt++;<br \/>\n          if (iicnt &gt; 1) {<br \/>\n            if (isplayingnum &gt;= 0) {<br \/>\n            if (tasare[ibn].id != taids[isplayingnum]) {<br \/>\n            if (8 == 7) { tasare[ibn].value='p'; }<br \/>\n            }<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n      } else {<br \/>\n      for (ibn=eval(-1 + eval('' + tasare.length)); ibn&gt;=0; ibn--) {<br \/>\n        if (tasare[ibn].placeholder.indexOf('P=pause\/') != -1 && tasare[ibn].placeholder.indexOf('0\/') != 0 && tasare[ibn].placeholder.indexOf('Audio ') != 0) {<br \/>\n          iicnt++;<br \/>\n          if (iicnt &gt; 1) {<br \/>\n            tasare[ibn].value='p';<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n      }<br \/>\n      }<br \/>\n  }<br \/>\n  <br \/>\n  function butnotavmediazero(inid) {<br \/>\n    if (gdurlf && document.getElementById('avmedia' + inid.split('_')[0].slice(-3))) {<br \/>\n      document.getElementById(inid).placeholder=document.getElementById(inid).placeholder.replace(document.getElementById(inid).placeholder.split('\/')[0],'1');<br \/>\n      document.getElementById('avmedia' + inid.split('_')[0].slice(-3)).currentTime=0;<br \/>\n      return 'spareu';<br \/>\n    }<br \/>\n    if (!document.getElementById(inid)) {<br \/>\n      var tasare=document.getElementsByTagName('textarea');<br \/>\n      for (var ibn=0; ibn&lt;tasare.length; ibn++) {<br \/>\n        if (tasare[ibn].outerHTML.indexOf('2px dotted ') != -1) {  return '' + tasare[ibn].id; }<br \/>\n      }<br \/>\n    }<br \/>\n    return inid;<br \/>\n  }<br \/>\n  <br \/>\n  function butnotavmediaone(inid) {<br \/>\n    aone='1';<br \/>\n    if (gdurlf && document.getElementById('avmedia' + inid.split('_')[0].slice(-3))) {<br \/>\n      document.getElementById(inid).placeholder=document.getElementById(inid).placeholder.replace(document.getElementById(inid).placeholder.split('\/')[0],'1');<br \/>\n      document.getElementById('avmedia' + inid.split('_')[0].slice(-3)).currentTime=0;<br \/>\n      return 'spareu';<br \/>\n    } else if (gdurlf && document.getElementById(inid).placeholder.indexOf('P=play\/') != -1) {<br \/>\n      if (5 == 5) {<br \/>\n       thistaid='';<br \/>\n       if (isplaying == '' && !tacstarted) { cball(true); if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { isplayingnum=eval(-1 + eval('' + inid.split('_')[0].slice(-1))); }  setInterval(tacontrol, 2000); }<br \/>\n       isplayingnum=eval(-1 + eval('' + inid.split('_')[0].slice(-1)));<br \/>\n       isplaying=document.getElementById(inid).placeholder;<br \/>\n       \/\/alert(onep);<br \/>\n       aone=onep; \/\/ 'p';<br \/>\n       onep='1';<br \/>\n       \/\/thistaid=inid;<br \/>\n       \/\/lastgreen=document.getElementById(inid);<br \/>\n       \/\/document.getElementById(inid).style.border='2px dotted green';<br \/>\n      } else {<br \/>\n       todo=inid;<br \/>\n       setTimeout(dotodo, 7000); \/\/document.getElementById(inid).value='p'; \/\/alert('huh ' + inid + ' ' + document.getElementById(inid).placeholder);<br \/>\n      }<br \/>\n    }<br \/>\n    if (!document.getElementById(inid)) {<br \/>\n      var tasare=document.getElementsByTagName('textarea');<br \/>\n      for (var ibn=0; ibn&lt;tasare.length; ibn++) {<br \/>\n        if (tasare[ibn].outerHTML.indexOf('2px dotted ') != -1) {  return '' + tasare[ibn].id; }<br \/>\n      }<br \/>\n    }<br \/>\n    return inid;<br \/>\n  }<br \/>\n  <br \/>\n  function butnotavmedia(inid) {<br \/>\n    var xsuff='';<br \/>\n    try {<br \/>\n      xsuff=inid.split('_')[0].slice(-3)<br \/>\n    } catch(yfj) { xsuff=''; }<br \/>\n    if ((xsuff + 'x').substring(0,1) == '0') {<br \/>\n    if (gdurlf && document.getElementById('avmedia' + inid.split('_')[0].slice(-3))) {<br \/>\n      return 'spareu';<br \/>\n    }<br \/>\n    }<br \/>\n    if (!document.getElementById(inid)) {<br \/>\n      var tasare=document.getElementsByTagName('textarea');<br \/>\n      for (var ibn=0; ibn&lt;tasare.length; ibn++) {<br \/>\n        if (tasare[ibn].outerHTML.indexOf('2px dotted ') != -1) {  return '' + tasare[ibn].id; }<br \/>\n      }<br \/>\n    }<br \/>\n    return inid;<br \/>\n  }<br \/>\n <br \/> <br \/>\n  function cmdsanal() {<br \/>\n    var thisthird='';<br \/>\n    for (var ii=0; ii&lt;cmds.length; ii++) {<br \/>\n      thisthird=cmds[ii].split(\"','\")[2].split(\"'\")[0];<br \/>\n      if (sofara.indexOf(',' + thisthird + ',') == -1) {<br \/>\n        eval('' + cmds[ii]);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n <br \/> <br \/>\n  function tadur(thisdur, taidis, thisavoid) {<br \/>\n   var thisavo=document.getElementById(thisavoid);<br \/>\n   var wasta='' + taidis;<br \/>\n   if (!document.getElementById(taidis) || ('' + document.getElementById(taidis)) == 'undefined' || ('' + document.getElementById(taidis)) == 'null') {<br \/>\n     if (1 == 1) {<br \/>\n     if (sofara.indexOf(',' + thisavoid + ',') == -1) {<br \/>\n     if (cmds.indexOf(\"tadur('\" + thisdur + \"','undefined','\" + thisavoid + \"')\") == -1) {<br \/>\n     cmds.push(\"tadur('\" + thisdur + \"','undefined','\" + thisavoid + \"')\");<br \/>\n     }<br \/>\n     setTimeout(cmdsanal, 800);<br \/>\n     }<br \/>\n     return '';<br \/>\n     } else {<br \/>\n     tasx=document.getElementsByTagName('textarea');<br \/>\n     for (var ik=0; ik&lt;tasx.length; ik++) {<br \/>\n       if (eval(1 + ik) == eval('' + thisavo.id.replace('avmedia00',''))) {<br \/>\n         taidis='' + tasx.id;<br \/>\n       }<br \/>\n     }<br \/>\n     if (!document.getElementById(taidis) || ('' + document.getElementById(taidis)) == 'undefined' || ('' + document.getElementById(taidis)) == 'null') {<br \/>\n     if (sofara.indexOf(',' + thisavoid + ',') == -1) {<br \/>\n     if (cmds.indexOf(\"tadur('\" + thisdur + \"','undefined','\" + thisavoid + \"')\") == -1) {<br \/>\n     cmds.push(\"tadur('\" + thisdur + \"','undefined','\" + thisavoid + \"')\");<br \/>\n     }<br \/>\n     setTimeout(cmdsanal, 800);<br \/>\n     }<br \/>\n     return '';<br \/>\n     }<br \/>\n     }<br \/>\n   }<br \/>\n   \/\/alert(taidis + ' ' + wasta);<br \/>\n   if (('' + document.getElementById(taidis).placeholder) == '1\/1') {<br \/>\n     \/\/document.title='1:' + taidis + ' ' + thisdur;<br \/>\n     sofara+=',' + thisavoid + ',';<br \/>\n     curpos=0;<br \/>\n     curtaidis=taidis;<br \/>\n     curavid='' + thisavo.id;<br \/>\n     document.getElementById(taidis).placeholder='1\/' + Math.ceil(eval('' + thisdur));<br \/>\n     \/\/document.title='1:' + taidis + ' ' + thisdur + ' ' + document.getElementById(taidis).placeholder;<br \/>\n   }<br \/>\n   thisavo.currentTime=0;<br \/>\n   thisavo.setAttribute('data-dur', '' + thisdur);<br \/>\n  }<br \/>\n <br \/> <br \/>\n  function onesecfn() {<br \/>\n    curpos+=curdelta;<br \/>\n    if (curdelta != 0 && curpos &gt;= 1) {<br \/>\n     document.getElementById(curavid).setAttribute('data-at', '' + eval('' + curpos));<br \/>\n     document.getElementById(curtaidis).placeholder='' + curpos + '\/' + Math.ceil(eval('' + document.getElementById(curavid).getAttribute('data-dur')));<br \/>\n    }<br \/>\n  }<br \/>\n <br \/> <br \/>\n  function avcount(taidis,playvspause,thisavo) {<br \/>\n    if (playvspause) {<br \/>\n       curdelta=1;<br \/>\n       curtaidis=taidis;<br \/>\n       curavid='' + thisavo.id;<br \/>\n       if (('' + document.getElementById(curavid).getAttribute('data-at') + '0').substring(0,1) == '0') {<br \/>\n         curpos=0;<br \/>\n         document.getElementById(taidis).placeholder='1\/' + Math.ceil(eval('' + document.getElementById(curavid).getAttribute('data-dur')));<br \/>\n       }<br \/>\n       if (!somethingplaying) {<br \/>\n         somethingplaying=true;<br \/>\n         setInterval(onesecfn, 1000);<br \/>\n       }<br \/>\n    } else {<br \/>\n       curdelta=0;<br \/>\n       curtaidis=taidis;<br \/>\n       curavid='' + thisavo.id;<br \/>\n    }<br \/>\n  }<br \/>\n <br \/> <br \/>\n  function avend(taidis,playvspause,thisavo) {<br \/>\n       curdelta=0;<br \/>\n       curtaidis=taidis;<br \/>\n       curavid='' + thisavo.id;<br \/>\n       document.getElementById(taidis).placeholder='' + Math.ceil(eval('' + thisavo.getAttribute('data-dur'))) + '\/' + Math.ceil(eval('' + thisavo.getAttribute('data-dur')));<br \/>\n       document.getElementById(curavid).setAttribute('data-at', '00');<br \/>\n       gtaidis=taidis;<br \/>\n       setTimeout(butnotavmediap, 5000);<br \/>\n  }<br \/>\n <br \/>\n  function puttwoto(indu) {<br \/>\n    if (indu.indexOf('#') != -1) {<br \/>\n    document.getElementById('audioname').value=indu.split('#')[1];<br \/>\n    document.getElementById('result').innerHTML=indu.split('#')[0];<br \/>\n    } else {<br \/>\n    document.getElementById('result').innerHTML=indu; \/\/alert(indu);<br \/>\n    }<br \/>\n    document.getElementById('divcbi').innerHTML=dcbi;<br \/>\n  }<br \/>\n  <br \/>\n  function yesthreethree(inv) {<br \/>\n    bigdu=inv;<br \/>\n      \/\/alert('x;' + bigdu);<br \/>\n  }<br \/>\n  <br \/> <br \/>\n  function yes_threethree(inv) {<br \/>\n    bigdu=inv;<br \/>\n    \/\/alert(inv);<br \/>\n  }<br \/>\n<br \/>\n  function yes_file_name(inv, invtwo) {<br \/>\n    bigdu=encodeURIComponent(invtwo);<br \/>\n    lastname=inv;<br \/>\n    \/\/alert('xzz;' + bigdu);<br \/>\n    document.getElementById('txttxtout').value=inv;<br \/>\n    if (document.getElementById('mydownloada')) {<br \/>\n      document.getElementById('mydownloada').download='' + inv;<br \/>\n    } else if (document.getElementById('divdownloada')) {<br \/>\n      document.getElementById('divdownloada').style.display='inline-block';<br \/>\n      document.getElementById('divdownloada').innerHTML='&lt;a data-download=\"' + inv + '\" id=mydownloada style=display:inline-block;&gt;&lt;button style=background-color:yellow;&gt;Download ...&lt;\/button&gt;&lt;\/a&gt;';<br \/>\n      document.getElementById('iftxt').src='#';<br \/>\n      document.getElementById('iftxt').style.visibility='hidden';<br \/>\n    }<br \/>\n  }<br \/>\n   <br \/>\nfunction utf8ToBase64(str) { \/\/ thanks to https:\/\/www.google.com\/search?q=btoa+InvalidCharacterError%3A+The+string+contains+invalid+characters.&rlz=1C5OZZY_en&oq=btoa+InvalidCharacterError%3A+The+string+contains+invalid+characters.&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRiPAjIHCAIQIRiPAtIBCTQxODNqMGoxNagCCLACAfEFhcuQDq9PfBk&sourceid=chrome&ie=UTF-8<br \/>\n  \/\/ Encode the Unicode string to a Uint8Array using UTF-8<br \/>\n  const utf8Bytes = new TextEncoder().encode(str);<br \/>\n <br \/>\n  \/\/ Convert the Uint8Array to a binary string<br \/>\n  const binaryString = String.fromCharCode.apply(null, utf8Bytes);<br \/>\n <br \/>\n  \/\/ Use btoa on the binary string<br \/>\n  return btoa(binaryString);<br \/>\n}<br \/>\n  <br \/>\n  function yes_three_three(inv) {<br \/>\n    contis=inv;<br \/>\n    if (contis.indexOf('&lt;?php') != -1) {<br \/>\n      contis=inv.replace(\/&lt;\\?php\/g,'').replace(\/\\?&gt;\/g,'');<br \/>\n    } else if (contis.indexOf('&lt;?') == 0) {<br \/>\n      contis=inv.replace(\/&lt;\/g,'&lt;').replace(\/&gt;\/g,'&gt;').replace(\/\\&\\#\/g,'&amp;#');<br \/>\n    }<br \/>\n    var ourcontis=contis.replace(\/&lt;textarea\/g,'&lt;textarea').replace(\/&lt;\\\/textarea&gt;\/g,'&lt;\/textarea&gt;');<br \/>\n    \/\/alert(initval);<br \/>\n    document.getElementById('overt').innerHTML=initval.replace('&gt;&lt;\/textarea&gt;', '&gt;' + ourcontis + '&lt;\/textarea&gt;');<br \/>\n    document.getElementById('divdownloada').innerHTML='&lt;a download=\"' + lastname + '\" id=mydownloada style=display:inline-block; href=\"data:x-application\/text,' + escape(document.getElementById('mysubrip').value) + '\"&gt;&lt;button style=background-color:yellow;&gt;Download ...&lt;\/button&gt;&lt;\/a&gt;';<br \/>\n    \/\/alert(document.getElementById('divdownloada').innerHTML);<br \/>\n    if (contis != '') {<br \/>\n      document.getElementById('bdisplay').disabled=false; \/\/setAttribute('disabled', false);<br \/>\n      if (document.getElementById('mydownloada')) {<br \/>\n      \/\/alert(12);<br \/>\n        document.getElementById('divdownloada').style.display='inline-block';<br \/>\n      \/\/alert(212);<br \/>\n        document.getElementById('mydownloada').style.display='inline-block';<br \/>\n      \/\/alert(bigdu);<br \/>\n        if (bigdu != '' && 1 == 7) {<br \/>\n        document.getElementById('mydownloada').href='data:text\/plain;base64,' + bigdu;<br \/>\n        } else if (bigdu == '' || 7 == 7) {<br \/>\n        try {<br \/>\n        document.getElementById('mydownloada').href='data:x-application\/text,' + escape(inv);<br \/>\n        } catch(trr) {<br \/>\n        document.getElementById('mydownloada').href='data:text\/plain;base64,' + window.btoa(inv);<br \/>\n        }<br \/>\n        }<br \/>\n      \/\/alert(412);<br \/>\n        if (document.getElementById('iftxt').src != '#') {<br \/>\n        document.getElementById('iftxt').src='\/file_open_picker.html?clicktext=yesazs' + Math.floor(Math.random() * 145675);<br \/>\n        }<br \/>\n      \/\/} else {<br \/>\n      \/\/  alert(564);<br \/>\n      }<br \/>\n    }<br \/>\n    bigdu='';<br \/>\n  }<br \/>\n <br \/>\n  function oncntapp(tval,newtb,tthis) {<br \/>\n    var intb='';<br \/>\n    if (('' + tval.length) == '11' || newtb.indexOf('data:') == 0) {<br \/>\n      for (var ij=1; ij&lt;=7; ij++) {<br \/>\n       if (document.getElementById('inp00' + ij)) {<br \/>\n         if (document.getElementById('inp00' + ij).value.trim() == '') {<br \/>\n                if (newtb.indexOf('data:') == 0) {<br \/>\n                document.getElementById('inp00' + ij).value=newtb;<br \/>\n                if (document.getElementById('audioname').value != '') {<br \/>\n                document.getElementById('inp00' + ij).title=document.getElementById('audioname').value;<br \/>\n                document.getElementById('audioname').value='';<br \/>\n                } else if (document.getElementById('thewords').value != '') {<br \/>\n                document.getElementById('inp00' + ij).title=document.getElementById('thewords').value;<br \/>\n                document.getElementById('thewords').value='';<br \/>\n                }<br \/>\n                } else {<br \/>\n                while ((' ' + newtb).indexOf(\" \\\\\" + 'u') != -1) {<br \/>\n                  intb=newtb.split(\"\\\\\" + 'u')[0] + \"\\\\\" + 'u' + (' ' + newtb).split(\" \\\\\" + 'u')[1].split(' ')[0];<br \/>\n                  newtb=newtb.replace(intb,newtb.split(\"\\\\\" + 'u')[0] + eval('String.fromCodePoint(0x' + intb.substring(eval(2 + newtb.split(\"\\\\\" + 'u')[0].length)).replace(\/\\\\\\\\u\/g,',0x') + ')'));<br \/>\n                }<br \/>\n                document.getElementById('inp00' + ij).value=tval + '#' + newtb;<br \/>\n                }<br \/>\n                return '';<br \/>\n         }<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n   <br \/>\n  function checkit(iois) {<br \/>\n       twaconto = (iois.contentWindow || iois.contentDocument);<br \/>\n       if (twaconto != null) {<br \/>\n       if (twaconto.document) { twaconto = twaconto.document; }<br \/>\n       if (twaconto.getElementById('divcopyspan')) {<br \/>\n       twacontojurl=twaconto.getElementById('divcopyspan');<br \/>\n       }<br \/>\n       if (twacontoiurl || twacontojurl) { setInterval(lookfor, 3000); }<br \/>\n       }<br \/>\n  }<br \/>\n   <br \/>\n  function resultlook() {<br \/>\n    if (document.getElementById('result').innerHTML != '' || document.getElementById('resultpdfout').innerHTML != '') {<br \/>\n       if (document.getElementById('result').innerHTML != '') {<br \/>\n       imagedurl=document.getElementById('result').innerHTML;<br \/>\n       } else {<br \/>\n       imagedurl=document.getElementById('resultpdfout').innerHTML;<br \/>\n       }<br \/>\n       \/\/alert(imagedurl);<br \/>\n       document.getElementById('result').innerHTML='';<br \/>\n       document.getElementById('resultpdfout').innerHTML='';<br \/>\n       theimgurl=imagedurl;<br \/>\n       theclass=theimgurl.slice(-96).replace(\/\\:\/g,'!').replace(\/\\.\/g,'|');<br \/>\n       if (document.getElementById('myimg')) {<br \/>\n       document.getElementById('myimg').src=imagedurl;<br \/>\n       imgo=document.getElementById('myimg');<br \/>\n       document.getElementById('myimg').className=theclass;<br \/>\n       document.getElementById('imgurl').placeholder=imagedurl;<br \/>\n       document.getElementById('imgurl').title=imagedurl;<br \/>\n       document.getElementById('imgurl').value='';<br \/>\n       } else {<br \/>\n       if (5 == 5) {<br \/>\n         oncntapp('', imagedurl, null);<br \/>\n       }<br \/>\n       }<br \/>\n       imagedurl='';<br \/>\n       document.getElementById('divcbi').innerHTML=dcbi;<br \/>\n    }<br \/>\n  }<br \/>\n   <br \/>\n  function lookfor() {<br \/>\n    var uis=document.getElementById('cbi').src.replace('=','=' + Math.floor(Math.random() * 9));<br \/>\n    if (twacontojurl) {<br \/>\n      if ((twacontojurl.innerHTML + twacontojurl.title).indexOf('data:') == 0) {<br \/>\n         twocontocont='data:' + (twacontojurl.innerHTML + twacontojurl.title).split('data:')[1];<br \/>\n               \/\/ alert(twocontocont);<br \/>\n         if (5 == 5) {<br \/>\n         oncntapp('', twocontocont, null);<br \/>\n         document.getElementById('divcbi').innerHTML=dcbi;<br \/>\n         } else {<br \/>\n         document.getElementById('imgurl').value=twocontocont;<br \/>\n         }<br \/>\n         twacontojurl.innerHTML='';<br \/>\n         twacontojurl.title='';<br \/>\n         document.getElementById('cbi').style.visibility='hidden';<br \/>\n         document.getElementById('cbi').src=uis; \/\/'\/HTMLCSS\/client_browsing.htm?d=' + Math.floor(Math.random() * 19897865) + '&wording=Allimages%20images%2E%20';<br \/>\n         document.getElementById('cbi').style.visibility='visible';<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n    <br \/>\n  setInterval(resultlook, 5000);<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p>Feel free to try <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html------GETME\" rel=\"noopener\">seventh draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\">Shower Songs<\/a> <a href='#myifq'>below<a\/> and helped out a lot via <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html-----------------------------------------------GETME\" rel=\"noopener\">that changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html-----------------------------------------------GETME\" rel=\"noopener\">swipe_media.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Radio Play<\/a> project web application and <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html------------------------------------------------------------------GETME' rel=\"noopener\">today&#8217;s changed<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html------------------------------------------------------------------GETME' rel=\"noopener\">client_browsing.htm<\/a> client side <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm' rel=\"noopener\">local file browsing HTML and Javascript inhouse helper<\/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\/shower-song-media-insertions-tutorial\/' rel=\"noopener\">Shower Song Media Insertions Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ssrpbit'>Previous relevant <a target=\"_blank\" title='Shower Song Radio Play Better Integration Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/shower-song-radio-play-better-integration-tutorial\/' rel=\"noopener\">Shower Song Radio Play Better Integration Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Shower Song Radio Play Better Integration Tutorial\" src=\"\/HTMLCSS\/shower_songs_radio_play_more.gif\" title=\"Shower Song Radio Play Better Integration Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Shower Song Radio Play Better Integration Tutorial<\/p><\/div>\n<p>When you integrate, as with the day before yesterday&#8217;s <a title='Shower Song Radio Play Integration Tutorial' href='#ssrpit'>Shower Song Radio Play Integration Tutorial<\/a>, there&#8217;s the temptation to automate, but go too far.<\/p>\n<p>We were reminded of this, testing a YouTube search string &#8220;Pina Colada Song&#8221; and the <i>top pick<\/i> giving us some travel video.<\/p>\n<p>And so with this in mind, we wanted to nuance the integrations to add &#8230;<\/p>\n<ul>\n<li>the whole <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=Radio%20Play\" rel=\"noopener\">Radio Play<\/a> dropdown element is virtually cloned (with new option subelement onclick function) &#8230;<br \/>\n<code><br \/>\n  function oncntapp(tval,newtb,tthis) {<br \/>\n    var intb='';<br \/>\n    if (('' + tval.length) == '11') {<br \/>\n      for (var ij=1; ij&lt;=7; ij++) {<br \/>\n       if (document.getElementById('inp00' + ij)) {<br \/>\n         if (document.getElementById('inp00' + ij).value.trim() == '') {<br \/>\n                while ((' ' + newtb).indexOf(\" \\\\\" + 'u') != -1) {<br \/>\n                  intb=newtb.split(\"\\\\\" + 'u')[0] + \"\\\\\" + 'u' + (' ' + newtb).split(\" \\\\\" + 'u')[1].split(' ')[0];<br \/>\n                  newtb=newtb.replace(intb,newtb.split(\"\\\\\" + 'u')[0] + eval('String.fromCodePoint(0x' + intb.substring(eval(2 + newtb.split(\"\\\\\" + 'u')[0].length)).replace(\/\\\\\\\\u\/g,',0x') + ')'));<br \/>\n                }<br \/>\n                document.getElementById('inp00' + ij).value=tval + '#' + newtb<br \/>\n                return '';<br \/>\n         }<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; over into the Shower Songs to allow for non <i>&#8220;top picks&#8221;<\/i> be easily selectable, perhaps substituting into blanked out poorer entries, in the Shower Songs x 7 textbox form &#8230; and &#8230;<\/li>\n<li>the <a target=\"_blank\" title=\"YouTube\" href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> title now appears in that textbox value in the form &#8230;<br \/>\n<code><br \/>\n[YouTube-11-code]#[YouTube title] (via \"[Search String Used]\")<br \/>\n<\/code><br \/>\n &#8230; via &#8230;<br \/>\n<code><br \/>\n  var shower_songs_tbos=[], divs=[];<br \/>\n <br \/> <br \/>\n  function titlesnnsstbo() {<br \/>\n    var rerun=false, wti='', newtb='', intb='';<br \/>\n    var lastrerun=rerun;<br \/>\n    if (eval('' + shower_songs_tbos.length) > 0) {<br \/>\n     for (var irt=0; irt&lt;eval('' + shower_songs_tbos.length); irt++) {<br \/>\n       if (shower_songs_tbos[irt].value.indexOf(' (via \"') == -1) {<br \/>\n         \/\/rerun=lastrerun;<br \/>\n         if (top.window.opener) {<br \/>\n         \/\/alert(1);<br \/>\n            if (top.window.opener.document.getElementById('ajaxs')) {<br \/>\n         \/\/alert(8);<br \/>\n              if (top.window.opener.document.getElementById('ajaxs').innerHTML.indexOf(shower_songs_tbos[irt].value.split('#')[0]) != -1) {<br \/>\n                wti=(shower_songs_tbos[irt].value=shower_songs_tbos[irt].value + '#').split('#')[1];<br \/>\n         \/\/alert(wti);<br \/>\n                newtb=top.window.opener.document.getElementById('ajaxs').innerHTML.split(shower_songs_tbos[irt].value.split('#')[0])[1].split('>')[1].split('<')[0].replace(\/\\'\/g,'`').replace(\/\\\"\/g,'`').replace(\/\\#\/g,' ');\n                while ((' ' + newtb).indexOf(\" \\\\\" + 'u') != -1) {\n                  intb=newtb.split(\"\\\\\" + 'u')[0] + \"\\\\\" + 'u' + (' ' + newtb).split(\" \\\\\" + 'u')[1].split(' ')[0];\n                  newtb=newtb.replace(intb,newtb.split(\"\\\\\" + 'u')[0] + eval('String.fromCodePoint(0x' + intb.substring(eval(2 + newtb.split(\"\\\\\" + 'u')[0].length)).replace(\/\\\\\\\\u\/g,',0x') + ')'));\n                }\n                shower_songs_tbos[irt].value=(shower_songs_tbos[irt].value.replace('#' + wti,'#' + newtb + ' (via \"' + wti + '\")')).replace(\/\\#$\/g,'');\n                lastrerun=false;\n                if (irt == 0) {\n                  setTimeout(function(){\n                  if (top.window.opener.parent.window.opener.document.getElementById('dajaxs')) {\n                  if (top.window.opener.parent.window.opener.document.getElementById('dajaxs').innerHTML == '') {\n                  \/\/alert(irt);\n                  top.window.opener.parent.window.opener.document.getElementById('dajaxs').innerHTML=top.window.opener.document.getElementById('ajaxs').outerHTML.replace(' style=',' data-style=').replace(' multiple',' multiple').replace(' onchange=',' data-onchange=');\n                  }\n                  } else if (top.window.opener.parent.window.opener.document.getElementById('myform')) {\n                  if (top.window.opener.parent.window.opener.document.getElementById('myform').title == '') {\n                  divs=top.window.opener.parent.window.opener.document.getElementsByTagName('div');\n                  \/\/alert('00' + divs.length);\n                  if (('' + divs.length) != '0') {\n                  divs[eval(-1 + divs.length)].style.display='inline-block';\n                  divs[eval(-1 + divs.length)].innerHTML=top.window.opener.document.getElementById('ajaxs').outerHTML.replace(' style=',' data-style=').replace(' multiple',' multiple').replace(' onchange=',' data-onchange=');\n                  } else {\n                  top.window.opener.parent.window.opener.document.getElementById('myform').title=top.window.opener.document.getElementById('ajaxs').innerText;\n                  }\n                  }\n                  } else {\n                  divs=top.window.opener.parent.window.opener.document.getElementsByTagName('div');\n                  \/\/alert('000' + divs.length + ' ' + divs[eval(-1 + divs.length)].outerHTML);\n                  if (('' + divs.length) != '0') {\n                  divs[eval(-1 + divs.length)].style.display='inline-block';\n                  divs[eval(-1 + divs.length)].innerHTML=top.window.opener.document.getElementById('ajaxs').outerHTML.replace(' style=',' data-style=').replace(' multiple',' multiple').replace(' onchange=',' data-onchange=');\n                  \/\/alert('0000' + divs.length + ' ' + divs[eval(-1 + divs.length)].outerHTML);\n                  } else {\n                  top.window.opener.parent.window.opener.document.body.title=top.window.opener.document.getElementById('ajaxs').innerText;\n                  }\n                  }\n                  }, 5000);\n                }\n              } else {\n         \/\/alert(11);\n                lastrerun=true;\n              }\n            } else {\n         \/\/alert(111);\n              lastrerun=true;\n            }\n         }\n       } else {\n         \/\/alert(1111);\n         lastrerun=false;\n       }\n     }\n    }\n    rerun=lastrerun;\n    if (rerun) {  setTimeout(titlesnnsstbo, 2000);  }\n  }\n  <br \/>\n  function ifnnsstbo(inwo) {<br \/>\n    if (!inwo) { return null; }<br \/>\n    shower_songs_tbos.push(inwo);<br \/>\n    return inwo;<br \/>\n  }<br \/>\n  <br \/>\n  function afternnsstbo(incv) {<br \/>\n    if (eval('' + shower_songs_tbos.length) > 0) {<br \/>\n     setTimeout(titlesnnsstbo, 2000);<br \/>\n    }<br \/>\n    return incv;<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; being called into play via the streamlined (from yesterday) &#8230;<br \/>\n<code><br \/>\n  \/\/ Talk to shower_songs.html<br \/>\n  if (top.document.URL.indexOf('regarding=') != -1 && top.document.URL.indexOf('isradio=') != -1 && top.document.URL.indexOf('youtube=') != -1) {<br \/>\n    if (top.window.opener) {<br \/>\n        var waszv='';<br \/>\n        for (var inm=0; inm&lt;Math.min(7,eval('' + vidids.length)); inm++) {<br \/>\n          if (ifnnsstbo(top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm)))) {<br \/>\n            if (top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm)).value.indexOf('#') == -1) {<br \/>\n                waszv= top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm)).value;<br \/>\n                top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm)).value=vidids[inm] + '#' + waszv;<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n        top.window.opener.parent.window.opener.document.body.style.cursor=afternnsstbo('pointer');<br \/>\n    }<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>And so, yet again, try <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html-----GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html-----GETME\" rel=\"noopener\">sixth draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\">Shower Songs<\/a> <a href='#myifq'>below<a\/> and helped out a lot via  <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html-----------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html-----------------------------------------------GETME\" rel=\"noopener\">swipe_media.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Radio Play<\/a> project web application.<\/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\/shower-song-radio-play-better-integration-tutorial\/' rel=\"noopener\">Shower Song Radio Play Better Integration Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ssrpit'>Previous relevant <a target=\"_blank\" title='Shower Song Radio Play Integration Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/shower-song-radio-play-integration-tutorial\/' rel=\"noopener\">Shower Song Radio Play Integration Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Shower Song Radio Play Integration Tutorial\" src=\"\/HTMLCSS\/shower_songs_radio_play.gif\" title=\"Shower Song Radio Play Integration Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Shower Song Radio Play Integration Tutorial<\/p><\/div>\n<p>If you&#8217;ll pardon the pun &#8230;<\/p>\n<blockquote><p>\nWe&#8217;ve been like a &#8220;broken record&#8221; regarding that familiar theme of &#8220;Sequential Play of YouTube Music Videos&#8221; over a few years now\n<\/p><\/blockquote>\n<p> &#8230; and today we&#8217;re integrating the &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=Radio%20Play\" rel=\"noopener\">Radio Play<\/a> project smarts of recent times &#8230; into <strike>no, not the shower<\/strike>, <a target=\"_blank\" title=\"?\" style=\"cursor:pointer;text-decoration:underline;\" href=\"\/HTMLCSS\/luna_upstairs.jpeg\" rel=\"noopener\">Luna<\/a>! &#8230; but into &#8230;<\/li>\n<li>Shower Songs<\/li>\n<\/ul>\n<p> &#8230; yay!?!   Because, let&#8217;s face it, not many of us walk around with 11 character <a target=\"_blank\" title=\"YouTube\" href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> video codes in our head <strike>and no, not there either<\/strike>, <a target=\"_blank\" title=\"?\" style=\"cursor:pointer;text-decoration:underline;\" href=\"\/HTMLCSS\/luna_vehicle.jpg\" rel=\"noopener\">Luna<\/a>!!<\/p>\n<p>That Radio Play project integrated with the great YouTube&#8217;s search functionality, to be able to &#8230;<\/p>\n<ul>\n<li>consider a search string (users can enter via a new textbox within that new form as per yesterday&#8217;s advances) &#8230; and &#8230;<\/li>\n<li>return a related 11 character YouTube video code<\/li>\n<\/ul>\n<p> &#8230; as the means by which the user contents parts of our Shower Songs project can be improved a lot, further to yesterday&#8217;s <a title='Shower Song Remember and Recall Tutorial' href='#ssrrt'>Shower Song Remember and Recall Tutorial<\/a>!  <a target=\"_blank\" title=\"?\" style=\"cursor:pointer;text-decoration:underline;\" href=\"\/HTMLCSS\/luna_backagain-2.jpeg\" rel=\"noopener\">Luna<\/a>?!<\/p>\n<p>Yet again, try <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html----GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html----GETME\" rel=\"noopener\">fifth draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\">Shower Songs<\/a> <a href='#myifq'>below<a\/> and helped out a lot via  <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html----------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html----------------------------------------------GETME\" rel=\"noopener\">swipe_media.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Radio Play<\/a> project web application, <font color=blue>as per<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;script type=text\/javascript><br \/>\n    var dwfrom='youllneverfindthis';<br \/>\n    var dwto='youllneverfindthis';<br \/>\n    if (document.URL.indexOf('isradio=') != -1) {<br \/>\n     dwfrom=' style=\"min-width:';<br \/>\n     dwto=' style=\"opacity:0.6;cursor:progress;border-left:8px dotted yellow;border-right:8px dotted yellow;min-width:';<br \/>\n    }<br \/>\n    var bigline=\"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=bdisco onclick=\\\"dodisco('bdisco=radnoiswas&');\\\" style='background-color:yellow;'>\" + dword + \"&lt;sup>A+V&lt;\/sup>&nbsp;&lt;span id=bdiscoavb title='Radio A+V ... double click for compilation' ondblclick=\\\"event.stopPropagation(); triplewhammy(this); \\\"  onclick=\\\"event.stopPropagation(); setTimeout(function(){ dodisco('isradio=bdiscoavb&'); }, 2000);\\\" style='background-color:yellow;visibility:hidden;'>&#128251;&lt;\/span>&lt;\/button>&nbsp;&lt;button id=bdiscoa onclick=\\\"dodisco('bdiscoa=radnoiswas&audio');\\\" style='background-color:yellow;'>\" + dword + \"&lt;sub>A-V&lt;\/sub>&nbsp;&lt;span id=bdiscob title='Radio A-V ... double click for compilation' ondblclick=\\\"event.stopPropagation(); triplewhammy(this); \\\" onclick=\\\"event.stopPropagation(); setTimeout(function(){ dodisco('isradio=bdiscob&audio'); }, 2000);\\\" style='background-color:yellow;visibility:hidden;'>&#128251;&lt;\/span>&lt;\/button>&nbsp;&nbsp;&lt;button id=bwc onclick=\\\"dowc('bwc=radnoiswas&');\\\" style='background-color:yellow;'>\" + twcword + \"&lt;sup>A+V&lt;\/sup>&nbsp;&lt;span id=bwcavb title='Radio A+V ... double click for compilation' ondblclick=\\\"event.stopPropagation(); triplewhammy(this); \\\"  onclick=\\\"event.stopPropagation(); setTimeout(function(){ dowc('isradio=bwcavb&'); }, 2000);\\\" style='background-color:yellow;visibility:hidden;'>&#128251;&lt;\/span>&lt;\/button>&nbsp;&lt;button id=bwca onclick=\\\"dowc('bwca=radnoiswas&audio');\\\" style='background-color:yellow;'>\" + twcword + \"&lt;sub>A-V&lt;\/sub>&nbsp;&lt;span id=bwcb title='Radio A-V ... double click for compilation' ondblclick=\\\"event.stopPropagation(); triplewhammy(this); \\\"  onclick=\\\"event.stopPropagation(); setTimeout(function(){ dowc('isradio=bwcb&audio'); }, 2000);\\\" style='background-color:yellow;visibility:hidden;'>&#128251;&lt;\/span>&lt;\/button>&nbsp;&nbsp;&lt;button id=byr onclick=\\\"doyr('byr=radnoiswas&');\\\" style='background-color:yellow;'>\" + yrword.replace('YaJUNKcht ', 'Yacht++ ') + \"&lt;sup>A+V&lt;\/sup>&nbsp;&lt;span id=byravb title='Radio A+V ... double click for compilation' ondblclick=\\\"event.stopPropagation(); triplewhammy(this); \\\"  onclick=\\\"event.stopPropagation(); setTimeout(function(){ doyr('isradio=byravb&'); }, 2000);\\\" style='background-color:yellow;visibility:hidden;'>&#128251;&lt;\/span>&lt;\/button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=byra onclick=\\\"doyr('byra=radnoiswas&audio');\\\" style='background-color:yellow;'>\" + yrword.replace('YaJUNKcht ', 'Yacht++ ') + \"&lt;sub>A-V&lt;\/sub>&nbsp;&lt;span id=byrb title='Radio A-V ... double click for compilation' ondblclick=\\\"event.stopPropagation(); triplewhammy(this); \\\"  onclick=\\\"event.stopPropagation(); setTimeout(function(){ doyr('isradio=byrb&audio'); }, 2000);\\\" style='background-color:yellow;visibility:hidden;'>&#128251;&lt;\/span>&lt;\/button>&nbsp;&nbsp;&nbsp;&nbsp;&lt;button id=recallable title=Saved onclick=\\\"recallit(this);\\\" style='background-color:orange;visibility:hidden;'>&lt;\/button>\";<br \/>\n    if (window.opener) {<br \/>\n    <br \/>\n       if (document.URL.indexOf('isradio=') != -1 && document.URL.indexOf('youtube=') != -1) {<br \/>\n    <br \/> <br \/>\n  <font color=blue>\/\/ Talk to shower_songs.html<br \/>\n  if (top.document.URL.indexOf('regarding=') != -1 && top.document.URL.indexOf('isradio=') != -1 && top.document.URL.indexOf('youtube=') != -1) {<br \/>\n    if (top.window.opener) {<br \/>\n        var waszv='';<br \/>\n        for (var inm=0; inm&lt;Math.min(7,eval('' + vidids.length)); inm++) {<br \/>\n          if (top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm))) {<br \/>\n            if (top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm)).value.indexOf('#') == -1) {<br \/>\n                waszv= top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm)).value;<br \/>\n                top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm)).value=vidids[inm] + '#' + waszv;<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n        top.window.opener.parent.window.opener.document.body.style.cursor='pointer';<br \/>\n    }<br \/>\n  }<\/font><br \/>\n<br \/>\n         if (!asa) { assoonas(); }<br \/>\n         radioblurb=' ... click on start song (when emojis appear) then we suggest minimising window small but on top (next to other work windows) for radio sequenced play';<br \/>\n         var doctt='' + document.title;<br \/>\n         document.title=String.fromCodePoint(128251) + ' ' + (location.search.split('regarding=')[1] ? decodeURIComponent(location.search.split('regarding=')[1].split('&')[0]).replace('Yacht Rock','Yacht++ Rock') : '') + ' Radio Play ... ' + doctt;<br \/>\n       } else {<br \/>\n         if (!asa) { as_soon_as(); } \/\/document.getElementById('td0001').style.border='15px dotted yellow';<br \/>\n         radioblurb=' ... please wait for more than one checkbox checked before radio sequenced play is started above';<br \/>\n       }<br \/>\n    } else if (document.URL.indexOf('isradio=') != -1) {<br \/>\n       if (!asa) { as_soon_as(); } \/\/document.getElementById('td0001').style.border='15px dotted yellow';<br \/>\n       radioblurb=' ... please wait for more than one checkbox checked before radio sequenced play is started above';<br \/>\n       if (document.URL.indexOf('youtube=') != -1) {<br \/>\n         var xdoctt='' + document.title;<br \/>\n         document.title=String.fromCodePoint(128251) + ' ' + (location.search.split('regarding=')[1] ? decodeURIComponent(location.search.split('regarding=')[1].split('&')[0]).replace('Yacht Rock','Yacht++ Rock') : '') + ' Radio Play ... ' + xdoctt;<br \/>\n       }<br \/>\n    }<br \/>\n    if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n         radioblurb+=' and we recommend screen lock on';<br \/>\n    }<br \/>\n    for (var kk=1; kk&lt;=eval(100 * numc); kk++) {<br \/>\n     if (eval(kk % eval('' + bcol.length)) == 0) {<br \/>\n      dw+=('&lt;td class=loremipsum data-alt=\"\" data-arb=\"\" data-vid=\"\" data-curs=\"' + cursanimtwo[cntcurs] + '\" alt=\"Cell ' + kk + radioblurb + cursanimtwo[cntcurs] + '\" title=\"If not showing an image ( this one thanks to Lorem Picsum at https:\/\/picsum.photos\/ ) or to reveal it behind audio or video foreground content please double click here at cell ' + kk + '.\" ondblclick=refresh(this.id); id=\"td' + ('0000' + kk).slice(-4) + '\" style=\"min-width:' + amin + 'px;min-height:' + amin + 'px;width:' + amin + 'px;height:' + amin + \"px;background-color:\" + bcol[eval(kk % eval('' + bcol.length))] + \";\" + 'background-size:contain;background-repeat:no-repeat;\">' + grabcontent(eval(-1 + kk)) + '&lt;\/td>').replace(dwfrom,dwto);<br \/>\n      setTimeout(cursanimate, 600);<br \/>\n     } else {<br \/>\n      dw+=('&lt;td onmousedown=\"checkmeout(event,false);\" ontouchdown=\"checkmeout(event,false);\" oncontextmenu=\"checkmeout(event,true);\" class=inhouse data-alt=\"\" data-arb=\"\" data-vid=\"\" alt=\"Cell ' + kk + radioblurb + cursanimtwo[cntcurs] + '\" title=\"If not showing an image ( yellow cell ones thanks to Lorem Picsum at https:\/\/picsum.photos\/ ) please double click here at cell ' + kk + ' or just click to get popup window of associated WordPress Blog Posting else right click for associated Cut to the Chase.\" ondblclick=refresh(this.id); id=\"td' + ('0000' + kk).slice(-4) + '\" style=\"min-width:' + amin + 'px;min-height:' + amin + 'px;width:' + amin + 'px;height:' + amin + \"px;background-color:\" + bcol[eval(kk % eval('' + bcol.length))] + \";\" + 'background-size:contain;background-repeat:no-repeat;\">' + grabcontent(eval(-1 + kk)) + '&lt;\/td>').replace(dwfrom,dwto);<br \/>\n     }<br \/>\n     dwfrom='youllneverfindthis';<br \/>\n     dwto='youllneverfindthis';<br \/>\n    }<br \/>\n    if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && (isPortrait || isLandscape)) {<br \/>\n      bigline=bigline.replace(\/\\>The Wrecking Crew\/g,'>The Wrecking &lt;br>Crew').replace(\/\\>Yacht\\+\\+ Rock\/g,'>Yacht++ &lt;br>Rock').replace(\/\\>Yacht Rock\/g,'>Yacht &lt;br>Rock').replace(\/\\>Disco\/g,'>Disco &lt;br>');<br \/>\n    }<br \/>\n    document.write(dw + \"&lt;\/tr>&lt;\/table>&lt;br>\" + bigline);<br \/>\n&lt;\/script><br \/>\n<\/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\/shower-song-radio-play-integration-tutorial\/' rel=\"noopener\">Shower Song Radio Play Integration Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ssrrt'>Previous relevant <a target=\"_blank\" title='Shower Song Remember and Recall Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/shower-song-remember-and-recall-tutorial\/' rel=\"noopener\">Shower Song Remember and Recall Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Shower Song Remember and Recall Tutorial\" src=\"\/HTMLCSS\/shower_songs_remember.png\" title=\"Shower Song Remember and Recall Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Shower Song Remember and Recall Tutorial<\/p><\/div>\n<p>Following on from yesterday&#8217;s <a title='Shower Song Mobile User Functionality Tutorial' href='#ssmuft'>Shower Song Mobile User Functionality Tutorial<\/a> today &#8230;<\/p>\n<ul>\n<li>we would like to help out the user &#8230;<\/li>\n<li>via a &#8220;remembering&#8221; form &#8230; assisted by &#8230;<\/li>\n<li>a &#8220;recalling&#8221; usefulness via window.<a target=\"_blank\" title='window.localStorage information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp' rel=\"noopener\">localStorage<\/a> means &#8230; and flagged to the user via &#8230;<\/li>\n<li>delivering dropdown options<\/li>\n<\/ul>\n<p> &#8230; reflecting those settings the user has chosen to remember out of &#8230;<\/p>\n<ul>\n<li>YouTube 11 character video code(s) (up to 7)<\/li>\n<li>an order of play (up to 7)<\/li>\n<\/ul>\n<p>So, again, try <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html---GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html---GETME\" rel=\"noopener\">fourth draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\">Shower Songs<\/a> <a href='#myifq'>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\/shower-song-remember-and-recall-tutorial\/' rel=\"noopener\">Shower Song Remember and Recall Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ssmuft'>Previous relevant <a target=\"_blank\" title='Shower Song Mobile User Functionality Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/shower-song-mobile-user-functionality-tutorial\/' rel=\"noopener\">Shower Song Mobile User Functionality Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Shower Song Mobile User Functionality Tutorial\" src=\"\/HTMLCSS\/shower_songs_two_mobile.gif\" title=\"Shower Song Mobile User Functionality Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Shower Song Mobile User Functionality Tutorial<\/p><\/div>\n<p>The better fit &#8220;hardware wise&#8221; for a &#8220;shower scene&#8221; is one of the mobile devices.  And so, onto yesterday&#8217;s <a title='Shower Song User Functionality Tutorial' href='#ssuft'>Shower Song User Functionality Tutorial<\/a> we&#8217;ve started down Mobile Road to <a target=\"_blank\" title=\"?\" href='https:\/\/www.google.com\/search?q=what+town+is+close+to+mobile&#038;rlz=1C5OZZY_en&#038;oq=what+town+is+close+to+mobile&#038;gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIICAEQABgWGB4yDQgCEAAYhgMYgAQYigUyDQgDEAAYhgMYgAQYigUyDQgEEAAYhgMYgAQYigUyDQgFEAAYhgMYgAQYigUyCggGEAAYogQYiQUyCggHEAAYogQYiQUyCggIEAAYogQYiQUyCggJEAAYgAQYogTSAQg5NzA2ajBqN6gCALACAA&#038;sourceid=chrome&#038;ie=UTF-8' rel=\"noopener\">Chickasaw<\/a> today, easing us into &#8230;<\/p>\n<ul>\n<li>in the mobile woooorrrrllllddd a red button overlays a YouTube video so that the audio stream of a video tap of a user will be a real user gesture &#8230; and if the red buttons are slow to appear, before that the links can navigate you to a YouTube video play scenario, as distinct from &#8230;<\/li>\n<li>in the non-mobile woooorrrrllllddd (we&#8217;ve heard starts near <a target=\"_blank\" title=\"?\" href='https:\/\/www.google.com\/search?q=what+town+is+close+to+mobile&#038;rlz=1C5OZZY_en&#038;oq=what+town+is+close+to+mobile&#038;gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIICAEQABgWGB4yDQgCEAAYhgMYgAQYigUyDQgDEAAYhgMYgAQYigUyDQgEEAAYhgMYgAQYigUyDQgFEAAYhgMYgAQYigUyCggGEAAYogQYiQUyCggHEAAYogQYiQUyCggIEAAYogQYiQUyCggJEAAYgAQYogTSAQg5NzA2ajBqN6gCALACAA&#038;sourceid=chrome&#038;ie=UTF-8' rel=\"noopener\">Chickasaw<\/a>) clicks can be of the programmatical kind <font size=1>&#8230; and we recommend &#8220;kind clicking&#8221; at all times<\/font><\/li>\n<\/ul>\n<p>We&#8217;re not saying that there is not more work to do (in &#8220;double negative heaven&#8221;), but we realized &#8230;<\/p>\n<ul>\n<li>on mobile a tap interrupts &#8220;normal audio play&#8221; transmission &#8230; different to &#8230;<\/li>\n<li>on non-mobile a click may not interrupt a previously arranged &#8220;normal audio play&#8221; transmission<\/li>\n<\/ul>\n<p>Big deal?!  Yes, you&#8217;d <sup>not<\/sup> think so, but there you are, as we &#8216;ve been on that little conundrum for two hours now, with lots of blaspheming?!<\/p>\n<p>Much more testing, but we took our iPhone into the shower, placed it far away from the shower near an open window, and picked a good shower song (am a sucker for &#8220;I&#8217;m With You&#8221;), and clicked the looping emoji to just repeat that song four times, as one of our tests &#8230; sorry about the long shower &#8230; <strike>peepholes<\/strike>people of the wooooooorrrrrlllllddd?!<\/p>\n<p>Try <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html--GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html--GETME\" rel=\"noopener\">third draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\">Shower Songs<\/a> <a href='#myifq'>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\/shower-song-mobile-user-functionality-tutorial\/' rel=\"noopener\">Shower Song Mobile User Functionality Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ssuft'>Previous relevant <a target=\"_blank\" title='Shower Song User Functionality Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/shower-song-user-functionality-tutorial\/' rel=\"noopener\">Shower Song User Functionality Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Shower Song User Functionality Tutorial\" src=\"\/HTMLCSS\/shower_songs_two.gif\" title=\"Shower Song User Functionality Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Shower Song User Functionality Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Shower Song Primer Tutorial' href='#sspt'>Shower Song Primer Tutorial<\/a> we&#8217;ve been shoring up user functionality, today, adding in quite a few emoji button helpers pointing to functionality.<\/p>\n<p>Lots of the thinking revolved around trying to space out the user checkbox clicking on non-mobile control of the HTML input type=checkbox<sup><font size=1>s<\/font><\/sup> &#8230;<\/p>\n<p><code><br \/>\n <a target=\"_blank\" title='HTML disabled attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_disabled.asp' rel=\"noopener\">disabled<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; attribute &#8230;<\/p>\n<p><code><br \/>\n  var ftime=true;<br \/>\n<br \/>\n  function whendo() {<br \/>\n    var ccnt=0;<br \/>\n    var talisti=eval(-1 + eval('' + document.body.innerHTML.split(' style=\"z-index:599').length)); \/\/('span');<br \/>\n    var talist=document.getElementsByTagName('sup');<br \/>\n    var inlist=document.getElementsByTagName('input');<br \/>\n    for (var ik=0; ik&lt;inlist.length; ik++) {<br \/>\n      if (inlist[ik].outerHTML.indexOf('checkbox') != -1) {<br \/>\n        ccnt++;<br \/>\n      }<br \/>\n    }<br \/>\n    if (eval('' + talist.length) &lt; ccnt) {<br \/>\n        setTimeout(whendo, 1000);<br \/>\n    } else {<br \/>\n        talist=document.getElementsByTagName('a');<br \/>\n        for (var iki=0; iki&lt;talist.length; iki++) {<br \/>\n          if (talist[iki].outerHTML.indexOf(' class=\"processytplay\"') != -1) {<br \/>\n            talist[iki].onmousedown=function(event){ myac(event.target);  };<br \/>\n          }<br \/>\n        }<br \/>\n        setTimeout(function(){ cball(false); }, 500);<br \/>\n    }<br \/>\n   <br \/> <br \/>\n  }<br \/>\n<br \/>\n  function cball(to) {<br \/>\n    var inlist=document.getElementsByTagName('input');<br \/>\n    for (var ik=0; ik&lt;inlist.length; ik++) {<br \/>\n      if (inlist[ik].outerHTML.indexOf('checkbox') != -1) {<br \/>\n       if (to) {<br \/>\n        inlist[ik].setAttribute('disabled',to);<br \/>\n       } else {<br \/>\n        inlist[ik].removeAttribute('disabled');<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n    <br \/>\n    if (ftime) {<br \/>\n      ftime=false;<br \/>\n      if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n        setTimeout(whendo, 1000);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html-GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html-GETME\" rel=\"noopener\">second draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\">Shower Songs<\/a> <a href='#myifq'>as 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\/shower-song-user-functionality-tutorial\/' rel=\"noopener\">Shower Song User Functionality Tutorial<\/a>.<\/p-->\n<hr>\n<p id='sspt'>Previous relevant <a target=\"_blank\" title='Shower Song Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/shower-song-primer-tutorial\/' rel=\"noopener\">Shower Song Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Shower Song Primer Tutorial\" src=\"\/HTMLCSS\/shower_songs.jpg\" title=\"Shower Song Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Shower Song Primer Tutorial<\/p><\/div>\n<p>We&#8217;re onto a new music related project today, with that familiar theme of &#8220;Sequential Play of YouTube Music Videos&#8221; where today&#8217;s project, so far, just hones in on the &#8220;audio stream only of those YouTube videos&#8221;.<\/p>\n<p>We have some provisos with our <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\">Shower Songs<\/a> collection &#8230;<\/p>\n<ul>\n<li>it will work on mobile but not to the automated state non-mobile is in, on this first draft &#8230;<\/li>\n<li>more display niceties to come &#8230;<\/li>\n<li>user content functionality to come &#8230;<\/li>\n<\/ul>\n<p> &#8230; but feel free to set yourself up (but careful of &#8220;bathroom mist&#8221; not being good for electronic devices) with today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html_GETME\" rel=\"noopener\">first draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\">Shower Songs<\/a> as below &#8230;<\/p>\n<p><iframe id=myifq style=width:98%;height:1500px; src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html'><\/iframe><\/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='#d72770' onclick='var dv=document.getElementById(\"d72770\"); 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='d72770' 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='#d72779' onclick='var dv=document.getElementById(\"d72779\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/disabled\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d72779' 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='#d72795' onclick='var dv=document.getElementById(\"d72795\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iphone\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d72795' 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='#d72808' onclick='var dv=document.getElementById(\"d72808\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dropdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d72808' 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='#d72813' onclick='var dv=document.getElementById(\"d72813\"); 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='d72813' 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='#d72830' onclick='var dv=document.getElementById(\"d72830\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/youtube\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d72830' 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='#d72842' onclick='var dv=document.getElementById(\"d72842\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/browse\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d72842' 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='#d72861' onclick='var dv=document.getElementById(\"d72861\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/share\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d72861' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Though we like programming in (serverside) PHP we&#8217;d prefer to leave it to (clientside) HTML and Javascript and CSS to contain solutions to web application challenges, as much as anything because PHP relies on an arrangement such as the great &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/shower-song-sharing-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,12,14,37],"tags":[69,83,3456,1832,113,3092,119,2051,5464,1993,3531,5461,168,181,3913,3912,4377,184,3349,4286,214,3136,252,2442,2697,5463,265,290,1654,2237,364,4385,380,400,576,587,590,626,631,652,3810,2178,760,2732,822,3529,4712,870,4267,907,1738,929,932,997,5478,4086,3716,1133,1137,1159,2263,3927,1254,1675,1319,5460,1345,1369,1493],"class_list":["post-72861","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-ajax","tag-animated-gif","tag-annotate","tag-annotation","tag-audio","tag-automate","tag-automation","tag-blob","tag-blob-canvas","tag-browse","tag-browsing","tag-brwose","tag-buffer","tag-call","tag-called","tag-caller","tag-calling","tag-canvas","tag-client-pre-emptive-iframe","tag-clientside","tag-clipboard","tag-conduit","tag-connection","tag-contenteditable","tag-contentedital","tag-copt","tag-copy","tag-data","tag-data-uri","tag-drag","tag-drag-and-drop","tag-drop","tag-email","tag-event","tag-html","tag-iframe","tag-image","tag-ios","tag-iphone","tag-javascript","tag-macbook-air","tag-macos","tag-media","tag-mimetype","tag-music-2","tag-onblue","tag-ondrop","tag-onload","tag-onpaste","tag-paste","tag-photo","tag-photograph","tag-php","tag-programming","tag-pst","tag-select-all","tag-serverside","tag-share","tag-sharing","tag-sms","tag-span","tag-standalone","tag-text","tag-textbox","tag-tutorial","tag-universal-clipboard","tag-url","tag-video","tag-youtube"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72861"}],"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=72861"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72861\/revisions"}],"predecessor-version":[{"id":72867,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72861\/revisions\/72867"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=72861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=72861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=72861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}