{"id":24545,"date":"2016-08-30T03:01:55","date_gmt":"2016-08-29T17:01:55","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=24545"},"modified":"2016-08-30T10:33:34","modified_gmt":"2016-08-30T00:33:34","slug":"spliced-audiovideoimage-overlay-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audiovideoimage-overlay-tutorial\/","title":{"rendered":"Spliced Audio\/Video\/Image Overlay 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\"><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'>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'>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'>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'>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\">splice_audio.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/splice_audio.htm\">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\/'>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\/'>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\"><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'>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\/'>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'><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'>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'><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'>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\/'>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'>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'>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'>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\/'>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'>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'>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'>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'>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'>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'>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","protected":false},"excerpt":{"rendered":"<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 Splicing Audio Primer Tutorial as shown below, here, and &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/spliced-audiovideoimage-overlay-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,28,37],"tags":[113,354,452,532,576,652,760,849,875,894,997,1234,1670,1258,1319,1369],"class_list":["post-24545","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-oop","category-tutorials","tag-audio","tag-dom","tag-form","tag-google-translate","tag-html","tag-javascript","tag-media","tag-object","tag-oop","tag-overlay","tag-programming","tag-synchronization","tag-synchronize","tag-text-to-speech","tag-tutorial","tag-video"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24545"}],"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=24545"}],"version-history":[{"count":20,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24545\/revisions"}],"predecessor-version":[{"id":24571,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24545\/revisions\/24571"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=24545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=24545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=24545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}