{"id":73903,"date":"2026-07-16T03:01:00","date_gmt":"2026-07-15T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=73903"},"modified":"2026-07-15T19:38:13","modified_gmt":"2026-07-15T09:38:13","slug":"shower-songs-colour-coding-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/shower-songs-colour-coding-tutorial\/","title":{"rendered":"Shower Songs Colour Coding 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 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, 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 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) {<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<\/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) {<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) {<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.<\/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","protected":false},"excerpt":{"rendered":"<p>YouTube API Songname Providence Shower Songs Tutorial of recent times had us interfacing &#8230; song providence via Wikipedia ideas &#8230; with &#8230; our inhouse Shower Songs project using YouTube API means to &#8220;Radio Play&#8221; some, let&#8217;s say, &#8220;theatrical pursuits by &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/shower-songs-colour-coding-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":[2419,2682,5586,281,341,451,4479,2882,652,5001,997,5585,1172,5587,1262,1319,1369,1431,1493,2017],"class_list":["post-73903","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-aesthetics","tag-background-colour","tag-colour-colour-coding","tag-css","tag-display","tag-font","tag-font-colour","tag-intervention","tag-javascript","tag-playing","tag-programming","tag-shower-songs","tag-song","tag-text-colour","tag-textarea","tag-tutorial","tag-video","tag-wikipedia","tag-youtube","tag-youtube-api"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/73903"}],"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=73903"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/73903\/revisions"}],"predecessor-version":[{"id":73913,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/73903\/revisions\/73913"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=73903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=73903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=73903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}