{"id":72813,"date":"2026-04-27T03:01:00","date_gmt":"2026-04-26T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=72813"},"modified":"2026-04-26T21:21:19","modified_gmt":"2026-04-26T11:21:19","slug":"shower-song-radio-play-integration-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/shower-song-radio-play-integration-tutorial\/","title":{"rendered":"Shower Song Radio Play Integration 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 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>Radio Play 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","protected":false},"excerpt":{"rendered":"<p>If you&#8217;ll pardon the pun &#8230; We&#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 &#8230; and today we&#8217;re integrating the &#8230; Radio Play project smarts of &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/shower-song-radio-play-integration-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[83,3456,1832,113,2051,5464,3531,5461,168,181,3913,3912,4377,184,3349,214,218,252,2442,2697,5463,265,1654,2237,364,4385,400,576,587,590,614,626,631,652,3810,2178,760,2732,3529,4712,870,4267,907,1738,929,997,1110,4086,1168,2263,3927,1254,1675,1319,5460,1345,1369,1493],"class_list":["post-72813","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-animated-gif","tag-annotate","tag-annotation","tag-audio","tag-blob","tag-blob-canvas","tag-browsing","tag-brwose","tag-buffer","tag-call","tag-called","tag-caller","tag-calling","tag-canvas","tag-client-pre-emptive-iframe","tag-clipboard","tag-code","tag-connection","tag-contenteditable","tag-contentedital","tag-copt","tag-copy","tag-data-uri","tag-drag","tag-drag-and-drop","tag-drop","tag-event","tag-html","tag-iframe","tag-image","tag-integration","tag-ios","tag-iphone","tag-javascript","tag-macbook-air","tag-macos","tag-media","tag-mimetype","tag-onblue","tag-ondrop","tag-onload","tag-onpaste","tag-paste","tag-photo","tag-photograph","tag-programming","tag-search","tag-select-all","tag-software-integration","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\/72813"}],"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=72813"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72813\/revisions"}],"predecessor-version":[{"id":72826,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72813\/revisions\/72826"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=72813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=72813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=72813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}