{"id":73985,"date":"2026-07-20T03:01:00","date_gmt":"2026-07-19T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=73985"},"modified":"2026-07-20T06:27:42","modified_gmt":"2026-07-19T20:27:42","slug":"shower-songs-delimitation-role-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/shower-songs-delimitation-role-tutorial\/","title":{"rendered":"Shower Songs Delimitation Role Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/FtE3hoR_Nvo,W5IKT_xue4o,IfaGhyK78E8,BuN3yCmHb_U,TdiAwCPb_As,euZcUku9XiE,aMs0rNtBZJk\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Shower Songs Delimitation Role Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/ss_ass.jpg\" title=\"Shower Songs Delimitation Role Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Shower Songs Delimitation Role Tutorial<\/p><\/div>\n<p>You&#8217;d think we&#8217;d be done with <i>ablutions<\/i> at this blog, but noooooo wayyyy &#8230; Luna says &#8230; there&#8217;s all manner of molecular interest out there &#8230;<\/p>\n<p><img id=myimgisagain title=Luna src='\/HTMLCSS\/luna_vehicle.jpg'><\/img><\/p>\n<blockquote><p>\nIt&#8217;s not just H and the 2 and the O &#8230; it&#8217;s <i>the art of the <strike>role<\/strike>roll<\/i>.\n<\/p><\/blockquote>\n<p><video controls><source src='\/\/www.rjmprogramming.com.au\/Mac\/rolling.mov' type='video\/mp4'><\/source><\/video><\/p>\n<p> &#8230; or so says &#8220;The Lu&#8221; anyway!<\/p>\n<p>We wanted our recent Shower Songs web application be the application of choice for URLs at RJM Programming involving &#8230;<\/p>\n<ul>\n<li>comma separated (ie. tightly separated) delimiter lists &#8230; consisting of &#8230;<\/li>\n<li>seven items &#8230; each &#8230;<\/li>\n<li>eleven characters long &#8230; and satisfying &#8230;<\/li>\n<li>our <a title='YouTube' href='https:\/\/youtube.com'>YouTube<\/a> video identifier code tests ( ie. end in a particular character within AEIMQUYcgkosw048 and encodeURIComponent([thisCode]) == [thisCode] ) <font size=1>&#8230; else, other comma separated lists might be passed onto <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/swipe_media.html\" rel=\"noopener\">Tabular Single Row Image Gallery<\/a><\/font><\/li>\n<\/ul>\n<p> &#8230; akin to Operating System application <a target=\"_blank\" title='File associations information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/File_association' rel=\"noopener\">&#8220;associations&#8221;<\/a>, and carrying on the themes talked about with <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/media-data-uri-wordpress-blog-not-found-redirect-tutorial\/' title='Media Data URI WordPress Blog Not Found Redirect Tutorial' rel=\"noopener\">Media Data URI WordPress Blog Not Found Redirect Tutorial<\/a> and the recent <a title='Shower Songs Colour Coding Tutorial' href='#sscct'>Shower Songs Colour Coding Tutorial<\/a>.<\/p>\n<p>It&#8217;s going to take longer than today&#8217;s work, but progress is there with a &#8220;first draft&#8221; of making this happen involving &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html-----------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html-----------GETME\" rel=\"noopener\">shower_songs.html<\/a> external Javascript powered <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\">Shower Songs<\/a> <font size=1>(at the grandparent level)<\/font><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-------------------------------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html-------------------------------------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" rel=\"noopener\">YouTube API inhouse supervisor<\/a> <font size=1>(at the parent level)<\/font><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html---------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html---------------------------------------------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">YouTube API inhouse interfacer<\/a> <font size=1>(at the grandchild\/child level)<\/font> &#8230; all helped out by &#8230;<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/ytaudioonly.js---------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/ytaudioonly.js---------------------GETME\" rel=\"noopener\">ytaudioonly.js<\/a> external Javascript helper<\/li>\n<\/ul>\n<p> &#8230; along with the RJM Programming&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/404.shtml_newestokay\" rel=\"noopener\">404.shtml<\/a> <a target=\"_blank\" title='HTTP 404 error information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/HTTP_404' rel=\"noopener\">HTTP Error Code 404<\/a> supervisor &#8230;<\/p>\n<p><code><br \/>\nif (<font color=blue>eval(('' + encodeURIComponent((decodeURIComponent(document.URL.replace(anybitstoignore,'').replace('.au ','.au\/').replace('.au%20','.au\/').split('rjmprogramming.com.au\/')[1].replace(\/^index\\.php\/g,'').replace(\/^index\\.html\/g,'').replace(\/^index\\.htm\/g,'').replace(\/^\\%20\/g,'').replace(\/^\\%20\/g,'').replace(\/^\\%20\/g,'').replace(\/^\\%20\/g,'').replace(\/^\\%20\/g,'')) + ',').replace(\/[AEIMQUYcgkosw048]\\,\/g,'z'))).length) == 77 && eval(('' + decodeURIComponent(document.URL.replace(anybitstoignore,'').replace('.au ','.au\/').replace('.au%20','.au\/').split('rjmprogramming.com.au\/')[1].replace(\/^index\\.php\/g,'').replace(\/^index\\.html\/g,'').replace(\/^index\\.htm\/g,'').replace(\/^\\%20\/g,'').replace(\/^\\%20\/g,'').replace(\/^\\%20\/g,'').replace(\/^\\%20\/g,'').replace(\/^\\%20\/g,''))).length) == 83 && eval('' + decodeURIComponent(document.URL.replace(anybitstoignore,'').replace('.au ','.au\/').replace('.au%20','.au\/').split('rjmprogramming.com.au\/')[1].replace(\/^index\\.php\/g,'').replace(\/^index\\.html\/g,'').replace(\/^index\\.htm\/g,'').replace(\/^\\%20\/g,'').replace(\/^\\%20\/g,'').replace(\/^\\%20\/g,'').replace(\/^\\%20\/g,'').replace(\/^\\%20\/g,'')).split(',').length) == 7<\/font>) {<br \/>\n      location.href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html?thelist=' + encodeURIComponent(decodeURIComponent(document.URL.replace(anybitstoignore,'').replace('.au ','.au\/').replace('.au%20','.au\/').split('rjmprogramming.com.au\/')[1].replace(\/^index\\.php\/g,'').replace(\/^index\\.html\/g,'').replace(\/^index\\.htm\/g,'').replace(\/^\\%20\/g,'').replace(\/^\\%20\/g,'').replace(\/^\\%20\/g,'').replace(\/^\\%20\/g,'').replace(\/^\\%20\/g,'')));<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; <font color=blue>making it swing the Shower Songs into play<\/font> with an erroneous URL such as &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/FtE3hoR_Nvo,W5IKT_xue4o,IfaGhyK78E8,BuN3yCmHb_U,TdiAwCPb_As,euZcUku9XiE,aMs0rNtBZJk' href='https:\/\/www.rjmprogramming.com.au\/FtE3hoR_Nvo,W5IKT_xue4o,IfaGhyK78E8,BuN3yCmHb_U,TdiAwCPb_As,euZcUku9XiE,aMs0rNtBZJk' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/FtE3hoR_Nvo,W5IKT_xue4o,IfaGhyK78E8,BuN3yCmHb_U,TdiAwCPb_As,euZcUku9XiE,aMs0rNtBZJk<\/a><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-songs-delimitation-role-tutorial\/' rel=\"noopener\">Shower Songs Delimitation Role Tutorial<\/a>.<\/p-->\n<hr>\n<p id='sscct'>Previous relevant <a target=\"_blank\" title='Shower Songs Colour Coding Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/shower-songs-colour-coding-tutorial\/' rel=\"noopener\">Shower Songs Colour Coding 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 Songs Colour Coding Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ss_cc.gif\" title=\"Shower Songs Colour Coding Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Shower Songs Colour Coding Tutorial<\/p><\/div>\n<p><a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-songname-providence-shower-songs-tutorial\/' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-songname-providence-shower-songs-tutorial\/' rel=\"noopener\">YouTube API Songname Providence Shower Songs Tutorial<\/a> of recent times had us interfacing &#8230;<\/p>\n<ul>\n<li>song providence via <a target=\"_blank\" title='Wikipedia ... thanks' href='http:\/\/wikipedia.org' rel=\"noopener\">Wikipedia<\/a> ideas &#8230; with &#8230;<\/li>\n<li>our inhouse Shower Songs project using <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">YouTube API<\/a> means to &#8220;Radio Play&#8221; some, let&#8217;s say, &#8220;theatrical pursuits by the water&#8221;<\/li>\n<\/ul>\n<p>A couple of times now, we&#8217;ve used it as company in the bath via an iPhone, preparing the list ahead of ever having to tap another anything, to hear some songs in the sequence the user establishes ahead of time &#8230; ie. the purpose of this web application.<\/p>\n<p>However, we made some bad colour choices, especially regarding the mobile red button overlayed by black text containing the song title.  It <i>was<\/i> hard to see.  It <i>is<\/i> easier now, that text being yellow.<\/p>\n<p>While there, we decided on a pale green background colour to apply to the textarea user interactive input and progress displaying conduit, when it&#8217;s relevant YouTube video is playing (in audio stream only mode), and another principle of our Shower Songs logic is that you should only see one pale green textarea for any great period of time &#8230; ie. the songs play in sequence, and looping around in continuous play, like on the radio.<\/p>\n<p>Believe it or not, the actual top level hierarchy <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shower_songs.html\" rel=\"noopener\">Shower Songs<\/a> window needs no changes for this, but &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html------------------------------------------------------------------------------------------------------GETME\" rel=\"noopener\">the changed<\/a> &#8230;<br \/>\n<code><br \/>\n&lt;script type=text\/javascript&gt;<br \/>\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) || eval('' + navigator.maxTouchPoints) &gt; 0) {<br \/>\n   if (window.parent != window.self) {<br \/>\n     if (('' + top.document.URL).indexOf('\/shower_songs.htm') != -1 || ('' + parent.document.URL).indexOf('\/shower_songs.htm') != -1) {<br \/>\n       document.write('&lt;div&gt;&lt;sty' + 'le&gt; button { color: yellow !important; font-weight: bold !important; text-shadow: -1px 1px 1px #e52dff !important;  }  &lt;\/sty' + 'le&gt;&lt;\/div&gt;');<br \/>\n     }<br \/>\n   }<br \/>\n }<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/body&gt;<br \/>\n<\/code><br \/>\n &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html------------------------------------------------------------------------------------------------------GETME\" rel=\"noopener\">karaoke_youtube_api.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" rel=\"noopener\">inhouse YouTube video interfacer<\/a> helps with the yellow font via CSS &#8230; while with the supervised we have &#8230;<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-------------------------------------------------------------------------------GETME\" rel=\"noopener\">a changed<\/a> two scenario Javascript situation &#8230;<br \/>\n<code><br \/>\n              \/\/ textarea gets a pale green background<br \/>\n              if (('' + top.document.URL).indexOf('\/shower_songs.htm') != -1 || ('' + parent.parent.document.URL).indexOf('\/shower_songs.htm') != -1) {<br \/>\n               parent.parent.document.getElementById(location.hash.replace(\/\\#\/g,'')).style.backgroundColor='#F0FFF0';<br \/>\n              }<br \/>\n              parent.parent.document.getElementById(location.hash.replace(\/\\#\/g,'')).placeholder='' + secscnt + '\/' + duration + ' ... ' + 'P=pause\/play S=stop M=mute U=unmute Y=YouTube G=Google W=Wikipedia L=loop ';<br \/>\n              \/\/<br \/>\n              \/\/ textarea gets usual white background<br \/>\n              if (('' + top.document.URL).indexOf('\/shower_songs.htm') != -1 || ('' + parent.parent.document.URL).indexOf('\/shower_songs.htm') != -1) {<br \/>\n               parent.parent.document.getElementById(location.hash.replace(\/\\#\/g,'')).style.backgroundColor='white';<br \/>\n              }<br \/>\n              parent.parent.document.getElementById(location.hash.replace(\/\\#\/g,'')).placeholder='' + Math.round(cen) + '\/' + duration + ' ... ' + 'P=play\/pause S=stop M=' + mletter + 'ute U=' + uletter + 'nmute Y=YouTube G=Google W=Wikipedia L=loop' + psuf;<br \/>\n<\/code><br \/>\n &#8230; where <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html-------------------------------------------------------------------------------GETME\" rel=\"noopener\">stop_start_youtube.html<\/a> controls those textarea element background colours in that <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html\" rel=\"noopener\">grandchild YouTube API inhouse interfacer<\/a><\/li>\n<\/ul>\n<p> &#8230; were needed to make this colour coding logic happen to improve how the user uses this web application, we&#8217;re hoping.  <span><a target=\"_blank\" title='?' class=\"audioytplay\" href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">Ie.<\/a><\/span> bye for now.<\/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='#d73903' onclick='var dv=document.getElementById(\"d73903\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/colour\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d73903' 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='#d73985' onclick='var dv=document.getElementById(\"d73985\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/delimiter\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d73985' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>You&#8217;d think we&#8217;d be done with ablutions at this blog, but noooooo wayyyy &#8230; Luna says &#8230; there&#8217;s all manner of molecular interest out there &#8230; It&#8217;s not just H and the 2 and the O &#8230; it&#8217;s the art &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/shower-songs-delimitation-role-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":[4159,2462,174,1580,218,3533,2276,2147,5372,354,1605,4077,409,564,576,5176,652,710,795,5604,2189,2355,2076,997,4453,1035,5605,5601,5602,1172,5603,1238,1319,1369,5606,1493,2017,5607],"class_list":["post-73985","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-404-shtml","tag-association","tag-button","tag-cell","tag-code","tag-comma","tag-delimitation","tag-delimiter","tag-destination","tag-dom","tag-encodeuricomponent","tag-error-404","tag-external-javascript","tag-hierarchy","tag-html","tag-http-error-404","tag-javascript","tag-list","tag-mobile","tag-mobile-detection","tag-navigator","tag-not-found","tag-order","tag-programming","tag-recipient","tag-redirect","tag-role","tag-separated","tag-shower-sons","tag-song","tag-songs","tag-table","tag-tutorial","tag-video","tag-video-identifier","tag-youtube","tag-youtube-api","tag-youtube-video-identifier"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/73985"}],"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=73985"}],"version-history":[{"count":21,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/73985\/revisions"}],"predecessor-version":[{"id":74011,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/73985\/revisions\/74011"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=73985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=73985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=73985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}