Shower Song Radio Play Integration Tutorial
If you’ll pardon the pun …
We’ve been like a “broken record” regarding that familiar theme of “Sequential Play of YouTube Music Videos” over a few years now
… and today we’re integrating the …
- Radio Play project smarts of recent times … into
no, not the shower, Luna! … but into … - Shower Songs
… yay!?! Because, let’s face it, not many of us walk around with 11 character YouTube video codes in our head and no, not there either, Luna!!
That Radio Play project integrated with the great YouTube’s search functionality, to be able to …
- consider a search string (users can enter via a new textbox within that new form as per yesterday’s advances) … and …
- return a related 11 character YouTube video code
… as the means by which the user contents parts of our Shower Songs project can be improved a lot, further to yesterday’s Shower Song Remember and Recall Tutorial! Luna?!
Yet again, try the changed fifth draft Shower Songs below and helped out a lot via the changed swipe_media.html Radio Play project web application, as per …
<script type=text/javascript>
var dwfrom='youllneverfindthis';
var dwto='youllneverfindthis';
if (document.URL.indexOf('isradio=') != -1) {
dwfrom=' style="min-width:';
dwto=' style="opacity:0.6;cursor:progress;border-left:8px dotted yellow;border-right:8px dotted yellow;min-width:';
}
var bigline=" <button id=bdisco onclick=\"dodisco('bdisco=radnoiswas&');\" style='background-color:yellow;'>" + dword + "<sup>A+V</sup> <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;'>📻</span></button> <button id=bdiscoa onclick=\"dodisco('bdiscoa=radnoiswas&audio');\" style='background-color:yellow;'>" + dword + "<sub>A-V</sub> <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;'>📻</span></button> <button id=bwc onclick=\"dowc('bwc=radnoiswas&');\" style='background-color:yellow;'>" + twcword + "<sup>A+V</sup> <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;'>📻</span></button> <button id=bwca onclick=\"dowc('bwca=radnoiswas&audio');\" style='background-color:yellow;'>" + twcword + "<sub>A-V</sub> <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;'>📻</span></button> <button id=byr onclick=\"doyr('byr=radnoiswas&');\" style='background-color:yellow;'>" + yrword.replace('YaJUNKcht ', 'Yacht++ ') + "<sup>A+V</sup> <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;'>📻</span></button> <button id=byra onclick=\"doyr('byra=radnoiswas&audio');\" style='background-color:yellow;'>" + yrword.replace('YaJUNKcht ', 'Yacht++ ') + "<sub>A-V</sub> <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;'>📻</span></button> <button id=recallable title=Saved onclick=\"recallit(this);\" style='background-color:orange;visibility:hidden;'></button>";
if (window.opener) {
if (document.URL.indexOf('isradio=') != -1 && document.URL.indexOf('youtube=') != -1) {
// Talk to shower_songs.html
if (top.document.URL.indexOf('regarding=') != -1 && top.document.URL.indexOf('isradio=') != -1 && top.document.URL.indexOf('youtube=') != -1) {
if (top.window.opener) {
var waszv='';
for (var inm=0; inm<Math.min(7,eval('' + vidids.length)); inm++) {
if (top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm))) {
if (top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm)).value.indexOf('#') == -1) {
waszv= top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm)).value;
top.window.opener.parent.window.opener.document.getElementById('inp00' + eval(1 + inm)).value=vidids[inm] + '#' + waszv;
}
}
}
top.window.opener.parent.window.opener.document.body.style.cursor='pointer';
}
}
if (!asa) { assoonas(); }
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';
var doctt='' + document.title;
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;
} else {
if (!asa) { as_soon_as(); } //document.getElementById('td0001').style.border='15px dotted yellow';
radioblurb=' ... please wait for more than one checkbox checked before radio sequenced play is started above';
}
} else if (document.URL.indexOf('isradio=') != -1) {
if (!asa) { as_soon_as(); } //document.getElementById('td0001').style.border='15px dotted yellow';
radioblurb=' ... please wait for more than one checkbox checked before radio sequenced play is started above';
if (document.URL.indexOf('youtube=') != -1) {
var xdoctt='' + document.title;
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;
}
}
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
radioblurb+=' and we recommend screen lock on';
}
for (var kk=1; kk<=eval(100 * numc); kk++) {
if (eval(kk % eval('' + bcol.length)) == 0) {
dw+=('<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)) + '</td>').replace(dwfrom,dwto);
setTimeout(cursanimate, 600);
} else {
dw+=('<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)) + '</td>').replace(dwfrom,dwto);
}
dwfrom='youllneverfindthis';
dwto='youllneverfindthis';
}
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && (isPortrait || isLandscape)) {
bigline=bigline.replace(/\>The Wrecking Crew/g,'>The Wrecking <br>Crew').replace(/\>Yacht\+\+ Rock/g,'>Yacht++ <br>Rock').replace(/\>Yacht Rock/g,'>Yacht <br>Rock').replace(/\>Disco/g,'>Disco <br>');
}
document.write(dw + "</tr></table><br>" + bigline);
</script>
Previous relevant Shower Song Remember and Recall Tutorial is shown below.
Shower Song Remember and Recall Tutorial
Following on from yesterday’s Shower Song Mobile User Functionality Tutorial today …
- we would like to help out the user …
- via a “remembering” form … assisted by …
- a “recalling” usefulness via window.localStorage means … and flagged to the user via …
- delivering dropdown options
… reflecting those settings the user has chosen to remember out of …
- YouTube 11 character video code(s) (up to 7)
- an order of play (up to 7)
So, again, try the changed fourth draft Shower Songs below.
Previous relevant Shower Song Mobile User Functionality Tutorial is shown below.
Shower Song Mobile User Functionality Tutorial
The better fit “hardware wise” for a “shower scene” is one of the mobile devices. And so, onto yesterday’s Shower Song User Functionality Tutorial we’ve started down Mobile Road to Chickasaw today, easing us into …
- 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 … 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 …
- in the non-mobile woooorrrrllllddd (we’ve heard starts near Chickasaw) clicks can be of the programmatical kind … and we recommend “kind clicking” at all times
We’re not saying that there is not more work to do (in “double negative heaven”), but we realized …
- on mobile a tap interrupts “normal audio play” transmission … different to …
- on non-mobile a click may not interrupt a previously arranged “normal audio play” transmission
Big deal?! Yes, you’d not think so, but there you are, as we ‘ve been on that little conundrum for two hours now, with lots of blaspheming?!
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 “I’m With You”), and clicked the looping emoji to just repeat that song four times, as one of our tests … sorry about the long shower … peepholespeople of the wooooooorrrrrlllllddd?!
Try the changed third draft Shower Songs below.
Previous relevant Shower Song User Functionality Tutorial is shown below.
Shower Song User Functionality Tutorial
Onto yesterday’s Shower Song Primer Tutorial we’ve been shoring up user functionality, today, adding in quite a few emoji button helpers pointing to functionality.
Lots of the thinking revolved around trying to space out the user checkbox clicking on non-mobile control of the HTML input type=checkboxs …
… attribute …
var ftime=true;
function whendo() {
var ccnt=0;
var talisti=eval(-1 + eval('' + document.body.innerHTML.split(' style="z-index:599').length)); //('span');
var talist=document.getElementsByTagName('sup');
var inlist=document.getElementsByTagName('input');
for (var ik=0; ik<inlist.length; ik++) {
if (inlist[ik].outerHTML.indexOf('checkbox') != -1) {
ccnt++;
}
}
if (eval('' + talist.length) < ccnt) {
setTimeout(whendo, 1000);
} else {
talist=document.getElementsByTagName('a');
for (var iki=0; iki<talist.length; iki++) {
if (talist[iki].outerHTML.indexOf(' class="processytplay"') != -1) {
talist[iki].onmousedown=function(event){ myac(event.target); };
}
}
setTimeout(function(){ cball(false); }, 500);
}
}
function cball(to) {
var inlist=document.getElementsByTagName('input');
for (var ik=0; ik<inlist.length; ik++) {
if (inlist[ik].outerHTML.indexOf('checkbox') != -1) {
if (to) {
inlist[ik].setAttribute('disabled',to);
} else {
inlist[ik].removeAttribute('disabled');
}
}
}
if (ftime) {
ftime=false;
if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
setTimeout(whendo, 1000);
}
}
}
… in the changed second draft Shower Songs as below.
Previous relevant Shower Song Primer Tutorial is shown below.
Shower Song Primer Tutorial
We’re onto a new music related project today, with that familiar theme of “Sequential Play of YouTube Music Videos” where today’s project, so far, just hones in on the “audio stream only of those YouTube videos”.
We have some provisos with our Shower Songs collection …
- it will work on mobile but not to the automated state non-mobile is in, on this first draft …
- more display niceties to come …
- user content functionality to come …
… but feel free to set yourself up (but careful of “bathroom mist” not being good for electronic devices) with today’s first draft Shower Songs as below …
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
