{"id":24451,"date":"2016-08-27T03:01:57","date_gmt":"2016-08-26T17:01:57","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=24451"},"modified":"2016-08-29T18:19:38","modified_gmt":"2016-08-29T08:19:38","slug":"splicing-audio-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/splicing-audio-primer-tutorial\/","title":{"rendered":"Splicing Audio Primer Tutorial"},"content":{"rendered":"<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","protected":false},"excerpt":{"rendered":"<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; audio file &#8230; and less user friendly is &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/splicing-audio-primer-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,997,1234,1670,1258,1319],"class_list":["post-24451","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-programming","tag-synchronization","tag-synchronize","tag-text-to-speech","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24451"}],"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=24451"}],"version-history":[{"count":13,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24451\/revisions"}],"predecessor-version":[{"id":24565,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24451\/revisions\/24565"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=24451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=24451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=24451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}