{"id":68090,"date":"2025-04-18T03:01:00","date_gmt":"2025-04-17T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=68090"},"modified":"2025-04-18T09:52:33","modified_gmt":"2025-04-17T23:52:33","slug":"audio-recording-youtube-interfacer-revisit-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/audio-recording-youtube-interfacer-revisit-tutorial\/","title":{"rendered":"Audio Recording YouTube Interfacer Revisit Tutorial"},"content":{"rendered":"
\"Audio<\/a>

Audio Recording YouTube Interfacer Revisit Tutorial<\/p><\/div>\n

Back at the recent YouTube Video List of Play Supervisor Tutorial<\/a> the role of our inhouse YouTube Interfacer web application was as a middleparent<\/i> in a “grandparent”\/”parent”\/”grandchild” web application design, but today we revisit the functionality that motivated us to think “Karaoke” when naming it, that being …<\/p>\n

\nuser audio recordings\n<\/p><\/blockquote>\n

… via that “Record” link, which was due a revisit, for sure!<\/p>\n

We discovered a great new “third party” resource to record audio and be able to save it in “Downloads” on your local device. Thanks, Online Voice Recorder<\/a>, for your great resource we appreciate around here. We wrote this “splashpage” (to our inhouse Local File Browsing<\/a> interfacer)<\/font> to explain it’s usage …<\/p>\n

\n

At left or above, thanks to https:\/\/online-voice-recorder.com\/<\/a> …<\/p>\n

    \n
  1. Click\/tap red<\/font><\/i><\/strong> audio microphone record button …<\/li>\n
  2. Talk or sing or yodel or gargle or recite or …<\/li>\n
  3. Click\/tap black<\/font><\/i><\/strong> square within the red button to stop recording<\/li>\n
  4. Click\/tap white Save<\/font><\/i><\/strong> button<\/li>\n
  5. … then in what appears here soon …<\/li>\n
  6. Click\/tap the Choose files button<\/li>\n
  7. Navigate to the Downloads<\/font><\/i><\/strong> folder<\/li>\n
  8. Select the most recent audio file (eg. .mp3 .wav)<\/li>\n
  9. That audio will be transferred to originator … and …<\/li>\n
  10. Off to window dedicated to gathering such Audio …<\/li>\n
  11. You can email or SMS media files to a recipient<\/li>\n<\/ol>\n<\/div>\n

    … getting us closer to simulating those train announcements!<\/p>\n

    It panned out, with this work, that our window arrangements were best served …<\/p>\n

      \n
    • on non-mobile, via two new window.open windows … and …<\/li>\n
    • on mobile, via one new window.open (for the audio recorder helper) and an iframe hosted client browsing, preceded by “splashpage” arrangement …\n

      \"Audio<\/img><\/p>\n<\/li>\n<\/ul>\n

      And so, there was this (hashtag navigation assisted work)<\/font>, in a changed<\/a> karaoke_youtube_api.htm<\/a> inhouse YouTube Informational Organizer and improved Audio Recording Organizer<\/a> web application, as well as rearrangements we think are less annoying by giving the recent Sequential Play<\/a> functionality it’s own “Sequentially?” button the user should now click (if they’re happy and<\/strong> they know it, or think sequential play is the best thing since sliced bread (ie. is the bee’s knees)<\/strong>)<\/font>, to facilitate less interference with the other button options as well, when a user selects multiple YouTube<\/a> videos of interest, via a YouTube based search for them.<\/p>\n

      \n

      \n

      Previous relevant YouTube Video List of Play Supervisor Tutorial<\/a> is shown below.<\/p>\n

      \"YouTube<\/a>

      YouTube Video List of Play Supervisor Tutorial<\/p><\/div>\n

      Today, as far as “YouTube<\/a> Video List of Play” supervisors goes, we add to yesterday’s Spliced Audio\/Video YouTube Shuffle Tutorial<\/a> …<\/p>\n

        \n
      • our changed<\/a> splice_audio.htm<\/a> Spliced Audio\/Video\/Image web application live run<\/a><\/li>\n
      • our tweaked<\/a> esp_ornot_esp.html<\/a> YouTube API Interfacing web application<\/a><\/li>\n<\/ul>\n

        … with …<\/p>\n

          \n
        • the changed<\/a> karaoke_youtube_api.htm<\/a> t” inhouse YouTube informational organizer<\/a> web application “parent” itself<\/li>\n<\/ul>\n

          … which is, of course, your more obvious, and generic, such supervisor, it having a YouTube based search mechanism itself, that the user can use to …<\/p>\n

            \n
          1. click inhouse YouTube informational organizer<\/a> web application “parent” link …<\/li>\n
          2. enter in a search string for YouTube to look for …<\/li>\n
          3. click the “More Than One to Select” checkbox …<\/li>\n
          4. select more than one YouTube video …<\/li>\n
          5. click one of the presentation type buttons up the top … and …<\/li>\n
          6. see your “YouTube<\/a> Video List of Plays” presented down the bottom of the original window (you may have to navigate back to)<\/li>\n<\/ol>\n

            And, from there, you can …<\/p>\n

              \n
            • loop<\/li>\n
            • shuffle<\/li>\n
            • save as … to a name of your choosing … then …\n
                \n
              1. recall that “YouTube<\/a> Video List of Plays”<\/li>\n
              2. email or SMS that “YouTube<\/a> Video List of Plays” off to somebody<\/li>\n
              3. forget that “YouTube<\/a> Video List of Plays”<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n

                … to be able to play videos in a sequence that is “there and then” for non-mobile and “one tap” and then there and then for mobile.<\/p>\n

                Codewise, one new Javascript function intervenes to assist with this work, as per …<\/p>\n


                \nfunction lookatmultiple(newsc) {
                \n var newdefc=0, hvis=[];
                \n var aot,jaot=0,aotfactor=1.0,iaot,aotdur=0.0,faot=[60.0,60.0,24.0];
                \n var sin=document.getElementById('ajaxs');
                \n \/\/alert('' + sin.id);
                \n var zero=0, lone=1, tod='', iickk;
                \n var spareanyt='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=&youtube_duration=&email=&email=&emoji=on&c0=on&i0=0&j0=&rand=' + Math.floor(Math.random() * 1989786);
                \n for (var ii=0; ii<sin.options.length; ii++) {
                \n if (sin.options[ii].selected) {
                \n if (sin.options[ii].value != '') {
                \n \/\/alert(sin.options[ii].value);
                \n aotdur=0.0;
                \n aotfactor=1.0;
                \n jaot=0;
                \n aot=sin.options[ii].text.split('(')[eval(-1 + sin.options[ii].text.replace(')',' ').split('(').length)].replace(')',' ').split(':');
                \n if (aot.length == 1 && aot[0].replace(' second ',',').replace(' seconds ',',').indexOf(',') != -1) {
                \n hvis=aot[0].split(' hour');
                \n if (hvis.length != 1) { console.log(hvis[0]); aotdur+=eval(eval('' + hvis[0]) * 60 * 60); aot[0]=aot[0].replace(' hours,',' hour').replace(' hour,',' hour').split(' hour')[1]; }
                \n hvis=aot[0].split(' minute');
                \n if (hvis.length != 1) { console.log(hvis[0]); aotdur+=eval(eval('' + hvis[0]) * 60); aot[0]=aot[0].replace(' minutes,',' minute').replace(' minute,',' minute').split(' minute')[1]; }
                \n hvis=aot[0].split(' second');
                \n if (hvis.length != 1) { console.log(hvis[0]); aotdur+=eval(eval('' + hvis[0]) * 1); }
                \n } else {
                \n for (iaot=eval(-1 + aot.length); iaot>=0; iaot--) {
                \n aotdur+=eval(aotfactor * aot[iaot]);
                \n jaot++;
                \n aotfactor *= faot[jaot];
                \n }
                \n }
                \n if (aotdur > 0.0) {
                \n if (spareanyt.indexOf('youtubeid=&') != -1) {
                \n spareanyt=spareanyt.replace('youtubeid=&', 'youtubeid=' + sin.options[ii].value + '&').replace('youtube_duration=&', 'youtube_duration=' + encodeURIComponent(Math.ceil(eval('' + aotdur)) + '.000') + '&').replace('j0=', 'j0=' + Math.ceil(eval('' + aotdur)) + '');
                \n } else {
                \n spareanyt+='&c' + lone + '=on&i' + lone + '=0|' + sin.options[ii].value + '&j' + lone + '=' + Math.ceil(eval('' + aotdur));
                \n lone++;
                \n tod=' ';
                \n }
                \n newdefc++;
                \n \/\/alert('' + newdefc + ': ' + spareanyt);
                \n }
                \n }
                \n }
                \n }
                \n if (newdefc > 1) {
                \n for (iickk=lone; iickk<=29; iickk++) {
                \n spareanyt+='&c' + iickk + '=off&i' + iickk + '=&j' + iickk + '=';
                \n }
                \n \/\/alert(spareanyt + tod.replace(' ','#' + encodeURIComponent(document.URL.split(':')[0] + ':' + spareanyt + '&loop=y')).trim());
                \n if (newsc == 0) {
                \n document.getElementById('myform').target='_blank';
                \n \/\/document.getElementById('myform').action=document.getElementById('myform').action.split('#')[0] + '#' + encodeURIComponent(document.URL.split(':')[0] + ':' + spareanyt + '&loop=y');
                \n document.getElementById('sumlist').innerHTML=document.getElementById('youtubeid').value.trim();
                \n document.getElementById('iflist').src=spareanyt + tod.replace(' ','#' + encodeURIComponent(document.URL.split(':')[0] + ':' + spareanyt + '&loop=y')).trim();
                \n document.getElementById('detlist').style.display='block';
                \n setTimeout(function(){ document.getElementById('detlist').scrollIntoView(); }, 2000); \/\/location.href='#detlist';
                \n } else if (1 == 1) {
                \n document.getElementById('myform').target='_blank';
                \n document.getElementById('myform').action=document.getElementById('myform').action.split('#')[0] + '#' + encodeURIComponent(document.URL.split(':')[0] + ':' + spareanyt + '&loop=y');
                \n } else {
                \n wowowo=window.open(spareanyt + tod.replace(' ','#' + encodeURIComponent(document.URL.split(':')[0] + ':' + spareanyt + '&loop=y')).trim(), '_blank'); \/\/, 'top=100,left=100,width=1000,height=800');
                \n }
                \n }
                \n return true;
                \n}
                \n<\/code><\/p>\n

                … or watch on YouTube<\/a> itself …<\/p>\n