External Javascript YouTube Audio of Video Helper Tutorial

Posted on by
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.

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 *