External Javascript YouTube Audio of Video Emoji Tutorial

Posted on by
External Javascript YouTube Audio of Video Emoji Tutorial

External Javascript YouTube Audio of Video Emoji Tutorial

Onto yesterday’s External Javascript YouTube Audio of Video Mobile Helper Tutorial, today, we’ve …

  • further shored up the mobile platform playing of the audio stream of a YouTube video, as requested …
  • added display (usefulness only, so far) emojis 📻🎶 (📻🎶) into the “underlay” button displays, as today’s work, leading up to, tomorrow …
  • the emoji tap/clicks will lead the user to a menu of further options (as often displayed with video controls) …
    1. pause
    2. play
    3. loop
    4. stop
    5. progress … perhaps

… where today’s third draft external Javascript ytaudioonly.js external Javascript supports the changed karaoke_youtube_api.htm inhouse YouTube video interfacer in our quest to play YouTube audio “in place” in a useful way.

Previous relevant External Javascript YouTube Audio of Video Mobile Helper Tutorial is shown below.

External Javascript YouTube Audio of Video Mobile Helper Tutorial

External Javascript YouTube Audio of Video Mobile Helper Tutorial

After the start yesterday’s External Javascript YouTube Audio of Video Helper Tutorial gave us with our External Javascript YouTube Audio of Video Helper we’ve progressed making the mobile platform interfacing less flaky, but more testing is needed.

Introducing a general delay into our changed karaoke_youtube_api.htm inhouse YouTube video interfacer part of the solution turned things around here.

To delay, say by 13.5 seconds, even great swathes of code …


setTimeout(function(){
// Start of "great swathes of code"
// ...
// End of "great swathes of code"
}, 13500);

… is one of those ideas we’re still pinching ourselves about how effective it can be (let alone passing in arguments at the function() bit). We’re forever filling “great swathes of code” with global Javascript variables but today’s “great swathe” works okay with non global Javascript variables in there, and we’re thinking we have to be more trusting of the brilliant setTimeout (and setInterval) Javascript techniques of introducing a delay into the flow of your Javascript. Of course, we could also delay the work until the document.body onload event, but we wanted to get in early with what the code is trying to achieve here … we’ll see.

Perhaps a good adage here is …

Trust the process.
Trust the wonders of (in the case of iOS, Safari) Web Browser Web Inspector debugging to test ideas you start out being unsure of.

… with our ongoing second draft external Javascript ytaudioonly.js external Javascript ongoing current project … so Wake Me Up Before You Go-Go.

Previous relevant External Javascript YouTube Audio of Video Helper Tutorial is shown below.

External Javascript YouTube Audio of Video Helper Tutorial

External Javascript YouTube Audio of Video Helper Tutorial

It is not that surprising that the next step onto the progress of yesterday’s Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial would involve us developing…

  • an external Javascript …
  • helper for “in place” …
  • audio play …
  • of that stream of a YouTube video … via …
  • user linked script call …

    <script type='text/javascript' src='//www.rjmprogramming.com.au/ytaudioonly.js'></script>

    … helping out …
  • HTML “a” link with class=audioytplay and a mention of https://www.youtube.com/watch?v=[YouTubeID] … eg.

    <p>Oops, <a class="audioytplay" target="_blank" title="?" href='https://www.youtube.com/watch?v=gBzJGckMYO4' rel="noopener"><strike>that's all</strike>sorry, folks</a></p>
  • to be, via onclick event, playing “in place” the audio part of that YouTube referenced [YouTubeID] video

Developing this is definitely more than a one day job (especially getting mobile platforms working), but today’s “first draft” ytaudioonly.js external Javascript, along with the help of …

… is our start to this project. Try it yourself below …

Oops, that's allsorry, folks

Previous relevant Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial is shown below.

Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial

Making of Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial

As far as CSS styling goes with our web application work, personally speaking, it is one of …

Give it a bit of oompha!

… moments in coding we think we learn more from, than reading about CSS. That, and, usually StackOverflow, thanks, where examples of achieving some styling ambition teach us a lot too.

Yesterday, with Clickaround Maps Google Chart Geo Chart Mobile Integration Tutorial, we decided to “put a bit of oompha” into that “two bell emoji” ( ie. 🔔🔔 ) link “double buzzer” sound “production number”, and wanted to break down what we ended up with, for readers …

Our first try … okay for non-mobile … not as good for mobile …

<a id="aja" target="myja" title="" onmouseover="if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { this.title=' '; this.target='myja'; } " onclick="if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && this.title == '') { this.title=' '; this.target='myja'; document.getElementById('myja').src=this.href; } setTimeout(function(){ document.getElementById('aja').target='_blank'; },100);" href="//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=7XMW6Z_Oq38&jusJUNKtaudio=&youtube_duration=2.000&email=&email=&emoji=on&c0=on&i0=0&j0=2&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=" rel="noopener">&#128276;&#128276;</a>

… begets …

🔔🔔
Our second try … okay for non-mobile … better for mobile …

<a id="aja" target="myja" title="" onmouseover="if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { this.title=' '; this.target='myja'; } " onclick="if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) { this.title == '') { this.title=' '; this.target='myja'; document.getElementById('myja').src=this.href; } setTimeout(function(){ document.getElementById('aja').target='_blank'; },100); }" href="//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=7XMW6Z_Oq38&justJUNKaudio=&youtube_duration=2.000&email=&email=&emoji=on&c0=on&i0=0&j0=2&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=" rel="noopener">&#128276;&#128276;</a>
<iframe onload="if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { if (this.src.indexOf('About_Us.') != -1) { document.getElementById('aja').target='myja';
this.src=document.getElementById('aja').href + '&rand=' + Math.floor(Math.random() * 1989786); } } " id="myja" name="myja" src="/About_Us.html" style="display:none;"></iframe>

… begets …

🔔🔔

… working better because of tweaked karaoke_youtube_api.htm
inhouse YouTube video interfacer‘s new …


if (window.top) {
if (document.URL.indexOf('youtubeid=7XMW6Z_Oq38&') != -1 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
setTimeout(function(){
if (document.getElementById('audioejkaraoke')) {
document.getElementById('audioejkaraoke').title=' ' + document.getElementById('audioejkaraoke').title;
document.getElementById('audioejkaraoke').value=String.fromCodePoint(128276) + String.fromCodePoint(128276);
document.getElementById('audioejkaraoke').style.position='absolute';
document.getElementById('audioejkaraoke').style.left='0px';
document.getElementById('audioejkaraoke').style.top='0px';
document.getElementById('audioejkaraoke').style.backgroundColor='transparent';
document.getElementById('audioejkaraoke').style.zIndex='99';
document.getElementById('repeat').value=String.fromCodePoint(128276) + String.fromCodePoint(128276);
document.getElementById('repeat').style.position='absolute';
document.getElementById('repeat').style.left='0px';
document.getElementById('repeat').style.top='-10px';
document.getElementById('repeat').style.backgroundColor='transparent';
document.getElementById('repeat').style.zIndex='199';
document.getElementById('myiframe').style.position='absolute';
document.getElementById('myiframe').style.left='-100px';
document.getElementById('myiframe').style.top='-100px';
document.getElementById('myiframe').style.zIndex='299';
//document.getElementById('myiframe').style.backgroundColor='transparent';
document.getElementById('myiframe').style.opacity='0.0';
if (aaconto) {
aaconto.getElementById('player').style.opacity='0.0';
} else {
aaset=true;
}
document.body.style.backgroundColor='transparent';
} else {
setInterval(function(){
if (document.getElementById('audioejkaraoke')) {
if (('' + document.getElementById('audioejkaraoke').title + ' ').substring(0,1) != ' ') {
document.getElementById('audioejkaraoke').title=' ' + document.getElementById('audioejkaraoke').title;
document.getElementById('audioejkaraoke').value=String.fromCodePoint(128276) + String.fromCodePoint(128276);
document.getElementById('audioejkaraoke').style.position='absolute';
document.getElementById('audioejkaraoke').style.left='0px';
document.getElementById('audioejkaraoke').style.top='0px';
document.getElementById('audioejkaraoke').style.backgroundColor='transparent';
document.getElementById('audioejkaraoke').style.zIndex='99';
document.getElementById('repeat').value=String.fromCodePoint(128276) + String.fromCodePoint(128276);
document.getElementById('repeat').style.position='absolute';
document.getElementById('repeat').style.left='0px';
document.getElementById('repeat').style.top='-10px';
document.getElementById('repeat').style.backgroundColor='transparent';
document.getElementById('repeat').style.zIndex='199';
document.getElementById('myiframe').style.position='absolute';
document.getElementById('myiframe').style.left='-100px';
document.getElementById('myiframe').style.top='-100px';
document.getElementById('myiframe').style.zIndex='299';
//document.getElementById('myiframe').style.backgroundColor='transparent';
document.getElementById('myiframe').style.opacity='0.0';
if (aaconto) {
aaconto.getElementById('player').style.opacity='0.0';
} else {
aaset=true;
}
document.body.style.backgroundColor='transparent';
}
}
}, 1000);
}
if (top.document.getElementById('aja')) {
var boxis=top.document.getElementById('aja').getBoundingClientRect();
//alert('boxis.left=' + boxis.left + ' ' + top.document.getElementById('aja').innerHTML);
if (top.document.getElementById('aja').innerHTML.indexOf('<iframe') == -1) {
//alert('Boxis.left=' + boxis.left);
top.document.getElementById('myja').style.width='' + eval(2 * boxis.width) + 'px';
top.document.getElementById('myja').style.height='' + eval(1 * boxis.height) + 'px';
setTimeout(function(){
top.document.getElementById('aja').innerHTML=top.document.getElementById('myja').outerHTML.replace('/About_Us.html',top.document.getElementById('aja').href).replace(' onload=',' data-onload=').replace(' id=',' data-id=').replace(' name=',' name-id=').replace('none;','inline-block;');
}, 2000);
} else if (3 == 4) {
top.document.getElementById('myja').style.position='absolute';
top.document.getElementById('myja').style.left='' + boxis.left + 'px';
top.document.getElementById('myja').style.top='' + boxis.top + 'px';
top.document.getElementById('myja').style.width='' + boxis.width + 'px';
top.document.getElementById('myja').style.height='' + boxis.height + 'px';
top.document.getElementById('myja').style.display='block';
top.document.getElementById('myja').style.zIndex='99';
//top.document.getElementById('aja').innerHTML='  ';
}
}
}, 1000);
}
if (top.document.URL.indexOf('/esp_ornot_esp.') != -1 || parent.document.URL.indexOf('/esp_ornot_esp.') != -1) {
if (top.document.title.indexOf(' justaudio ') != -1) {
asuffis='&justaudio=&';
bsuffis=' name=justaudio ';
}
}
}

Let’s start with …

Why can’t we just link to a YouTube video URL webpage off any old platform or web browser incarnation?

Well, you could! But we wanted a less obvious approach (and we were not sure about mobile platforms, trying this), only relevant for scenarios where you are only interested in the audio stream of a YouTube video (it should be noted), that is hiding from the reader “the mechanics” of what we are doing (to get a cheap giggle … there, are you happy now?!).

What does Javascript if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { } if test achieve?

If this test returns true we have detected a non-mobile platform/web browser scenario.

What does the HTML target attribute of an a HTML element do?

That target attribute determines the “navigational place” of the href attribute URL of that a link where …

  1. _blank opens in a new window
  2. _self clobbers current window
  3. _top adds a new (tabbed) window (perhaps from the viewpoint of a child HTML iframe window)
  4. other named target point to the name attribute of an HTML iframe element, presumably, in the current window

What does HTML code snippet onload=”if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { if (this.src.indexOf(‘About_Us.’) != -1) { document.getElementById(‘aja’).target=’myja’;
this.src=document.getElementById(‘aja’).href + ‘&rand=’ + Math.floor(Math.random() * 1989786); } } “ do as the onload event logic of the “second version” iframe incarnation?

We decided that we needed to get assistance from our inhouse YouTube video interfacing player, when it came to mobile platforms and web browsers, to get to a point where …

  • unbeknown to such mobile users
  • when they tap the 🔔🔔 “buzzer” button emojis …
  • it is arranged from the child iframe inhouse YouTube video interfacing player web application using “overlay” concepts …
    1. position: absolute
    2. opacity
    3. z-index
    4. top and left positioning
    5. width and height dimensioning
    6. 🔔🔔 into some button content

    … that what they are tapping is a YouTube video element

  • looking like 🔔🔔 at levels of a smaller z-index seen through opacity:0.0 higher z-index levels, the topmost transparent but high z-index one being the YouTube video element which is that webpage area’s “action item” … if you will

Huh?!

On mobile platforms, media cannot play, these days, unless it is as a direct result of a user tap (excluding programmatically produced taps). See all this in action, with thanks to FreeConvert, below …

And so, yes … was it worth it? Perhaps not to do with the job at hand, but for future reference, we’re happy to give this added oompha to this effort.

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.

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *