{"id":67933,"date":"2025-04-07T03:01:00","date_gmt":"2025-04-06T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=67933"},"modified":"2025-04-07T12:05:17","modified_gmt":"2025-04-07T02:05:17","slug":"spliced-audio-video-youtube-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audio-video-youtube-tutorial\/","title":{"rendered":"Spliced Audio\/Video YouTube Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Spliced Audio\/Video YouTube Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/yt_multiple.gif\" title=\"Spliced Audio\/Video YouTube Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Spliced Audio\/Video YouTube Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Spliced Audio\/Video Animated GIF Tutorial' href='#sa\/vagift'>Spliced Audio\/Video Animated GIF Tutorial<\/a> input modus operandi &#8230;<\/p>\n<ul>\n<li>audio<\/li>\n<li>video<\/li>\n<li>image<\/li>\n<li>text to send to Google Translate &#8230; is bolstered today via a new modus operandum &#8230;<\/li>\n<li>via <a target=\"_blank\" title='YouTube' href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> video ID 11 character code play a YouTube video<\/li>\n<\/ul>\n<p> &#8230; feeding into our <a target=\"_blank\" title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference' rel=\"noopener\">YouTube API<\/a> work, but resurrecting an inhouse &#8220;blast from the past version&#8221; close to being okay, on non-mobile, changing YouTube video IDs &#8220;midstream&#8221; and keeping the video playing work all within the one webpage window.  Am sure we had ideas like this in mind using the &#8220;Splicing&#8221; word in the web application title.  We&#8217;ve always been a bit obsessed with those train announcements piecing a message together, especially when it comes to &#8220;number words&#8221; via a combination of audio media snippets.<\/p>\n<p>Also, today, with limited practical success, we&#8217;re trying to allow a user to loop through their media list, repeating the playing.  There are that many ways we can get interrupted achieving this, it&#8217;s not funny <font size=1>&#8230; really &#8230;<\/font> but we&#8217;re not getting upset because the user can go back to the source window and reclick buttons of their choice to keep the good times rolling <font size=1>&#8230; ah, MacArthur Park &#8230; again<\/font>!<\/p>\n<p>And so, codewise &#8230;<\/p>\n<ul>\n<!--li><a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----------------------------------------------------------------------------------------------GETME' rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----------------------------------------------------------------------------------------------GETME' rel=\"noopener\">tutorial_to_animated_gif.php<\/a> PHP <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php' rel=\"noopener\">animated GIF creator helper<\/a> web application ... hosted in a new iframe element to help collect local file media file(s) ... itself calling ...<\/li-->\n<!--li><a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--------------------------------------------------------GETME' rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--------------------------------------------------------GETME' rel=\"noopener\">client_browsing.htm<\/a> client side <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm' rel=\"noopener\">local file browsing HTML and Javascript inhouse helper<\/a> ... to help ...<\/li-->\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.php-GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.php-GETME\" rel=\"noopener\">unchanged<\/a> PHP &#8220;guise of&#8221; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.php\" rel=\"noopener\">our Splicing Audio or Video inhouse web application<\/a> (mainly adding $_POST[] navigation knowledge to the HTML template to work off) &#8230; helped out &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html-------GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html-------GETME\" rel=\"noopener\">splice_audio.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm\" rel=\"noopener\">live run<\/a><\/li>\n<\/ul>\n<p> &#8230; here, along with the reworked <i>eval<\/i> of our inhouse YouTube player &#8230;<\/p>\n<p><code><br \/>\nfunction neweval(cwhat) {<br \/>\n  var kkzero=0;<br \/>\n  var delmtry='|';<br \/>\n  var cbitsare=cwhat.split(delmtry);<br \/>\n  if (eval('' + cbitsare.length) &lt;= 1) {<br \/>\n    delmtry=',';<br \/>\n    cbitsare=cwhat.split(delmtry);<br \/>\n    if (eval('' + cbitsare.length) &lt;= 1) {<br \/>\n      delmtry=';';<br \/>\n      cbitsare=cwhat.split(delmtry);<br \/>\n      if (eval('' + cbitsare.length) &lt;= 1) {<br \/>\n        delmtry='@';<br \/>\n        cbitsare=cwhat.split(delmtry);<br \/>\n        if (eval('' + cbitsare.length) &lt;= 1) {<br \/>\n          delmtry='#';<br \/>\n          cbitsare=cwhat.split(delmtry);<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  var iki=0, surl='';<br \/>\n  var wasurl=document.URL;<br \/>\n  var isurl=wasurl, prefixingurl=wasurl, suffixingurl=wasurl;<br \/>\n  if (eval('' + cbitsare.length) &gt; 1) {<br \/>\n    if (eval('' + cbitsare[0].length) &gt;= 11) {<br \/>\n      iki=1;<br \/>\n      surl=wasurl.split(cbitsare[0])[0].split('&c')[eval(-1 + wasurl.split(cbitsare[0])[0].split('&c').length)];<br \/>\n      prefixingurl=wasurl.split(surl)[0];<br \/>\n      suffixingurl=wasurl.split(prefixingurl)[1];<br \/>\n      \/\/prefixingurl=prefixingurl.replace(\/\\=on\/g,'=off');<br \/>\n      prefixingurl=prefixingurl.replace('youtubeid=' + prefixingurl.split('youtubeid=')[1].split('&')[0].split('#')[0], 'youtubeid=' + cbitsare[0]);<br \/>\n      while (prefixingurl.indexOf('&i' + kkzero + '=') != -1) {<br \/>\n        prefixingurl=prefixingurl.replace('&i' + kkzero + '=' + prefixingurl.split('&i' + kkzero + '=')[1].split('&c')[0], '&i' + kkzero + '=0&j' + kkzero + '=0');<br \/>\n        kkzero++;<br \/>\n      }<br \/>\n      suffixingurl=suffixingurl.replace(cbitsare[0] + encodeURIComponent(delmtry), '').replace(cbitsare[0] + delmtry, '');<br \/>\n      location.href=prefixingurl + suffixingurl;<br \/>\n    } else if (eval('' + cbitsare[1].length) &gt;= 11) {<br \/>\n      iki=0;<br \/>\n      surl=wasurl.split(cbitsare[1])[0].split('&c')[eval(-1 + wasurl.split(cbitsare[1])[0].split('&c').length)];<br \/>\n      prefixingurl=wasurl.split(surl)[0];<br \/>\n      suffixingurl=wasurl.split(prefixingurl)[1];<br \/>\n      \/\/prefixingurl=prefixingurl.replace(\/\\=on\/g,'=off');<br \/>\n      prefixingurl=prefixingurl.replace('youtubeid=' + prefixingurl.split('youtubeid=')[1].split('&')[0].split('#')[0], 'youtubeid=' + cbitsare[1]);<br \/>\n      while (prefixingurl.indexOf('&i' + kkzero + '=') != -1) {<br \/>\n        prefixingurl=prefixingurl.replace('&i' + kkzero + '=' + prefixingurl.split('&i' + kkzero + '=')[1].split('&c')[0], '&i' + kkzero + '=0&j' + kkzero + '=0');<br \/>\n        kkzero++;<br \/>\n      }<br \/>\n      suffixingurl=suffixingurl.replace(encodeURIComponent(delmtry) + cbitsare[1], '').replace(delmtry + cbitsare[1], '');<br \/>\n      location.href=prefixingurl + suffixingurl;<br \/>\n    }<br \/>\n  }<br \/>\n  return eval('' + cbitsare[iki]);<br \/>\n}<br \/>\n<\/code><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audio\/video-youtube-tutorial\/' rel=\"noopener\">Spliced Audio\/Video YouTube Tutorial<\/a>.<\/p-->\n<hr>\n<p id='sa\/vagift'>Previous relevant <a target=\"_blank\" title='Spliced Audio\/Video Animated GIF Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audio\/video-animated-gif-tutorial\/' rel=\"noopener\">Spliced Audio\/Video Animated GIF Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Spliced Audio\/Video Animated GIF Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/was_spliced_audio_animated_gif.gif\" title=\"Spliced Audio\/Video Animated GIF Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Spliced Audio\/Video Animated GIF Tutorial<\/p><\/div>\n<p>If you&#8217;ve been following yesterday&#8217;s <a title='Spliced Audio\/Video Styling Tutorial' href='#sa\/vst'>Spliced Audio\/Video Styling Tutorial<\/a> Spliced Media synchronized play project of recent times, you&#8217;ll probably guess what our &#8220;project word&#8221; would be, that being &#8230;<\/p>\n<blockquote><p>\nduration\n<\/p><\/blockquote>\n<p> &#8230; as a &#8220;measure&#8221; of importance to help with the sequential play of media, out of &#8230;<\/p>\n<ul>\n<li>audio<\/li>\n<li>video<\/li>\n<li>image<\/li>\n<\/ul>\n<p> &#8230; choices of &#8220;media category&#8221; we&#8217;re offering in this project.  But, what &#8220;duration&#8221; applies to <i>image<\/i> choice above?  Well, we just hardcode 5 seconds for &#8230;<\/p>\n<ul>\n<li><font size=1>(non-animated)<\/font> JPEG or PNG or GIF &#8230; but &#8230;<\/li>\n<li>animated GIFs have a <i>one cycle through<\/i> duration &#8230;<\/li>\n<\/ul>\n<p> &#8230; that we want to help calculate for the user and show in that relevant &#8220;end of&#8221; timing textbox.  Luckily, we&#8217;ve researched this in the past, but every scenario is that bit different, we find, and so here is the Javascript for what we&#8217;re using &#8230;<\/p>\n<p><code><br \/>\nfunction prefetch(whatgifmaybe) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/69564118\/how-to-get-xxduration-of-gif-image-in-javascript#:~:text=Mainly%20use%20parseGIF()%20%2C%20then,xxduration%20of%20a%20GIF%20image.<br \/>\nif ((whatgifmaybe.toLowerCase().trim().split('#')[0].replace('\/gif;', '\/gif?;') + '?').indexOf('.gif?') != -1 && lastgifpreq != whatgifmaybe.split('?')[0]) {<br \/>\nlastgifpreq=whatgifmaybe.split('?')[0];<br \/>\nif (whatgifmaybe.indexOf('\/tmp\/') != -1) {<br \/>\n  lastgifurl='\/tmp\/' + whatgifmaybe.split('\/tmp\/')[1];<br \/>\n} else {<br \/>\n  lastgifurl='';<br \/>\n}<br \/>\ndocument.body.style.cursor='progress';<br \/>\nwhatgifmaybe=whatgifmaybe.split('?')[0];<br \/>\n\/\/alert('whatgifmaybe=' + whatgifmaybe);<br \/>\n<br \/>\nfetch(whatgifmaybe)<br \/>\n  .then(res =&gt; res.arrayBuffer())<br \/>\n  .then(ab =&gt; isGifAnimated(new Uint8Array(ab)))<br \/>\n  .then(console.log);<br \/>\n}<br \/>\nreturn -1;<br \/>\n}<br \/>\n<br \/>\n\/** @param {Uint8Array} uint8 *\/<br \/>\n<br \/>\nfunction isGifAnimated(uint8) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/69564118\/how-to-get-xxduration-of-gif-image-in-javascript#:~:text=Mainly%20use%20parseGIF()%20%2C%20then,xxduration%20of%20a%20GIF%20image.<br \/>\n  let xxduration = 0;<br \/>\n  for (let i = 0, len = uint8.length; i &lt; len; i++) {<br \/>\n    if (uint8[i] == 0x21<br \/>\n      && uint8[i + 1] == 0xF9<br \/>\n      && uint8[i + 2] == 0x04<br \/>\n      && uint8[i + 7] == 0x00) {<br \/>\n      const xxdelay = (uint8[i + 5] &lt;&lt; 8) | (uint8[i + 4] & 0xFF);<br \/>\n      xxduration += xxdelay &lt; 2 ? 10 : xxdelay;<br \/>\n    }<br \/>\n  }<br \/>\n  \/\/alert('' + eval(xxduration \/ 100));<br \/>\n  if (eval(xxduration \/ 100) &gt; 0.11) {<br \/>\n    delay=eval(xxduration \/ 100);<br \/>\n    if (('' + delay).indexOf('.') != -1) {<br \/>\n    \/\/document.getElementById('end' + lastgifid).type='text';<br \/>\n    document.getElementById('end' + lastgifid).title='' + delay;<br \/>\n    document.getElementById('end' + lastgifid).value='' + delay;<br \/>\n    \/\/alert(delay);<br \/>\n    \/\/setTimeout(function(){ alert('DeLaY=' + delay + ' lastgifid=' + lastgifid); }, 2000);<br \/>\n    } else if (document.getElementById('end' + lastgifid)) {<br \/>\n    document.getElementById('end' + lastgifid).title='' + delay;<br \/>\n    document.getElementById('end' + lastgifid).value='' + delay;<br \/>\n    if (document.getElementById('audio' + lastgifid).value.toLowerCase().indexOf('.gif') != -1 && document.getElementById('audio' + lastgifid).value.replace(\/^\\\/tmp\\\/\/g,'data:').indexOf('data:') == -1 && document.getElementById('audio' + lastgifid).value.indexOf('#.') == -1) {<br \/>\n      document.getElementById('audio' + lastgifid).value+='#.' + delay;<br \/>\n    }<br \/>\n    if (lastgifurl != '' && (176 == 176 || lastgifurl != lastgifurl)) { document.getElementById('audio' + lastgifid).value='' + lastgifurl;   }<br \/>\n    setTimeout(function(){ if (1 == 1) { document.getElementById('taif').src='\/PHP\/animegif\/tutorial_to_animated_gif.php?aschild=' + Math.floor(Math.random() * 19897865);  } else { window.open('\/PHP\/animegif\/tutorial_to_animated_gif.php?aschild=' + Math.floor(Math.random() * 19897865),'taif'); } }, 2000);<br \/>\n    }<br \/>\n  }<br \/>\n  document.body.style.cursor='pointer';<br \/>\n  return eval(xxduration \/ 100); \/\/ if 0.1 is not an animated GIF<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; in this project.<\/p>\n<p>Today, we start concertinaing multiple image asks <font size=1>(and yet show image order)<\/font>, using our favourite <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" title='WordPress reveal posts' rel=\"noopener\">&#8220;reveal&#8221;<\/a> tool, the <a target=\"_blank\" title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp' rel=\"noopener\">details<\/a>\/<a target=\"_blank\" title='HTML summary tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp' rel=\"noopener\">summary<\/a> HTML element dynamic duo, so that there are less images disappearing &#8220;below the fold&#8221; happening this way in &#8230;<\/p>\n<ul>\n<!--li><a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----------------------------------------------------------------------------------------------GETME' rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----------------------------------------------------------------------------------------------GETME' rel=\"noopener\">tutorial_to_animated_gif.php<\/a> PHP <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php' rel=\"noopener\">animated GIF creator helper<\/a> web application ... hosted in a new iframe element to help collect local file media file(s) ... itself calling ...<\/li-->\n<li><a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--------------------------------------------------------GETME' rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--------------------------------------------------------GETME' rel=\"noopener\">client_browsing.htm<\/a> client side <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm' rel=\"noopener\">local file browsing HTML and Javascript inhouse helper<\/a> &#8230; to help &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.php_GETME\" rel=\"noopener\">unchanged<\/a> PHP &#8220;guise of&#8221; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.php\" rel=\"noopener\">our Splicing Audio or Video inhouse web application<\/a> (mainly adding $_POST[] navigation knowledge to the HTML template to work off) &#8230; that being &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html------GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html------GETME\" rel=\"noopener\">splice_audio.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm\" rel=\"noopener\">live run<\/a><\/li>\n<\/ul>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audio\/video-animated-gif-tutorial\/' rel=\"noopener\">Spliced Audio\/Video Animated GIF Tutorial<\/a>.<\/p-->\n<hr>\n<p id='sa\/vst'>Previous relevant <a target=\"_blank\" title='Spliced Audio\/Video Styling Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audio\/video-styling-tutorial\/' rel=\"noopener\">Spliced Audio\/Video Styling Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Spliced Audio\/Video Styling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/was_spliced_audio_aesthetics.gif\" title=\"Spliced Audio\/Video Styling Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Spliced Audio\/Video Styling Tutorial<\/p><\/div>\n<p>We have &#8220;bad hair days&#8221;, but that doesn&#8217;t stop us seeking &#8220;styling days&#8221;.  Yes, we often separate CSS styling into an issue that is addressed only if we deem the project warrants it, and we&#8217;ve decided this latest Spliced Audio\/Video web application project is worth it.  This means that further to yesterday&#8217;s <a title='Spliced Audio\/Video Browsing Data URL Tutorial' href='#sa\/vbdurlt'>Spliced Audio\/Video Browsing Data URL Tutorial<\/a> we have some new CSS styling in today&#8217;s work &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n  body {<br \/>\n     background-color: #f9f9f9;<br \/>\n  }<br \/>\n  <br \/>\n  .animg {<br \/>\n     width: 100%;<br \/>\n  }<br \/>\n<br \/>\n  input[type=text] {<br \/>\n     background-color: #e0e0e0;<br \/>\n     border-radius: 7px;<br \/>\n     margin-bottom: 2px;<br \/>\n  }<br \/>\n<br \/>\n  input[type=number] {<br \/>\n     background-color: #ebebeb;<br \/>\n     border-radius: 7px;<br \/>\n  }<br \/>\n  <br \/>\n  input[type=submit] {<br \/>\n     border-radius: 7px;<br \/>\n     width: 20%;<br \/>\n  }<br \/>\n<br \/>\n  #spif {<br \/>\n     border-radius: 7px;<br \/>\n  }<br \/>\n<br \/>\n  #taif {<br \/>\n     border-radius: 7px;<br \/>\n  }<br \/>\n<br \/>\n  input[type=checkbox] { \/* thanks to https:\/\/stackoverflow.com\/questions\/24322599\/why-cannot-change-checkbox-color-whatever-i-do *\/<br \/>\n     border: 1px solid yellow;<br \/>\n     filter: invert(80%) hue-rotate(88deg) brightness(1.7) opacity(0.8);<br \/>\n     accent-color: cyan;<br \/>\n  }<br \/>\n  <br \/>\n  #audio1 {<br \/>\n     width: 29% !important;<br \/>\n  }<br \/>\n  <br \/>\n  select {<br \/>\n     background-color: lightblue;<br \/>\n     border-radius: 7px;<br \/>\n  }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p>Yes, no rocket science there.  But, for the first time we can remember, we&#8217;ve turned a button &#8230;<\/p>\n<ul>\n<li>\n<code><br \/>\n&lt;input onclick='fixhide(); fixstartend();' id='subis' style='text-align:center; background-color: pink; ' type='submit' value='Play Sequentially'&gt;&lt;\/input&gt;<br \/>\n<\/code><br \/>\n &#8230; into <font size=1>(in the second phase of it&#8217;s existence within an execution run)<\/font> a &#8230;\n<\/li>\n<li>linear gradient inspired progress bar &#8230; the secret to the &#8220;hard stops&#8221; we got great new advice from <a target=\"_blank\" href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/gradient\/linear-gradient' rel=\"noopener\">this link<\/a>, thanks &#8230; to come up with dynamic CSS styling via Javascript &#8230;<br \/>\n<code><br \/>\nfunction dstyleit(what) {<br \/>\n   var oney=what.split('yellow ')[1].split('%')[0] + '%,';<br \/>\n   what=what.replace(oney,oney + oney);<br \/>\n   document.getElementById('dstyle').innerHTML+='&lt;style&gt; #subis { background: ' + what + ' } &lt;\/style&gt;';<br \/>\n   return what;<br \/>\n}<br \/>\n<br \/>\nfunction everysecond() {<br \/>\n  var addition=0.0;<br \/>\n  segstart+=1.0;<br \/>\n  if (segstart &lt;= segend) {<br \/>\n    addition=eval(1.0 * (eval(segstart \/ segend) * (eval(nextpercent - basepercent))));<br \/>\n    if (segstart &lt; segend) {<br \/>\n      setTimeout(everysecond, 1000);<br \/>\n    }<br \/>\n    document.getElementById('subis').style.background=dstyleit('linear-gradient(to right, yellow ' + Math.ceil(eval(basepercent + addition)) + '%, pink ' + Math.floor(eval(100 - eval(basepercent + addition))) + '%) !important');<br \/>\n  } else {<br \/>\n    addition=eval(nextpercent - basepercent);<br \/>\n    document.getElementById('subis').style.background=dstyleit('linear-gradient(to right, yellow ' + Math.ceil(eval(basepercent + addition)) + '%, pink ' + Math.floor(eval(100 - eval(basepercent + addition))) + '%) !important');<br \/>\n    segstart=0.0;<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction seqe() {<br \/>\n      var suff=' of 1', lzero=0;<br \/>\n      if (document.getElementById('end' + eval(1 + zero)) && (spareanvideo != '' || spareanimg != '' || spareanaudio != '' || spareelse != '' || zero &gt; 0)) {<br \/>\n      while (audiofiles[eval(0 + lzero)].trim() != '') {<br \/>\n        lzero++;<br \/>\n      }<br \/>\n      suff=' of ' + lzero;<br \/>\n      basepercent=eval(100 * (eval(0 + zero) \/ lzero));<br \/>\n      nextpercent=eval(100 * (eval(1 + zero) \/ lzero));<br \/>\n      if (audiofiles[eval(0 + zero)].indexOf('data:audio\/') == 0) {<br \/>\n      isaudio=true;<br \/>\n      document.getElementById('subis').style.background=dstyleit('linear-gradient(to right, yellow ' + Math.ceil(eval(100 * (eval(0 + zero) \/ lzero))) + '%, pink ' + Math.floor(eval(100 - eval(100 * (eval(0 + zero) \/ lzero)))) + '%) !important');<br \/>\n      document.getElementById('subis').value='Currently Playing Audio ' + eval(1 + zero) + suff; \/\/ + ': ' + audiofiles[eval(0 + zero)].replace(\/\\ \/g,'+'); \/\/ + \" via Google Translate if you press speaker and am waiting for you to close that window.\";<br \/>\n      \/\/var xc=prompt(divanaudio.replace('&lt;source ', '&lt;source type=audio\/' + audiofiles[eval(0 + zero)].split('data:audio\/')[1].split(',')[0].split(';')[0] + ' ').replace(' src=\"\"', ' src=\"' + audiofiles[eval(0 + zero)].replace(\/\\ \/g,'+') + '\"').replace('none','BLOCK'),divanaudio.replace('&lt;source ', '&lt;source type=audio\/' + audiofiles[eval(0 + zero)].split('data:audio\/')[1].split(',')[0].split(';')[0] + ' ').replace(' src=\"\"', ' src=\"' + audiofiles[eval(0 + zero)].replace(\/\\ \/g,'+') + '\"').replace('none','BLOCK'));<br \/>\n      document.getElementById('divanaudio').style.width='30%';<br \/>\n      document.getElementById('divanaudio').style.marginLeft='35%';<br \/>\n      document.getElementById('divanaudio').innerHTML=divanaudio.replace('&gt;',' controls&gt;').replace(' title=\"\"', ' title=\"Play\"').replace('&lt;source ', '&lt;source type=audio\/' + audiofiles[eval(0 + zero)].split('data:audio\/')[1].split(',')[0].split(';')[0] + ' ').replace(' src=\"\"', ' src=\"' + audiofiles[eval(0 + zero)].replace(\/\\ \/g,'+') + '\"').replace('none','BLOCK');<br \/>\n      if (document.getElementById('end' + eval(1 + zero)).value.replace(\/^0\/g,'-').indexOf('-') == -1) {<br \/>\n        segstart=0.0;<br \/>\n        segend=eval('' + document.getElementById('end' + eval(1 + zero)).value) + 4 - eval('' + document.getElementById('start' + eval(1 + zero)).value);<br \/>\n        setTimeout(everysecond, 1000);<br \/>\n        setTimeout(function(){  zero++; seqe(); }, eval(1000 * (eval('' + document.getElementById('end' + eval(1 + zero)).value) + 4 - eval('' + document.getElementById('start' + eval(1 + zero)).value))));<br \/>\n      }<br \/>\n      } else if (audiofiles[eval(0 + zero)].indexOf('data:video\/') == 0) {<br \/>\n      isaudio=false;<br \/>\n      document.getElementById('subis').style.background=dstyleit('linear-gradient(to right, yellow ' + Math.ceil(eval(100 * (eval(0 + zero) \/ lzero))) + '%, pink ' + Math.floor(eval(100 - eval(100 * (eval(0 + zero) \/ lzero)))) + '%) !important');<br \/>\n      document.getElementById('subis').value='Currently Playing Video ' + eval(1 + zero) + suff; \/\/ + ': ' + audiofiles[eval(0 + zero)].replace(\/\\ \/g,'+'); \/\/ + \" via Google Translate if you press speaker and am waiting for you to close that window.\";<br \/>\n      document.getElementById('divanvideo').style.width='100%';<br \/>\n      document.getElementById('anvideo').style.width='60%';<br \/>\n      document.getElementById('anvideo').style.marginLeft='20%';<br \/>\n      document.getElementById('divanvideo').innerHTML=divanvideo.replace('&gt;',' controls&gt;').replace(' title=\"\"', ' title=\"Play\"').replace('&lt;source ', '&lt;source type=video\/' + audiofiles[eval(0 + zero)].split('data:video\/')[1].split(',')[0].split(';')[0].replace('quicktime','mp4') + ' ').replace(' src=\"\"', ' src=\"' + audiofiles[eval(0 + zero)].replace(\/\\ \/g,'+') + '\"').replace('none','BLOCK');<br \/>\n      if (document.getElementById('end' + eval(1 + zero)).value.replace(\/^0\/g,'-').indexOf('-') == -1) {<br \/>\n        setTimeout(everysecond, 1000);<br \/>\n        setTimeout(function(){  zero++; seqe(); }, eval(1000 * (eval('' + document.getElementById('end' + eval(1 + zero)).value) + 4 - eval('' + document.getElementById('start' + eval(1 + zero)).value))));<br \/>\n      }<br \/>\n      } else if (audiofiles[eval(0 + zero)].indexOf('data:image\/') == 0) {<br \/>\n      isaudio=false;<br \/>\n      document.getElementById('subis').style.background=dstyleit('linear-gradient(to right, yellow ' + Math.ceil(eval(100 * (eval(0 + zero) \/ lzero))) + '%, pink ' + Math.floor(eval(100 - eval(100 * (eval(0 + zero) \/ lzero)))) + '%) !important');<br \/>\n      document.getElementById('subis').value='Currently Showing Image ' + eval(1 + zero) + suff; \/\/ + ': ' + audiofiles[eval(0 + zero)].replace(\/\\ \/g,'+'); \/\/ + \" via Google Translate if you press speaker and am waiting for you to close that window.\";<br \/>\n      document.getElementById('divanimg').style.width='100%';<br \/>\n      document.getElementById('divanimg').style.textAlign='center';<br \/>\n      \/\/alert(divanimg.replace(' title=\"\"', ' title=\"Play\"').replace(' src=\"\"', ' src=\"' + audiofiles[eval(0 + zero)].replace(\/\\ \/g,'+') + '\"').replace('none','BLOCK'));<br \/>\n    if (document.getElementById('animg').src == '') {<br \/>\n      document.getElementById('divanimg').innerHTML=divanimg.replace(' title=\"\"', ' title=\"Play\"').replace(' src=\"\"', ' src=\"' + audiofiles[eval(0 + zero)].replace(\/\\ \/g,'+') + '\"').replace('none','BLOCK');<br \/>\n    } else if (document.getElementById('divanimg').innerHTML.indexOf(audiofiles[eval(0 + zero)].replace(\/\\ \/g,'+')) == -1) {<br \/>\n      document.getElementById('divanimg').innerHTML+=('&lt;br&gt;&lt;img' + divanimg.split('&lt;img')[1].split('&lt;\/img&gt;')[0] + '&lt;\/img&gt;').replace(' id=', ' data-id=').replace(' title=\"\"', ' title=\"Play\"').replace(' src=\"\"', ' src=\"' + audiofiles[eval(0 + zero)].replace(\/\\ \/g,'+') + '\"').replace('none','BLOCK');<br \/>\n    }<br \/>\n      if (document.getElementById('end' + eval(1 + zero)).value.replace(\/^0\/g,'-').indexOf('-') == -1) {<br \/>\n        segstart=0.0;<br \/>\n        segend=eval('' + document.getElementById('end' + eval(1 + zero)).value) + 4 - eval('' + document.getElementById('start' + eval(1 + zero)).value);<br \/>\n        setTimeout(everysecond, 1000);<br \/>\n        setTimeout(function(){  zero++; seqe(); }, eval(1000 * (eval('' + document.getElementById('end' + eval(1 + zero)).value) + 4 - eval('' + document.getElementById('start' + eval(1 + zero)).value))));<br \/>\n      }<br \/>\n      } else if (audiofiles[eval(0 + zero)] != '') {<br \/>\n      isaudio=true;<br \/>\n      document.getElementById('subis').style.background=dstyleit('linear-gradient(to right, yellow ' + Math.ceil(eval(100 * (eval(0 + zero) \/ lzero))) + '%, pink ' + Math.floor(eval(100 - eval(100 * (eval(0 + zero) \/ lzero)))) + '%) !important');<br \/>\n      document.getElementById('subis').value='Currently Playing Audio ' + eval(1 + zero) + ': ' + noplus(audiofiles[eval(0 + zero)]) + \" via Google Translate if you press speaker and am waiting for you to close that window \" + suff;<br \/>\n      wo=window.open('https:\/\/translate.google.com\/#auto\/en\/' + encodeURIComponent(noplus(audiofiles[eval(0 + zero)])),'_blank','top=50,left=50,width=600,height=600');<br \/>\n      }<br \/>\n      setTimeout(precheckget, 20);<br \/>\n      }<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; so as to be happy that our button behaved a lot like a progress bar in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html-----GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html-----GETME\" rel=\"noopener\">splice_audio.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm\" rel=\"noopener\">live run<\/a> &#8230;<\/p>\n<li>\n<\/ul>\n<p> &#8230; as something we&#8217;ve long dreamed of <font size=1>&#8230; well, you had to be there!<\/font><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audio\/video-styling-tutorial\/' rel=\"noopener\">New Spliced Audio\/Video Styling Tutorial<\/a>.<\/p-->\n<hr>\n<p id='sa\/vbdurlt'>Previous relevant <a target=\"_blank\" title='Spliced Audio\/Video Browsing Data URL Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audio\/video-browsing-data-url-tutorial\/' rel=\"noopener\">Spliced Audio\/Video Browsing Data URL Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Spliced Audio\/Video Browsing Data URL Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/was_spliced_audio_more.gif\" title=\"Spliced Audio\/Video Browsing Data URL Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Spliced Audio\/Video Browsing Data URL Tutorial<\/p><\/div>\n<p>It&#8217;s data URL media conduits that make &#8230;<\/p>\n<ul>\n<li>browsing for local files off the client operating system environment &#8230; and &#8230;<\/li>\n<li>a genericized &#8220;guise&#8221; of web server media files &#8230; and &#8230;<\/li>\n<li>client <a target=\"_blank\" title='Great link' href='http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\/' rel=\"noopener\">File API<\/a> blob or canvas content media representations<\/li>\n<\/ul>\n<p> &#8230; a point of commonality, and as far as we are concerned, we are always looking to these days, whenever we can, <i>data size permitting<\/i>, to do away with static web server references, open to so many mixed content and privilege issues.<\/p>\n<p>Perhaps, that is the major reason, these days, we&#8217;ve taken more and more to hashtag based means of communication via &#8220;a&#8221; &#8220;mailto:&#8221; (email) or &#8220;sms:&#8221; (SMS) links.<\/p>\n<p>Today proved to us that that, albeit most flexible of all, clientside hashtag approach has its data limitations, that PHP serverside form method=POST does better at, as far as accomodating large amounts of data.<\/p>\n<p>And so, yesterday, with our Splicing Audio or Video inhouse web application, turning more towards data URLs to solve issues, we started the day &#8230;<\/p>\n<ul>\n<li>trying hashtag clientside based navigations &#8230; but ran into data size issues, so &#8230;<\/li>\n<li>introduced into our Splicing Audio or Video inhouse web application, for the first time, PHP serverside involvement &#8230;<\/li>\n<\/ul>\n<p> &#8230; that made things start working for us better getting the synchronized play of our user entered audio or video media items performing better.<\/p>\n<p>And so, further to yesterday&#8217;s <a title='Spliced Audio\/Video Data URL Tutorial' href='#sa\/vdurlt'>Spliced Audio\/Video Data URL Tutorial<\/a> we added <i>browsing for local media files<\/i> as a new option for user input, by calling &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----------------------------------------------------------------------------------------------GETME' rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----------------------------------------------------------------------------------------------GETME' rel=\"noopener\">tutorial_to_animated_gif.php<\/a> PHP <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php' rel=\"noopener\">animated GIF creator helper<\/a> web application &#8230; hosted in a new iframe element to help collect local file media file(s) &#8230; itself calling &#8230;<\/li>\n<li><a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html-------------------------------------------------------GETME' rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html-------------------------------------------------------GETME' rel=\"noopener\">client_browsing.htm<\/a> client side <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm' rel=\"noopener\">local file browsing HTML and Javascript inhouse helper<\/a> &#8230; to help &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.php_GETME\" rel=\"noopener\">totally new &#8220;first draft&#8221;<\/a> PHP &#8220;guise of&#8221; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.php\" rel=\"noopener\">our Splicing Audio or Video inhouse web application<\/a> (mainly adding $_POST[] navigation knowledge to the HTML template to work off) &#8230; that being &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html----GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html----GETME\" rel=\"noopener\">splice_audio.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm\" rel=\"noopener\">live run<\/a><\/li>\n<\/ul>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audio\/video-browsing-data-url-tutorial\/' rel=\"noopener\">Spliced Audio\/Video Browsing Data URL Tutorial<\/a>.<\/p-->\n<hr>\n<p id='sa\/vdurlt'>Previous relevant <a target=\"_blank\" title='Spliced Audio\/Video Data URL Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audio\/video-data-url-tutorial\/' rel=\"noopener\">Spliced Audio\/Video Data URL Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Spliced Audio\/Video Data URL Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/was_spliced_audio.gif\" title=\"Spliced Audio\/Video Data URL Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Spliced Audio\/Video Data URL Tutorial<\/p><\/div>\n<p>We&#8217;re revisiting the Spliced Media web application talked about at <a title='Spliced Audio\/Video Overlay Position Tutorial' href='#savopt'>Spliced Audio\/Video Overlay Position Tutorial<\/a> to shore up some input conduits &#8230;<\/p>\n<ul>\n<li>entering a <i>File<\/i> as a relative URL to the RJM Programming domain document root &#8230;<\/li>\n<li>entering a <i>File<\/i> as a fully formed audio or video data URL<\/li>\n<\/ul>\n<p> &#8230; and there is still browsing for local files we&#8217;d like to add to that list, but on another day.<\/p>\n<p>We started considering this work to help the user to fill out a real media <i>duration<\/i> value that can help with the synchronized playing of the media.<\/p>\n<p>We found that the <i>onloadedmetadata<\/i> statically defined &#8230;<\/p>\n<p><code><br \/>\n&lt;div id=divanaudio&gt;&lt;audio id='anaudio' onload=alere(event); onloadedmetadata=ahere(event); style=display:none;&gt;&lt;source id=sanaudio src=\"\"&gt;&lt;\/source&gt;&lt;\/audio&gt;&lt;\/div&gt;<br \/>\n&lt;div id=divanvideo&gt;&lt;video id='anvideo' onload=vlere(event); onloadedmetadata=vhere(event); style=display:none;&gt;&lt;source id=sanvideo src=\"\"&gt;&lt;\/source&gt;&lt;\/video&gt;&lt;\/div&gt;<br \/>\n&lt;iframe name=myif onload='checkdu(this);' id=myif src=\/HTMLCSS\/do_away_with_the_boring_bits.html style=display:none;&gt;&lt;\/iframe&gt;<br \/>\n&lt;form id=myifform method=POST style=display:none; target=myif action=\/HTMLCSS\/do_away_with_the_boring_bits.php&gt;<br \/>\n&lt;input type=hidden name=url id=myifurl value=''&gt;&lt;\/input&gt;&lt;input type=hidden name=durto id=myifdurto value=''&gt;&lt;\/input&gt;&lt;input type=hidden name=justfgcdu id=myifjustfgcdu value=''&gt;&lt;\/input&gt;&lt;input type=submit id=myifb value=Submit style=display:none;&gt;&lt;\/input&gt;&lt;\/form&gt;<br \/>\n<\/code><\/p>\n<p>&#8230; in an <i>audio<\/i> or <i>video<\/i> element hosted by a reworked <i>div<\/i> hosting element was <font color=blue>the way to go<\/font> &#8230;<\/p>\n<p><code><br \/>\nfunction doinput(sio) {<br \/>\n  <font color=blue>var ij=0;<br \/>\n  if (sio.value.indexOf('data:audio\/') == 0) {<br \/>\n    if (sio.value.indexOf(';base64,') != -1) {<br \/>\n    durtoid='end' + sio.id.replace('audio','');<br \/>\n    document.getElementById('sel' + sio.id.replace('audio','')).value='Audio';<br \/>\n    document.getElementById('divanaudio').innerHTML=divanaudio.replace('&gt;source ', '&lt;source type=audio\/' + sio.value.split('data:audio\/')[1].split(',')[0].split(';')[0] + ' ').replace(' src=\"\"', ' src=\"' + sio.value + '\"').replace('none','NONE');<br \/>\n    document.getElementById('myif').src='\/HTMLCSS\/do_away_with_the_boring_bits.php?rand=' + encodeURIComponent(sio.value.split(';base64,')[0] + ';base64,');<br \/>\n    document.getElementById('myifurl').value=sio.value;<br \/>\n    document.getElementById('myifdurto').value=durtoid;<br \/>\n    document.getElementById('myifjustfgcdu').value=sio.value.split(';base64,')[0] + ';base64,';<br \/>\n    setTimeout(function(){<br \/>\n    document.getElementById('myifb').click();<br \/>\n    }, 2000);<br \/>\n    }<br \/>\n  } else if (sio.value.indexOf('data:video\/') == 0) {<br \/>\n    if (sio.value.indexOf(';base64,') != -1) {<br \/>\n    durtoid='end' + sio.id.replace('audio','');<br \/>\n    document.getElementById('sel' + sio.id.replace('audio','')).value='Video';<br \/>\n    document.getElementById('divanvideo').innerHTML=divanaudio.replace('&lt;source ', '&lt;source type=video\/' + sio.value.split('data:video\/')[1].split(',')[0].split(';')[0] + ' ').replace(' src=\"\"', ' src=\"' + sio.value + '\"').replace('none','NONE');<br \/>\n    document.getElementById('myif').src='\/HTMLCSS\/do_away_with_the_boring_bits.php?rand=' + encodeURIComponent(sio.value.split(';base64,')[0] + ';base64,');<br \/>\n    document.getElementById('myifurl').value=sio.value;<br \/>\n    document.getElementById('myifdurto').value=durtoid;<br \/>\n    document.getElementById('myifjustfgcdu').value=sio.value.split(';base64,')[0] + ';base64,';<br \/>\n    setTimeout(function(){<br \/>\n    document.getElementById('myifb').click();<br \/>\n    }, 2000);<br \/>\n    }<br \/>\n  } else if (sio.value.indexOf('data:image\/') == 0) {<br \/>\n    durtoid='end' + sio.id.replace('audio','');<br \/>\n  } else if (('     ' + sio.value.replace(\/\\.$\/g,'')).slice(-5).indexOf('.') != -1) {<br \/>\n    for (ij=0; ij&lt;mexts.length; ij++) {<br \/>\n      if ((sio.value + '~').indexOf(mexts[ij] + '~') != -1) {<br \/>\n         durtoid='end' + sio.id.replace('audio','');<br \/>\n         document.getElementById('sel' + sio.id.replace('audio','')).value=mtypes[ij].split('\/')[0].substring(0,1).toUpperCase() + mtypes[ij].split('\/')[0].substring(1).toLowerCase();<br \/>\n         switch (mtypes[ij].split('\/')[0]) {<br \/>\n           case \"audio\":<br \/>\n             document.getElementById('myif').src='\/HTMLCSS\/do_away_with_the_boring_bits.php?url=' + encodeURIComponent(sio.value) + '&durto=end' + sio.id.replace('audio','') + '&justfgcdu=' + encodeURIComponent('data:' + mtypes[ij] + ';base64,');<br \/>\n             break;<br \/>\n<br \/>\n           case \"video\":<br \/>\n             document.getElementById('myif').src='\/HTMLCSS\/do_away_with_the_boring_bits.php?url=' + encodeURIComponent(sio.value) + '&durto=end' + sio.id.replace('audio','') + '&justfgcdu=' + encodeURIComponent('data:' + mtypes[ij] + ';base64,');<br \/>\n             break;<br \/>\n    <br \/> <br \/>\n           default:<br \/>\n             break;<br \/>\n        <br \/> <br \/>\n         }<br \/>\n      }<br \/>\n    }<br \/>\n  }<\/font><br \/>\n  audiofiles[eval(-1 + eval(sio.id.replace('audio','')))]=sio.value;<br \/>\n}<br \/>\n<br \/>\nfunction checkdu(iois) {<br \/>\n    if (iois.src.indexOf('\/do_away_with_the_boring_bits.') != -1 && iois.src.indexOf('\/do_away_with_the_boring_bits.htm') == -1) {<br \/>\n       var twaconto = (iois.contentWindow || iois.contentDocument);<br \/>\n       if (twaconto != null) {<br \/>\n       if (twaconto.document) { twaconto = twaconto.document; }<br \/>\n       if (twaconto.body.innerHTML.replace(\/^\\\/tmp\/g, 'data:audio').indexOf('data:audio\/') != -1) {<br \/>\n       \/\/alert(twaconto.body.innerHTML);<br \/>\n          \/\/document.getElementById('sanaudio').src=twaconto.body.innerHTML;<br \/>\n          \/\/alert(divanaudio + ' ... ' + twaconto.body.innerHTML);<br \/>\n          if (twaconto.body.innerHTML.indexOf('data:audio\/') != -1) {<br \/>\n          document.getElementById('divanaudio').innerHTML=divanaudio.replace('&lt;source ', '&lt;source type=audio\/' + twaconto.body.innerHTML.split('data:audio\/')[1].split(',')[0].split(';')[0] + ' ').replace(' src=\"\"', ' src=\"' + twaconto.body.innerHTML + '\"').replace('none','NONE');<br \/>\n          } else {<br \/>\n          var pref=1;<br \/>\n          if (document.getElementById('audio' + pref).value.indexOf('data:') == -1) {<br \/>\n          while (document.getElementById('audio' + pref).value.indexOf('data:') == -1) {<br \/>\n             pref++;<br \/>\n          }<br \/>\n          }<br \/>\n          while (document.getElementById('audio' + pref).value.indexOf('data:') == -1) {<br \/>\n             pref++;<br \/>\n          }<br \/>\n          document.getElementById('audio' + pref).value=twaconto.body.innerHTML;<br \/>\n          iois.src='\/HTMLCSS\/do_away_with_the_boring_bits.php?rand=';<br \/>\n          }<br \/>\n          \/\/alert(document.getElementById('divanaudio').innerHTML);<br \/>\n       } else if (twaconto.body.innerHTML.indexOf('data:video\/') != -1) {<br \/>\n          \/\/document.getElementById('sanvideo').src=twaconto.body.innerHTML;<br \/>\n          \/\/alert(divanvideo + ' ... ' + twaconto.body.innerHTML);<br \/>\n          document.getElementById('divanvideo').innerHTML=divanvideo.replace('&lt;source ', '&lt;source type=video\/' + twaconto.body.innerHTML.split('data:video\/')[1].split(',')[0].split(';')[0] + ' ').replace(' src=\"\"', ' src=\"' + twaconto.body.innerHTML + '\"').replace('none','NONE');<br \/>\n          \/\/alert(document.getElementById('divanvideo').innerHTML);<br \/>\n       }<br \/>\n       \/\/alert(twaconto.body.innerHTML);<br \/>\n       }<br \/>\n    }<br \/>\n}<br \/>\n<br \/>\nfunction ahere(evt) {<br \/>\n if (document.getElementById('sanaudio').src.trim() != '') {<br \/>\n  document.getElementById(durtoid).value=Math.ceil(eval('' + document.getElementById('anaudio').duration));<br \/>\n  \/\/alert('audio here');<br \/>\n  \/\/alert('audio here ' + document.getElementById('anaudio').duration);<br \/>\n }<br \/>\n}<br \/>\n<br \/>\nfunction alere(evt) {<br \/>\n if (document.getElementById('sanaudio').src.trim() != '') {<br \/>\n  document.getElementById(durtoid).value=Math.ceil(eval('' + document.getElementById('anaudio').duration));<br \/>\n  \/\/alert('audio Here');<br \/>\n }<br \/>\n}<br \/>\n<br \/>\nfunction vhere(evt) {<br \/>\n if (document.getElementById('sanvideo').src.trim() != '') {<br \/>\n  document.getElementById(durtoid).value=Math.ceil(eval('' + document.getElementById('anvideo').duration));<br \/>\n  \/\/alert('video here');<br \/>\n  \/\/alert('video here ' + document.getElementById('anvideo').duration);<br \/>\n }<br \/>\n}<br \/>\n<br \/>\nfunction vlere(evt) {<br \/>\n if (document.getElementById('sanvideo').src.trim() != '') {<br \/>\n  document.getElementById(durtoid).value=Math.ceil(eval('' + document.getElementById('anvideo').duration));<br \/>\n  \/\/alert('video Here');<br \/>\n }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>This works if you can fill in the <i>src<\/i> attribute of the relevant subelement <i>source<\/i> element with a suitable <i>data URL<\/i> <font size=1>(we used <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.php----GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.php----GETME\" rel=\"noopener\">do_away_with_the_boring_bits.php<\/a> helping PHP to derive)<\/font>.  From there, in that event logic an [element].duration is there to help fill out those end of play textboxes in a more automated fashion for the user that wants to use this new functionality, as they fill out the Spliced Media form presented.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audio\/video-data-url-tutorial\/' rel=\"noopener\">Spliced Audio\/Video Data URL Tutorial<\/a>.<\/p-->\n<hr>\n<p id='savopt'>Previous relevant <a target=\"_blank\" title='Spliced Audio\/Video Overlay Position Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audiovideo-overlay-position-tutorial\/' rel=\"noopener\">Spliced Audio\/Video Overlay Position Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Spliced Audio\/Video Overlay Position Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audiovideo_position.jpg\" title=\"Spliced Audio\/Video Overlay Position Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Spliced Audio\/Video Overlay Position Tutorial<\/p><\/div>\n<p>Today we&#8217;ve written a third draft of an HTML and Javascript web application that splices up to nine bits of audio or video or image input together, building on the previous <a title='Spliced Audio\/Video\/Image Overlay Tutorial' href='#saviot'>Spliced Audio\/Video\/Image Overlay Tutorial<\/a> as shown below, here, and that can take any of the forms &#8230;<\/p>\n<ul>\n<li>audio file &#8230; and less user friendly is &#8230;<\/li>\n<li>text that gets turned into speech via <a target=\"_blank\" title='Google Translate' href='http:\/\/translate.google.com' rel=\"noopener\">Google Translate<\/a> (and user induced Text to Speech functionality), but needs your button presses<\/li>\n<li>video<\/li>\n<li>image &#8230; and background image for webpage<\/li>\n<\/ul>\n<p> &#8230; for either of the modes of use, that being &#8230;<\/p>\n<ul>\n<li>discrete &#8230; or &#8220;Optional&#8221;<\/li>\n<li>synchronized &#8230; or &#8220;Overlay&#8221;<\/li>\n<\/ul>\n<p> &#8230; all like yesterday, but this time we allow you to &#8220;seek&#8221; or position yourself within the audio and\/or video media.  We still all &#8220;fit&#8221; this into GET parameter usage.  Are you thinking we are a tad lazy with this approach?  Well, perhaps a little, but it also means you can do this job just using clientside HTML and Javascript, without having to involve any serverside code like PHP, and in this day and age, people are much keener on this &#8220;just clientside&#8221; or &#8220;just client looking, plus, perhaps, Javascript serverside code&#8221; (ala <a target=\"_blank\" title='Node.js installation download webpage' href='https:\/\/nodejs.org\/en\/download\/' rel=\"noopener\">Node.js<\/a>) or perhaps &#8220;Javascript clientside client code, plus Ajax methodologies&#8221;.  In any case, it does simplify design to not have to involve a serverside language like PHP &#8230; but please don&#8217;t think we do not encourage you to learn a serverside language like PHP.<\/p>\n<p>While we are at it here, we continue to think about the mobile device unfriendliness with our current web application, it being, these days, that the setting of the <i>autoplay<\/i> property for a media object is frowned upon regarding these mobile devices &#8230; for reasons of &#8220;runaway&#8221; unknown charge issues as you can read at this <a target=\"_blank\" title='Useful link' href='http:\/\/stackoverflow.com\/questions\/12496144\/can-you-autoplay-html5-videos-on-the-ipad' rel=\"noopener\">useful link<\/a> &#8230; thanks &#8230; and where they quote from Apple &#8230; <\/p>\n<blockquote cite=\"http:\/\/stackoverflow.com\/questions\/12496144\/can-you-autoplay-html5-videos-on-the-ipad\"><p>\n    &#8220;Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.<br \/>\n<b><\/b><br \/>\n    In Safari, on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and auto-play are disabled. No data is loaded until the user initiates it.&#8221; &#8211; Apple documentation.\n<\/p><\/blockquote>\n<p>A link we&#8217;d like to thank regarding the new &#8220;seek&#8221; or media positioning functionality is <a target=\"_blank\" title='Useful link' href='http:\/\/stackoverflow.com\/questions\/9563887\/setting-html5-audio-position' rel=\"noopener\">this one<\/a> &#8230; thanks.<\/p>\n<p><p>Also, today, for that sense of symmetry, we start to create the Audio objects from now on using &#8230;<\/p>\n<p><code><br \/>\ndocument.createElement(\"AUDIO\");<br \/>\n<\/code><\/p>\n<p> &#8230; as this acts the same as <i>new Audio()<\/i> to the best of our testing.<\/p>\n<p>For your own testing purposes, if you know of some media URLs to try, please feel free to try the &#8220;overlay&#8221; of media ideas inherent in today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html---GETME\" rel=\"noopener\">splice_audio.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm\" rel=\"noopener\">live run<\/a>.  For today&#8217;s <i>cake<\/i> &#8220;prepared before the program&#8221; we&#8217;ve again channelled the <a target=\"_blank\" title='GoToMeeting Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gotomeeting-primer-tutorial\/' rel=\"noopener\">GoToMeeting Primer Tutorial<\/a> which had separate audio (albeit very short &#8230; sorry &#8230; but you get the gist) and video &#8230; well, below, you can click on the image to hear the presentation with audio and video synchronized, but only seconds 23 through to 47 of the video should play, and the presentation ending with the image below &#8230;<\/p>\n<p><a id='aaiff' title='Click to see the audio and video played together synchronously' onclick=\"  document.getElementById('aiff').style.display='block';  document.getElementById('aiff').src='http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm?audio1=..%2FGoToMeeting%2FGoToMeeting.m4v+%2323.47&#038;audio2=+..%2FGoToMeeting%2FGoToMeeting.m4a&#038;audio3=..%2FGoToMeeting%2FGoToMeeting-80aof.jpg++&#038;audio4=&#038;audio5=&#038;audio6=&#038;audio7=&#038;audio8=&#038;audio9=&#038;background=&#038;hide=offoff'; this.style.display='none'; \"><img title='Click to see the audio and video played together synchronously' id='iiif' src='http:\/\/www.rjmprogramming.com.au\/Mac\/GoToMeeting\/GoToMeeting-80aof.jpg'><\/img><\/a><iframe style='display:none; width:100%; height:500px;' id='aiff' src='http:\/\/www.rjmprogramming.com.au\/Mac\/GoToMeeting\/GoToMeeting-80aof.jpg' title='GoToMeeting Primer Tutorial presentation'><\/iframe><\/p>\n<p>We think, though, that we will be back regarding this interesting topic, and hope we can improve mobile device functionality.<\/p>\n<hr>\n<p id='saviot'>Previous relevant <a target=\"_blank\" title='Spliced Audio\/Video\/Image Overlay Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audiovideoimage-overlay-tutorial\/' rel=\"noopener\">Spliced Audio\/Video\/Image Overlay Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Spliced Audio\/Video\/Image Overlay Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audiovideo.jpg\" title=\"Spliced Audio\/Video\/Image Overlay Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Spliced Audio\/Video\/Image Overlay Tutorial<\/p><\/div>\n<p>Today we&#8217;ve written a second draft of an HTML and Javascript web application that splices up to nine bits of audio or video or image input together, building on the previous <a title='Splicing Audio Primer Tutorial' href='#sapt'>Splicing Audio Primer Tutorial<\/a> as shown below, here, and that can take any of the forms &#8230;<\/p>\n<ul>\n<li>audio file &#8230; and less user friendly is &#8230;<\/li>\n<li>text that gets turned into speech via <a target=\"_blank\" title='Google Translate' href='http:\/\/translate.google.com' rel=\"noopener\">Google Translate<\/a> (and user induced Text to Speech functionality), but needs your button presses<\/li>\n<li>video<\/li>\n<li>image &#8230; and background image for webpage<\/li>\n<\/ul>\n<p> &#8230; for either of the modes of use, that being &#8230;<\/p>\n<ul>\n<li>discrete &#8230; or &#8220;Optional&#8221;<\/li>\n<li>synchronized &#8230; or &#8220;Overlay&#8221;<\/li>\n<\/ul>\n<p>The major new change here, apart from the ability to play two media files at once in our synchronized (or &#8220;overlayed&#8221;) way, is the additional functionality for Video, and we proceeded thinking there&#8217;d be an Javascript DOM <a target=\"_blank\" title='OOP information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Object-oriented_programming' rel=\"noopener\">OOP<\/a>y method like &#8230; <i>var xv = new Video();<\/i> &#8230; to allow for this, but found out from this useful link &#8230; thanks &#8230; that an <a target=\"_blank\" title='Video object information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/dom_obj_video.asp' rel=\"noopener\">alternative approach for Video<\/a> object creation, on the fly, is &#8230;<\/p>\n<p><code><br \/>\nvar xv = document.createElement(\"VIDEO\");<br \/>\n<\/code><\/p>\n<p> &#8230; curiously.  And it took us a while to tweak to the idea that to have a &#8220;display home&#8221; for the video on the webpage we needed to &#8230;<\/p>\n<p><code><br \/>\ndocument.body.appendChild(xv);<br \/>\n<\/code><\/p>\n<p> &#8230; which means you need to take care of any HTML form data already filled in, that isn&#8217;t that form&#8217;s default, when you effectively &#8220;refresh&#8221; the webpage like this.  Essentially though, media on the fly is a modern approach possible fairly easily with just clientside code.  Cute, huh?!<\/p>\n<p>Of course, what we still miss here, is the upload from a local place onto the web server, here at RJM Programming, capability, which we may consider in future, and that some of those other <a target=\"_blank\" title='Synchronization blog postings here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/synchronize' rel=\"noopener\">synchronization of media<\/a> themed blog postings of the past, which you may want to read more, for this type of approach.<\/p>\n<p>In the meantime, if you know of some media URLs to try, please feel free to try the &#8220;overlay&#8221; of media ideas inherent in today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html--GETME\" rel=\"noopener\">splice_audio.htm<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm\" rel=\"noopener\">live run<\/a>.  We&#8217;ve thought of this one.  Do you remember how the <a target=\"_blank\" title='GoToMeeting Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gotomeeting-primer-tutorial\/' rel=\"noopener\">GoToMeeting Primer Tutorial<\/a> had separate audio (albeit very short &#8230; sorry &#8230; but you get the gist) and video &#8230; well, below, you can click on the image to hear the presentation with audio and video synchronized, and the presentation ending with the image below &#8230;<\/p>\n<p><a id='aaif' title='Click to see the audio and video played together synchronously' onclick=\"  document.getElementById('aif').style.display='block';  document.getElementById('aif').src='http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm?audio1=..%2FGoToMeeting%2FGoToMeeting.m4v+&#038;audio2=+..%2FGoToMeeting%2FGoToMeeting.m4a&#038;audio3=..%2FGoToMeeting%2FGoToMeeting-80aof.jpg++&#038;audio4=&#038;audio5=&#038;audio6=&#038;audio7=&#038;audio8=&#038;audio9=&#038;background=&#038;hide=offoff'; this.style.display='none'; \"><img title='Click to see the audio and video played together synchronously' id='iiif' src='http:\/\/www.rjmprogramming.com.au\/Mac\/GoToMeeting\/GoToMeeting-80aof.jpg'><\/img><\/a><iframe style='display:none; width:100%; height:500px;' id='aif' src='http:\/\/www.rjmprogramming.com.au\/Mac\/GoToMeeting\/GoToMeeting-80aof.jpg' title='GoToMeeting Primer Tutorial presentation'><\/iframe><\/p>\n<p>We think, though, that we will be back regarding this interesting topic.<\/p>\n<hr>\n<p id='sapt'>Previous relevant <a target=\"_blank\" title='Splicing Audio Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/splicing-audio-primer-tutorial\/' rel=\"noopener\">Splicing Audio Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Spliced Audio Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.jpg\" title=\"Spliced Audio Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Splicing Audio Primer Tutorial<\/p><\/div>\n<p>Today we&#8217;ve written a first draft of an HTML and Javascript web application that splices up to nine bits of audio input together that can take either of the forms &#8230;<\/p>\n<ul>\n<li>audio file &#8230; and less user friendly is &#8230;<\/li>\n<li>text that gets turned into speech via <a target=\"_blank\" title='Google Translate' href='http:\/\/translate.google.com' rel=\"noopener\">Google Translate<\/a> (and user induced Text to Speech functionality), but needs your button presses<\/li>\n<\/ul>\n<p>Do you remember, perhaps, when we did a series of blog posts regarding the YouTube API, that finished, so far, with <a target=\"_blank\" title='YouTube API Iframe Synchronicity Resizing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-api-iframe-synchronicity-resizing-tutorial\/' rel=\"noopener\">YouTube API Iframe Synchronicity Resizing Tutorial<\/a>?  Well, a lot of what we do today is doing similar sorts of functionalities but just for <a target=\"_blank\" title='Javascript Audio object via DOM information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_av_dom.asp' rel=\"noopener\"><i>Audio<\/i><\/a> objects in HTML5.  For help on this we&#8217;d like to thank this <a target=\"_blank\" title='Great link' href='http:\/\/stackoverflow.com\/questions\/10868249\/html5-audio-player-duration-showing-nan' rel=\"noopener\">great link<\/a>.  So rather than have HTML <a target=\"_blank\" href='http:\/\/www.w3schools.com\/html\/html5_audio.asp' title='HTML audio tag information from w3schools' rel=\"noopener\"><i>audio<\/i><\/a> elements in our HTML, as we first shaped to do, we&#8217;ve taken the great advice from this link, and gone all Javascript DOM <a target=\"_blank\" title='OOP information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Object-oriented_programming' rel=\"noopener\">OOP<\/a>y on the task, to splice audio media together.<\/p>\n<p>There were three thought patterns going on here for me.<\/p>\n<ul>\n<li>The first was a simulation of those Sydney train public announcements where the timbre of the voice differs a bit between when they say &#8220;Platform&#8221; and the &#8220;6&#8221; (or whatever platform it is) that follows.  This is pretty obviously computer audio &#8220;bits&#8221; strung together &#8230; and wanted to get somewhere towards that capability.<\/li>\n<li>The second one relates to presentation ideas following up on that &#8220;onmouseover&#8221; Siri audio enhanced presentation we did at <a target=\"_blank\" title='Apple iOS Siri Audio Commentary Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/apple-ios-siri-audio-commentary-tutorial\/' rel=\"noopener\">Apple iOS Siri Audio Commentary Tutorial<\/a>.  Well, we think we can do something related to that here, and we&#8217;ve prepared this <strike>cake<\/strike> audio presentation here, for us, in advance &#8230; <font size=1>really, there&#8217;s no need for thanks<\/font>.<\/li>\n<li>The third concerns our eternal media file synchronization quests here at this blog that you may find of interest we hope, <a target=\"_blank\" title='Synchronization blog postings here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/synchronize' rel=\"noopener\">here<\/a>.<\/p>\n<\/ul>\n<p>Also of interest over time has been the <a target=\"_blank\" title='Google Translate' href='http:\/\/translate.google.com' rel=\"noopener\">Google Translate<\/a> Text to Speech functionality that <a target=\"_blank\" title='Discussion here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/text-to-speech' rel=\"noopener\">used to be very open<\/a>, and we now only use around here in an interactive &#8220;user clicks&#8221; way &#8230; but we still use it, because it is very useful, so, thanks.  But trying to get this method working for &#8220;Platform&#8221; and &#8220;6&#8221; without a yawning gap in between ruins the spontaneity and fun somehow, but there&#8217;s nothing stopping you making your own audio files yourself as we did in that Siri tutorial called <a target=\"_blank\" title='Apple iOS Siri Audio Commentary Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/apple-ios-siri-audio-commentary-tutorial\/' rel=\"noopener\">Apple iOS Siri Audio Commentary Tutorial<\/a> and take the HTML and Javascript code you could call <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html_GETME\" title='splice_audio.html' rel=\"noopener\">splice_audio.html<\/a> from today, and go and make your own web application? Now, is there? Huh?<\/p>\n<p>Try a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html\" title='Click picture' rel=\"noopener\">live run<\/a> or perhaps some more Siri cakes?!<\/p>\n<ul>\n<li><a target=\"_blank\" title='Audio with Background then Form for another, perhaps' href='http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html?audio1=slide1.m4a&#038;audio2=slide2.m4a&#038;audio3=slide3.m4a&#038;audio4=slide4.m4a&#038;audio5=slide5.m4a&#038;audio6=slide6.m4a&#038;audio7=slide7.m4a&#038;audio8=slide8.m4a&#038;audio9=slide9.m4a&#038;background=siri_setup.jpg&#038;hide=onoff' rel=\"noopener\">Audio with Background then Form for another, perhaps<\/a><\/li>\n<li><a target=\"_blank\" title='Audio with Background and Form showing the whole time' href='http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html?audio1=slide1.m4a&#038;audio2=slide2.m4a&#038;audio3=slide3.m4a&#038;audio4=slide4.m4a&#038;audio5=slide5.m4a&#038;audio6=slide6.m4a&#038;audio7=slide7.m4a&#038;audio8=slide8.m4a&#038;audio9=slide9.m4a&#038;background=siri_setup.jpg&#038;hide=offoff' rel=\"noopener\">Audio with Background and Form showing the whole time<\/a><\/li>\n<li><a target=\"_blank\" title='Audio with no Background then Form for another, perhaps' href='http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html?audio1=slide1.m4a&#038;audio2=slide2.m4a&#038;audio3=slide3.m4a&#038;audio4=slide4.m4a&#038;audio5=slide5.m4a&#038;audio6=slide6.m4a&#038;audio7=slide7.m4a&#038;audio8=slide8.m4a&#038;audio9=slide9.m4a&#038;background=&#038;hide=onoff' rel=\"noopener\">Audio with no Background then Form for another, perhaps<\/a><\/li>\n<li><a target=\"_blank\" title='Just Audio' href='http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.html?audio1=slide1.m4a&#038;audio2=slide2.m4a&#038;audio3=slide3.m4a&#038;audio4=slide4.m4a&#038;audio5=slide5.m4a&#038;audio6=slide6.m4a&#038;audio7=slide7.m4a&#038;audio8=slide8.m4a&#038;audio9=slide9.m4a&#038;background=&#038;hide=onon' rel=\"noopener\">Just Audio<\/a><\/li>\n<\/ul>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d24451' onclick='var dv=document.getElementById(\"d24451\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/audio\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d24451' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d24545' onclick='var dv=document.getElementById(\"d24545\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/video\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d24545' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d24572' onclick='var dv=document.getElementById(\"d24572\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/media\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d24572' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d67866' onclick='var dv=document.getElementById(\"d67866\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/audio\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d67866' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d67887' onclick='var dv=document.getElementById(\"d67887\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/browsing\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d67887' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d67907' onclick='var dv=document.getElementById(\"d67907\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d67907' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d67921' onclick='var dv=document.getElementById(\"d67921\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/duration\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d67921' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d67933' onclick='var dv=document.getElementById(\"d67933\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/youtube\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d67933' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Spliced Audio\/Video Animated GIF Tutorial input modus operandi &#8230; audio video image text to send to Google Translate &#8230; is bolstered today via a new modus operandum &#8230; via YouTube video ID 11 character code play a YouTube video &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audio-video-youtube-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[2915,83,113,1989,2051,1993,3531,5160,281,290,5159,297,2380,2310,354,419,452,532,576,587,652,2205,3870,760,1830,840,849,870,5158,875,894,932,2362,1988,970,997,1063,1987,1209,1212,2311,1234,1670,1258,1319,1369,1493],"class_list":["post-67933","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-_post","tag-animated-gif","tag-audio","tag-autoplay","tag-blob","tag-browse","tag-browsing","tag-concertina","tag-css","tag-data","tag-data-size","tag-data-url","tag-delay","tag-details","tag-dom","tag-file-api","tag-form","tag-google-translate","tag-html","tag-iframe","tag-javascript","tag-loop","tag-looping","tag-media","tag-method","tag-node-js","tag-object","tag-onload","tag-onloadedmetadata","tag-oop","tag-overlay","tag-php","tag-play","tag-position","tag-post","tag-programming","tag-reveal","tag-seek","tag-style","tag-styling","tag-summary","tag-synchronization","tag-synchronize","tag-text-to-speech","tag-tutorial","tag-video","tag-youtube"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/67933"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=67933"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/67933\/revisions"}],"predecessor-version":[{"id":67946,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/67933\/revisions\/67946"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=67933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=67933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=67933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}