Itโs time for us to revisit the relatively recent User Controlled Dynamic Javascript YouTube Embedded API Ajax Tutorial with new content featuring music that โThe Wrecking Crewโ were involved in. We were gobsmacked last weekend listening to โฆ
- Weekends with Simon Marnie on 702 radio Sydney, Australia on Saturday 26/9/2020โs โSonic Journeyโ segment regarding โThe Wrecking Crewโ (Hal Blaine, Glen Campbell etcetera) โฆ
The Wrecking Crew was a loose collective of session musicians based in Los Angeles whose services were employed for thousands of studio recordings in the 1960s and 1970s, including several hundred Top 40 hits. The musicians were not publicly recognized in their era, but were viewed with reverence by industry insiders. They are now considered one of the most successful and prolific session recording units in music history.
โฆ and their huge influence on the music of the 60โs and early 70โs (and beyond, especially regarding work with Phil Spector)
- Wikipediaโs great online resource The Wrecking Crew
- User Controlled Dynamic Javascript YouTube Embedded API Ajax Tutorialโs disco_version
html use of YouTubeโs IFrame Player API as a basis to โฆ
- two finger gesture over a Wikipedia song link and choose โSearch Google for โSong Titleโโ
- up at Google two finger gesture relevant YouTube link and choose โCopy Link Addressโ
- add to codeโs array stripping out all but the 11 character YouTube video ID
โฆ and let this great music of the 60โs and early 70โs roll! You can see how this all happened at the_wrecking_crewhtmlโs live
run link.
Previous relevant User Controlled Dynamic Javascript YouTube Embedded API Ajax Tutorial is shown below.
Around here we have our favourite Javascript and PHP function names. And in that list, the Javascript โajaxit([argument1])โ features strongly and commonly. After reaching below the sink After talking excitedly to the kitchen taps about my plans โฆ oddly, receiving no reply โฆ probably because itโs a Monday here โฆ we expect โฆ we use that Javascript client Ajax approach that can do for you what you would often call on a serverside language, like PHP, to do?! Anyone, anyone? No, Barbara Woodhouse, we do not wrelease the tap dancing dogs on Mondays โฆ ever โฆ any more serious suggestions please? Yes, Jesse James Garrett itโs interesting your blurtings include โฆ
the asynchronous technology behind emerging services like Google Maps and Google Suggest, as well as the resulting user experience which made it possible to browse without interruption by eliminating the reloading of the whole page
โฆ though Iโd like you to run a plagorism checker on all โblurtingsโ and โlertsโ for the next lesson please.
Yes, under certain conditions, Ajax (methodologies) can retrieve information and not have to leave what you are interacting with on the current webpage, to do this.
Can you imagine how we might apply this with our current project? Yes, patently not everyone is in the mood for โDiscoโ, especially on the first draft way back when, when we allowed sound to happen before a decently โflaggedโ button press to forewarn โฆ a fairly big โInternet sinโ, since fixed. And so, we now add HTML input textbox (ie.type=text) element, with onblur event โajaxit([argument1])โ logic (passing across the textboxโs value) as per โฆ
var zhr=null;
var url='';
var zok=0;
function ajaxit(qsel) {
if (qsel != '') {
url="//www.rjmprogramming.com.au/HTMLCSS/legend_via_map.php?url=" + encodeURIComponent("//www.youtube.com/results?search_query=" + encodeURIComponent(qsel));
if (!zhr) {
zhr = getXMLHttpRequest();
}
if (zhr != null) {
zhr = zhr;
} else {
try {
zhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
zhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
zhr = false;
}
}
}
if (zhr) {
if (url != '') {
zok=0;
zhr.open("GET", url, true);
zhr.onreadystatechange = showStuff;
zhr.send(null);
url='';
}
} else {
zok = 1; //alert("Sorry ... no XMLHttpRequest possible");
}
}
}
โฆ to add new concepts into the mix of option (sub)elements offered off that aforesaid mentioned (multiple selection mode) dropdown (of YouTube videos). As an optional โoff default workflowโ piece of functionality we show it prominently (above the fold) now, as well as โbelow the foldโ where the dropdown is positioned on the webpage of theAjax changed disco_versionhtmlโs live
run.
Adding to yesterdayโs User Controlled Dynamic Javascript YouTube Embedded API Ordered Tutorial โฆ
Previous relevant User Controlled Dynamic Javascript YouTube Embedded API Ordered Tutorial is shown below.
We think that whenever you โฆ
- deprive many people of โorderโ in their lives โฆ theyโll crave for (and maybe seek out) โorderโ โฆ and when you โฆ
- deprive many people of โrandomosityโ in their lives โฆ theyโll crave for (and maybe seek out) โrandomosityโ
โฆ and so we see a mix of both in a web application as an advantage. Today, for the first time we can remember, extending onto yesterdayโs User Controlled Dynamic Javascript YouTube Embedded API Tutorial functionality, definitely lacking some โorderโ we feel, weโve allowed a โฆ
- select โdropdownโ element โฆ
- multiple mode โฆ have its โฆ
- button press โfinish of selectionsโ event logic โฆ
function process(bsin) {
var jj=0, mbo='', mlist='', mdelim='', vscnt=0;
var sin=document.getElementById(bsin.id.replace('b','s'));
for (var i=0; i<sin.options.length; i++) {
if (sin.options[i].selected) {
if (sin.options[i].value != '') {
jj++;
vscnt++;
mbo=sin.options[i].value.split('|')[0];
mlist+=mdelim + sin.options[i].value.split('|')[0];
mdelim=',';
}
}
}
if (jj == 1) {
location.href=(document.URL.split('#')[0].replace('mustbeone=','mustxxxbeone=') + '&mustbeone=' + encodeURIComponent(mbo)).replace('.html&','.html?').replace('.htm&','.htm?').replace('.php&','.php?').replace('/&','/?');
} else if (jj > 1) {
if (oclickcnt == vscnt) { mlist=olist; }
location.href=(document.URL.split('#')[0].replace('mustbeone=','mustxxxbeone=').replace('videolist=','videoxxxlist=') + '&videolist=' + encodeURIComponent(mlist)).replace('.html&','.html?').replace('.htm&','.htm?').replace('.php&','.php?').replace('/&','/?');
}
oclickcnt=0;
occ=[];
olist='';
odelim='';
} - take into account the order the user clicked select element option elements โฆ
var oclickcnt=0;
var occ=[];
var olist='';
var odelim='';
function oclick(opto) {
oclickcnt++;
olist+=odelim + opto.id.split('|')[0];
odelim=',';
}
โฆ option element onclick event Javascript event logicโฆ so long as โฆ - these two or more clicks/touches on option elements (via their onclick event logics) (total in) number (to) the same (total) as the final number of options selected (ie. most โshiftโ key arrangement selections cannot be catered for in this logic, but totally โctrlโ (Windows) / โcommandโ (macOS) key may work)
โฆ allowing for the user to control the video list, and its order.
And on non-mobile platforms, we allow for a natural โsequencingโ of play, once the first video is played and unmuted. That way, on non-mobile, yourchanged disco_versionhtml live
run web application can act like a continuous (radio like) โstreamโ of music. Even so, on non-mobile, a user can โpauseโ a video, and start another via their own user actions, and the โstreamโ sequencing will change to fit in with the changed arrangements.
Previous relevant User Controlled Dynamic Javascript YouTube Embedded API Tutorial is shown below.
The recent Dynamic Javascript and the YouTube Embedded API Tutorial showed the great YouTube IFrame Player API in action, including โฆ and this dovetails well into todayโs work โฆ no advertisements.
A lot of us will know how great YouTube playlists are. Today, we offer a(n example of) โฆ
- an up to 9 โDisco Versionโ random array of YouTube videos that can be played ina session โฆ
- from a possible array of 24 table cell slots (10-24 not shown, but โdurationโable behind the scenes) โฆ
- the 15 not randomly picked available to the user in a dropdown selection they can, optionally โฆ
- pick one from,click a โShuffleโ button, and a randomized list of 8 others is headedby your selected video โฆ or โฆ
- pick more than one and the first (up to 9) forms your ordered selection of playable videos
โฆ and the progress today leaves you controlling when to play the videos, yourself, clicking YouTube play buttons to make that happen.
Enjoy the โhowwe got thereโ disco_versionhtml upbeat
disco selection live run link.
Previous relevant Dynamic Javascript and the YouTube Embedded API Tutorial is shown below.
Webpages without Javascript are generally pretty static and boring. Javascript is that dynamic client addition to webpage functionality, but perhaps you only think of it as that statically written part of the webpage unable to be reloaded into effect after that initial webpage load. Well, that is not taking into account Javascript such as โฆ
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
โฆ taken from the excellent YouTube IFrame Player API we really like to use around here to embed and control YouTube videos embedded into an HTML iframe element.
In todayโs small extension of that we load nine such HTML iframe embedded YouTube videos into a 3ร3 grid. We resisted the previous Brady Bunch usage of such an arrangement (perhaps youโll be sad to hear?!) in favour of showing you a โcollageโ of video snippets from one of my favourite films ever, Mr Smith Goes to Washington.
We hope the HTML and Javascript dynamic_jshtmlโs code will be food for thought, that you can test for yourself at this live
run link.
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.