{"id":72808,"date":"2026-04-26T03:01:00","date_gmt":"2026-04-25T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=72808"},"modified":"2026-04-25T21:28:42","modified_gmt":"2026-04-25T11:28:42","slug":"shower-song-remember-and-recall-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/shower-song-remember-and-recall-tutorial\/","title":{"rendered":"Shower Song Remember and Recall 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 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","protected":false},"excerpt":{"rendered":"<p>Following on from yesterday&#8217;s Shower Song Mobile User Functionality Tutorial today &#8230; we would like to help out the user &#8230; via a &#8220;remembering&#8221; form &#8230; assisted by &#8230; a &#8220;recalling&#8221; usefulness via window.localStorage means &#8230; and flagged to the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/shower-song-remember-and-recall-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,20,37],"tags":[83,3456,1832,113,2051,5464,3531,5461,168,181,3913,3912,4377,184,3349,214,252,2442,2697,5463,265,1654,2237,364,4385,367,400,452,576,587,590,626,631,652,2415,3810,2178,760,2732,3529,4712,870,4267,907,1738,929,997,3274,5298,1866,4086,2263,3927,1254,1675,1319,5460,1345,1369,3551],"class_list":["post-72808","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-ios","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-connection","tag-contenteditable","tag-contentedital","tag-copt","tag-copy","tag-data-uri","tag-drag","tag-drag-and-drop","tag-drop","tag-dropdown","tag-event","tag-form","tag-html","tag-iframe","tag-image","tag-ios","tag-iphone","tag-javascript","tag-localstorage","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-recall","tag-remember","tag-select","tag-select-all","tag-span","tag-standalone","tag-text","tag-textbox","tag-tutorial","tag-universal-clipboard","tag-url","tag-video","tag-window-localstorage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72808"}],"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=72808"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72808\/revisions"}],"predecessor-version":[{"id":72812,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72808\/revisions\/72812"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=72808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=72808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=72808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}