Walking Trip …

Walking Trip

Walking Trip

Offenbach's Suite ... Warts 'n All

Offenbach's Suite ... Warts 'n All

If this was interesting you may be interested in this too.

Posted in Photography, Trips | Tagged , , , , , , , , , | 336 Comments

Trip Mobile Device Gimp Photo Enhancement Tutorial

Trip Mobile Device Gimp Photo Enhancement Tutorial

Trip Mobile Device Gimp Photo Enhancement Tutorial

Continuing on with our trip themed tutorials, following on from the last Trip Mobile Device Usage Clock Tutorial one, let’s continue on in our non chronological manner, but a manner in which we reference all six of our Mobile Device Trip Idea Helpers you see below, and take a look at our Samsung GT-S5310B (Android 4.1.2) mobile phone method for the third meets fourth screenshot idea set, honing in not so much on the phone’s self-screenshotting capabilities, but more of it being used as a Camera to photograph a piece of hard copy, turning it into a piece of soft copy … but what quality is this soft copy? With mobile device Camera app photographs of hard copy, it can be questionable, especially if you want to read something off the photograph. That is where, “back on shore”, transferring that Samsung GT-S5310B (Android 4.1.2) mobile phone’s photograph over to our MacBook Pro using the Android File Transfer methodology we outlined yesterday with Android Disk to MacBook Pro Disk Tutorial, we now have the means by which we can involve our favourite MacBook Pro desktop image editor application called Gimp which we have a history of raving about regarding photograph enhancement … especially for “the graphically challenged of us” at “photograph enhancement”. And so you can see some of this mobile phone photograph, of hard copy into soft copy, pan out below …

  1. Web browser to use for the research planning, in the form of typed in search engine wording you can type straight into the address bar, if you like …

    Eg. Eltham Palace (typed into, went to, for us, here … this)
    Eltham Palace map (typed into, went to, for us, here … this … and then choosing “Maps” on Google search engine resulted in this … and then, while you’re there, “as they say” check out the menu options up the top left)
    Barbican to Eltham Palace (typed into, went to, for us, here … this … and then choosing “Maps” on Google search engine resulted in this … and then, while you’re there, “as they say” gape at the brilliance of modern day “where” software)

  2. Google Maps as an app or via the mobile website to help with questions regarding how to get there, as we last discussed with Google Maps Primer Tutorial
  3. Screenshot functionality, as we last discussed with Emailing iPad Screenshot Primer Tutorial, to screenshot maps of interest useful if connectivity is not there as you are out and about on your trip, as well as for the soft copy of any Receipts resulting from the online purchase of travel tickets, as, these days, this is often as acceptable as hard copy, which could also use …
  4. Camera (photographing hard copy to become soft copy like … … this, for example … that, today, as with WordPress 4.1.1′s Trip Mobile Device Gimp Photo Enhancement Tutorial, we get back to a MacBookPro’s Gimp desktop image editor application called Gimp to improve to be ) and Video creation functionality is mainly useful as you are out and about on your trip.
  5. Photos or Gallery app on the mobile device to store those trip memories, as we last discussed with YouTube via iPad Photos App Primer Tutorial, and to utilise that app’s Share functionalities to post to Social Media or Online Photo Repositories or to attach via eMail off to other folks, there and then, or later, as we discussed with Email Photos on iPad as Attachments Primer Tutorial. The Event or Moment photo and video organisation this app uses helps you remember what you did, even much later after the trip, as we last discussed with Moving Pictures on an iPad Primer Tutorial.
  6. Clock apps can help you keep track of time zone differences as you travel.

Now you may not see the Gimp effort is worth it, but am sure a Gimp expert can get better improvements than you see above, because, as you would correctly surmise, Graphic Artists are that … artists.

But we feel that we should detail what we did in Gimp, in addition to what today’s tutorial picture summarises …

  1. [Colours -> Hue-Saturation... ->] Adjust Hue / Lightness / Saturation … Hue=2 / Lightness=45 / Saturation=-53
  2. [Colours -> Brightness-Contrast... ->] Adjust Brightness and Contrast … Brightness=21 and Contrast=60
  3. [Filters -> Enhance -> Sharpen... ->] Sharpen … Sharpen=71
  4. [Colours -> Colourize... ->] Colourize … Hue=274 / Saturation=9 / Lightness=13

Previous relevant Trip Mobile Device Usage Clock Tutorial is shown below.

Trip Mobile Device Usage Clock Tutorial

Trip Mobile Device Usage Clock Tutorial

Continuing on with our trip themed tutorials, following on from yesterday’s Trip Mobile Device Usage Primer Tutorial as shown below, let’s take a look at our Samsung GT-S5310B (Android 4.1.2) mobile phone method for the sixth “Clock app” idea below …

  1. Web browser to use for the research planning, in the form of typed in search engine wording you can type straight into the address bar, if you like …

    Eg. Eltham Palace (typed into, went to, for us, here … this)
    Eltham Palace map (typed into, went to, for us, here … this … and then choosing “Maps” on Google search engine resulted in this … and then, while you’re there, “as they say” check out the menu options up the top left)
    Barbican to Eltham Palace (typed into, went to, for us, here … this … and then choosing “Maps” on Google search engine resulted in this … and then, while you’re there, “as they say” gape at the brilliance of modern day “where” software)

  2. Google Maps as an app or via the mobile website to help with questions regarding how to get there, as we last discussed with Google Maps Primer Tutorial
  3. Screenshot functionality, as we last discussed with Emailing iPad Screenshot Primer Tutorial, to screenshot maps of interest useful if connectivity is not there as you are out and about on your trip, as well as for the soft copy of any Receipts resulting from the online purchase of travel tickets, as, these days, this is often as acceptable as hard copy, which could also use …
  4. Camera and Video creation functionality is mainly useful as you are out and about on your trip.
  5. Photos or Gallery app on the mobile device to store those trip memories, as we last discussed with YouTube via iPad Photos App Primer Tutorial, and to utilise that app’s Share functionalities to post to Social Media or Online Photo Repositories or to attach via eMail off to other folks, there and then, or later, as we discussed with Email Photos on iPad as Attachments Primer Tutorial. The Event or Moment photo and video organisation this app uses helps you remember what you did, even much later after the trip, as we last discussed with Moving Pictures on an iPad Primer Tutorial.
  6. Clock apps

    … the screenshot for which was obtained via Home button/Power button together -> Gallery -> Screenshots -> Share icon -> Upload to Photos then Photos -> Hold until selected -> Share icon -> Email to myself then on MacBook Pro Mail -> Open eMail -> Download attachment -> Save to Downloads … can help you keep track of time zone differences as you travel.

The context of its use is twofold, at least for us, in that it can be useful …

  • while you are away checking times back home
  • during aeroplane flights and transit lounge stays

For any of this you will probably need the relevant part of Location Services to be enabled (perhaps heeding iPad battery issues we talked about with Location Services iPad Battery Loss Issue Tutorial), and for the second of the ideas above we need to ensure, as passengers in a plane, that we can’t interfere with any plane navigation equipment, by turning “Flight mode” to on for Android and “Airplane Mode” to on for iPad or iPhone before the flight, and back to off after the flight, when you should also set Wi-Fi to on, as necessary, to restore any desired connectivity.

By the way, the name of the corresponding app on an iPad is also called “Clock”.


Previous relevant Trip Mobile Device Usage Primer Tutorial is shown below.

Trip Mobile Device Usage Primer Tutorial

Trip Mobile Device Usage Primer Tutorial

The word trip, in English, conjures up many thoughts for many of us. We hope that a trip conjures up happy memories for you, but we realize sometimes that is not the case, but be that as it may, a trip often …

  • is an opportunity to go somewhere new
  • is an opportunity to learn something new
  • is an opportunity to meet people, and other animals, who are new to you
  • is an opportunity to experience something new
  • is an opportunity to plan for something new
  • is an opportunity to share information and experiences

… and a lot of these characteristics are well pandered to with modern mobile device technology.

We like to use mobile devices for both trip planning and execution. We own an iPad tablet using iOS and a mobile phone using Android, and though we prefer to use the iPad for the trip planning, sometimes the Android is better to use for the trip itself because it is that bit smaller.

Our favourite mobile device ideas to use are …

  1. Web browser to use for the research planning, in the form of typed in search engine wording you can type straight into the address bar, if you like …

    Eg. Eltham Palace (typed into, went to, for us, here … this)
    Eltham Palace map (typed into, went to, for us, here … this … and then choosing “Maps” on Google search engine resulted in this … and then, while you’re there, “as they say” check out the menu options up the top left)
    Barbican to Eltham Palace (typed into, went to, for us, here … this … and then choosing “Maps” on Google search engine resulted in this … and then, while you’re there, “as they say” gape at the brilliance of modern day “where” software)

  2. Google Maps as an app or via the mobile website to help with questions regarding how to get there, as we last discussed with Google Maps Primer Tutorial
  3. Screenshot functionality, as we last discussed with Emailing iPad Screenshot Primer Tutorial, to screenshot maps of interest useful if connectivity is not there as you are out and about on your trip, as well as for the soft copy of any Receipts resulting from the online purchase of travel tickets, as, these days, this is often as acceptable as hard copy, which could also use …
  4. Camera and Video creation functionality is mainly useful as you are out and about on your trip.
  5. Photos or Gallery app on the mobile device to store those trip memories, as we last discussed with YouTube via iPad Photos App Primer Tutorial, and to utilise that app’s Share functionalities to post to Social Media or Online Photo Repositories or to attach via eMail off to other folks, there and then, or later, as we discussed with Email Photos on iPad as Attachments Primer Tutorial. The Event or Moment photo and video organisation this app uses helps you remember what you did, even much later after the trip, as we last discussed with Moving Pictures on an iPad Primer Tutorial.
  6. Clock apps can help you keep track of time zone differences as you travel.

We just wonder what Macon Leary, out of The Accidental Tourist, would have made of it all … the “third person” English about travel matters often makes me giggle inside about this movie.

We’ll be writing more on the trip theme soon … just as soon as William Hurt writes me back … chortle, chortle.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in GIMP, Photography, Software, Trips, Tutorials, eLearning | Tagged , , , , , , , , , , , , , , , , , , , | Leave a comment

HTML5 Web Audio Mudcube Piano Integration Tutorial

HTML5 Web Audio Mudcube Piano Integration Tutorial

HTML5 Web Audio Mudcube Piano Integration Tutorial

The integrations of the recent HTML5 Web Audio Piano Mobile Safari Web Inspector Debug Tutorial have a lot in common with today’s …

  • audio applicability … in conjunction with …
  • piano

… basis. But this integration to an older “piano application” incarnation, that used MIDI interfacing, has additional “composing” functionality we’re keen to “lassoo” into the integrations, because the integration of Web Audio will mean we can compose music on mobile platforms (we hope by tomorrow), if that’s your preference. On this front, do you remember us working out the haunting and beautiful theme to the music to Merry Christmas, Mr Lawrence when we presented HTML/Javascript/PHP Compose Music Makeover Tutorial … as per …

What was some of the inspiration? Right near the end of ABC Radio 702′s Thu 27 Dec 2018, 6:00am Sydney, Australia podcast you can hear what was to me a captivating piano solo played by Ryuichi Sakamoto below …


… written for the movie Merry Christmas, Mr Lawrence.

? Well, we’ve used that tune to test run our integration, where it wasn’t just the case of plugging in the same logic of the integration of HTML5 Web Audio Piano Mobile Safari Web Inspector Debug Tutorial, alas. The MIDI plugin of the mudcube incarnation does some clever client “sleeping” to do its thaing, so we have to work out quite a bit of setTimeout (timer) rearranging to simulate those “smarts”.

Here are the changes …

… for transcribed music or brand new compositions like …

… with which we hope you might now be able to work music compositions (at least on non-mobile for today), via the Web Audio API that came in with HTML5.

You can also see this play out at WordPress 4.1.1′s HTML5 Web Audio Mudcube Piano Integration Tutorial.


Previous relevant HTML5 Web Audio Piano Mobile Safari Web Inspector Debug Tutorial is shown below.

HTML5 Web Audio Piano Mobile Safari Web Inspector Debug Tutorial

HTML5 Web Audio Piano Mobile Safari Web Inspector Debug Tutorial

There were problems peculiar to mobile platforms involved in the work of yesterday’s HTML5 Web Audio Piano Mobile Tutorial. But just how did we arrive at a solution? We can tell you now a placement of Javascript “alert” popup windows is inadequate for such an involved issue that cannot be simulated on our usual MacBook Pro laptop “home base” computer. So what to do?

There’s a big clue in the difference reports of yesterday …

Did you notice the use of … anyone, anyone? … yes, Augusta Ada Kingconsole.log([message]) calls all over the place. Could it be that “alert” calls would be too disruptive? That’s right. Do you remember, perhaps, in science at school, how we learnt that looking at a photon was difficult because we would be interfering in how that photon would be in nature, and so we can not conclude anything categorically because of our interference. Well, “timing issues” are a bit the same, but console.log([message]) calls will not interfere and yet pass on information to … anyone, anyone? … yes, Grace Brewster Murray Hopper … a web inspector. Like Safari’s we think, given we’re working with …

  • an iPhone to test on
  • a MacBook Pro to facilitate the testing … connected via …
  • (the ubiquitous Apple white) lead … hardware wise … and …
  • the Safari web browser (on both devices, running our “piano web application” on the iPhone Safari web browser) … software wise … and within that browser’s …
  • Developer menu can get us to (the iPhone incarnation of the) Web Inspector … within which the …
  • Console tab can show us errors and warnings and information (which we can augment ourselves via our console.log[message]) Javascript DOM calls in the HTML/Javascript/CSS code of our “piano web application” and its “web audio interfacing” friend

… but if you’ve not done this in the past, there is a fair bit to do to get up and running doing this. In setting this up, we were stuck for a while with connections but blank console tab screens. Why? Well, you need both iPhone and MacBook Pro to have any outstanding operating system updates attended to. Then, given that, we’d recommend following the excellent advice of How to Activate the iPhone Debug Console, thanks …

On the iPhone (setting up wise) …

  1. Tap the Settings icon on the iPhone Home screen.
  2. Scroll down until you reach Safari and tap on it to open the screen that contains everything related to the Safari web browser on your iPhone, iPad, or iPod touch.
  3. Scroll to the bottom of the screen and tap Advanced menu.
  4. Toggle the slider next to Web Inspector to the On position.

On the MacBook Pro (setting up wise) …

  1. Click Safari in the menu bar and choose Preferences.
  2. Click the Advanced tab
  3. Select the box next to Show Develop menu in menu bar.
  4. Exit the settings window.
  5. Click Develop in the Safari menu bar and select Show Web Inspector.

… and we’ve got for you some screenshots of our “goings on” sorting out our “piano web application” problems on mobile (at least iOS) platforms with today’s PDF “stream of consciousness” presentation. We hope it helps you out, or gets you down the road of digging into an issue you have with an HTML web application on an iOS device.


Previous relevant HTML5 Web Audio Piano Mobile Tutorial is shown below.

HTML5 Web Audio Piano Mobile Tutorial

HTML5 Web Audio Piano Mobile Tutorial

You guessed it! The software integrations of yesterday’s HTML5 Web Audio Piano Tutorial had issues with the mobile platforms. Do fish swim? Do axolotl have two L’s and two O’s? Yes, yes and yes.

With our iPad and iPhone testing (and we’ll go more into that tomorrow) we found timing issues as to when exactly to call that window onload init function. Which beggars the question, being that window and document are two different objects of a webpage “is window onload the same as document body onload?” We’d always assumed so, and trying “not to be in that bubble of our own existence”, did read at least the first link of that previous Google search to feel appeased. It seems so … but we digress.

Why is this timing important? As we’ve said many times, Apple‘s iOS (mobile operating system) and audio are super sensitive to trying to eradicate “sounds on (webpage) load”, we take it, and want to only allow for audio easily via a “touch” event off a button (made by a human … and, we hope, all axolotls), that’s why. Get the timing wrong, and we weren’t, on mobile platforms, creating the buttons needed to touch in order to make the 87 different notes on our piano.

This work is accessible via the changed piano.htm‘s piano web application calling on the changed web_audio.htm (Web Audio API interfacer) in an iframe.


Previous relevant HTML5 Web Audio Piano Tutorial is shown below.

HTML5 Web Audio Piano Tutorial

HTML5 Web Audio Piano Tutorial

We find software integration interesting yet challenging, and the integration of …

… in these early days, before we give up on the mobile platform issue compromises we have so far, is no exception.

In broad brush terms we …

  • call from the changed piano.htm‘s piano web application the changed web_audio.htm (Web Audio API interfacer) in an iframe as per (the HTML) …

    <iframe class=ask title='versus Audio Web' frameborder=0 scrolling='no' style='overflow:hidden;background-color:orange;display:inline-block;width:500px;height:28px;max-height:28px;' width=500 height=28 src='web_audio.htm?vscaseyrule=y'></iframe>

    … and so in …
  • web_audio.htm (it) creates up above all else in the top left corner of its webpage, on detecting this call above …

    <script type='text/javascript'>
    if ((location.search.split('vscaseyrule=')[1] ? (' ' + decodeURIComponent(location.search.split('vscaseyrule=')[1]).split('&')[0]) : '') != '') { //navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    var hish='<div class=parent id=dchoose style="font-size:26px;position:absolute;top:0px;left:0px;z-index:2001;display:inline-block;background-color:transparent;"><input class=child placeholder="CaseyRule" title="versus Audio Web" style="position:absolute;top:0px;left:0px;z-index:2001;display:inline-block;background-color:transparent;" name=dlhuhb id=dlhuhb onchange="' + "actedupon=true; this.visibility='visible'; parent.document.getElementById('conduit').value=' '; parent.document.getElementById('cmdconduit').value=' '; document.getElementById('dchoose').innerHTML='Web Audio'; " + '" onclick="actedupon=true; parent.document.getElementById("' + "conduit" + '").value=String.fromCharCode(32); parent.document.getElementById("' + "cmdconduit" + '").value=String.fromCharCode(32); setTimeout(init,1500);" onblur="actedupon=true; parent.document.getElementById("' + "conduit" + '").value=String.fromCharCode(32); parent.document.getElementById("' + "cmdconduit" + '").value=String.fromCharCode(32); this.value=' + "'Web Audio';" + ' setTimeout(init,1800);" ontouchstart=" parent.document.getElementById("' + "conduit" + '").value=String.fromCharCode(32); parent.document.getElementById("' + "cmdconduit" + '").value=String.fromCharCode(32); setTimeout(init,500);" list="modes" name="modes"><datalist id="modes"><option value="CaseyRule"><option value="Audio Web"></datalist></div>';
    if (1 == 1 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    hish='<div class=parent id=dchoose style="font-size:26px;position:absolute;top:0px;left:0px;z-index:2001;display:inline-block;background-color:transparent;">CaseyRule versus <button style=display:inline-block;background-color:red; id=dlhuhb onmousedown="' + "actedupon=true; parent.document.getElementById('conduit').value=' '; parent.document.getElementById('cmdconduit').value=' '; this.innerHTML=''; setTimeout(init,500);" + '" ontouchstart="' + "actedupon=true; parent.document.getElementById('conduit').value=' '; parent.document.getElementById('cmdconduit').value=' '; setTimeout(init,200);" + '">Web Audio</button></div>';
    }
    document.write(hish);
    }
    </script>

    … a default piano “CaseyRule” mode of use piece of text, followed by a HTML button element “Web Audio” to switch to that … and back at …
  • piano.htm detects a “Web Audio” mode of use when that …

    if (document.getElementById('conduit').value != '') {
    document.getElementById('cmdconduit').value+="parent.document.getElementById('iaudio" + caboffrank + "').src='" + what + "'; ";
    document.getElementById('conduit').value+=what.replace('/','').replace('.','') + ' ';
    } else {
    document.getElementById('iaudio' + caboffrank).src=what;
    }

    … document.getElementById(‘conduit’).value is not ” because it is storing button press information for …
  • web_audio.htm to play the audio off that button press via …

    function pianonoteplay(bo) {
    var ioth='' + eval('' + bo.title);
    var prefix="";
    if (!nostop) { stopit(); } else { lastbo=null; }
    if (whichs == "") { whichs="" + ioth; }
    whichs="" + eval(ioffs[eval(-1 + eval('' + ioth))] + eval(ioth));
    if (sourcep_valid()) { //if (typeof sourcep !== 'undefined') {
    sourcep[eval(-1 + eval(whichs))]=true;
    } else {
    eval("source" + whichs + "p=true;");
    }
    var sendb=("(" + document.getElementById('startingin').value + "," + document.getElementById('startingat').value + ");").replace("(,)", "(0)").replace("(,", "(0,").replace(",)", ",0)");
    var suffix=("(" + document.getElementById('startingin').value + "," + document.getElementById('startingat').value + ")").replace("(,)", "").replace("(0,0)", "").replace("(0,)", "").replace("(,0)", "").replace("(,", ",").replace(",)", "").trim();
    if (source_valid()) { //if (typeof source !== 'undefined') {
    if (fors.replace('0','') != '' && fors.indexOf('-') == -1) {
    source[eval(-1 + eval(whichs))].start(eval('0' + document.getElementById('startingin').value), eval('0' + document.getElementById('startingat').value), eval('' + dura(document.getElementById('duration').value,lastbo).split(';')[0].split(':')[eval(-1 + dura(document.getElementById('duration').value,lastbo).split(';')[0].split(':').length)].split('.')[0].split(' ')[0]));
    } else if (document.getElementById('duration').value.replace('0','') != '') {
    source[eval(-1 + eval(whichs))].start(eval('0' + document.getElementById('startingin').value), eval('0' + document.getElementById('startingat').value), eval('' + dura(document.getElementById('duration').value,lastbo).split(';')[0].split(':')[eval(-1 + dura(document.getElementById('duration').value,lastbo).split(';')[0].split(':').length)].split('.')[0].split(' ')[0]));
    } else {
    source[eval(-1 + eval(whichs))].start(eval('0' + document.getElementById('startingin').value), eval('0' + document.getElementById('startingat').value));
    }
    } else {
    eval("source" + whichs + ".start" + dura(sendb,lastbo));
    }
    nostop=false;
    document.getElementById('startingat').value='';
    document.getElementById('startingin').value='';
    document.getElementById('loop1').checked=false;
    document.getElementById('loop2').checked=false;
    checknext();
    ioffs[eval(-1 + eval(ioth))]+=four;
    ioffset=ioffs[eval(-1 + eval(ioth))];
    if (sourcep_valid()) { //if (typeof sourcep !== 'undefined') {
    sourcep[eval(-1 + eval(ioffset + eval(ioth)))]=false;
    } else {
    eval("source" + eval(ioffset + eval(ioth)) + "p=false;");
    }
    if (source_valid()) { //if (typeof source !== 'undefined') {
    source[eval(-1 + eval(ioffset + eval(ioth)))] = context.createBufferSource();
    source[eval(-1 + eval(ioffset + eval(ioth)))].buffer = sb[eval(-1 + eval(ioth))];
    source[eval(-1 + eval(ioffset + eval(ioth)))].connect(context.destination);
    } else {
    eval("source" + eval(ioffset + eval(ioth)) + " = context.createBufferSource(); source" + eval(ioffset + eval(ioth)) + ".buffer = sb[" + eval(-1 + eval(ioth)) + "]; source" + eval(ioffset + eval(ioth)) + ".connect(context.destination); ");
    }
    }

… for starters.

Expecting a sound tonality difference between the methods? No, a computer creates the sound the same way via the same sound frequency, and if the response time is reasonable we couldn’t hear big rhythm changes that you might expect with the parent/child “chatter” required for all this.

Feel free to try your piano playing scales and arpeggios and chords with today’s more integrated live run link.


Previous relevant HTML5 Web Audio Mobile Tutorial is shown below.

HTML5 Web Audio Mobile Tutorial

HTML5 Web Audio Mobile Tutorial

There is another two pronged improvement approach again today building on HTML5 Web Audio Overlay Tutorial‘s two pronged approach to the previous two pronged approach … which makes for a great fork for spaghetti but we digress … the prongs today being …

  • first, and like yesterday, allow for clientside HTML to do what serverside PHP usually does for us … handle large amounts of data as PHP can do using its $_POST[] approach … we’re still calling “Overlay Iframe Remembering” … and add to …
    1. child iframe src= mode of use … but also with, new to today …
    2. child iframe srcdoc= mode of use

    … because (am not absolutely sure why as yet but) it solves the problem with …
    … non-mobile/Safari/fill in “Audio Content” form/including a Duration/click “Web Audio Run” button …
    … didn’t automatically start any audio, though other non-mobile web browsers do …
    … and as you may imagine this needs some delimitation explanations that show below

    function takealook(fo) {
    var noneed=true;
    var htmlis='';
    var nsuffix='';
    if (document.getElementById('url1').value.length > 500) { noneed=false; }
    if (document.getElementById('url2').value.length > 500) { noneed=false; }
    if (document.getElementById('url3').value.length > 500) { noneed=false; }
    if (document.getElementById('url4').value.length > 500) { noneed=false; }
    if (document.getElementById('durationget').value.length > 0) { nsuffix='&notoka=secret'; noneed=false; } else { isrc=' src='; }
    if (source_valid()) {
    if (noneed) { return true; }
    if (isrc == ' srcdoc=') {
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    document.getElementById('huhb').style.display='inline-block';
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    } else {
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    }
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='1.0'; }
    document.getElementById('myi').srcdoc='<!doctype html><html><head>' + document.head.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</head><body>' + document.body.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</body></html>';
    } else {
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='0.2'; }
    document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "'></iframe>";
    }
    } else {
    if (notoka.trim().toLowerCase() == 'secret') { noneed=false; }
    if (noneed) { return true; }
    if (isrc == ' srcdoc=') {
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    document.getElementById('huhb').style.display='inline-block';
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    } else {
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    }
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='1.0'; }
    document.getElementById('myi').srcdoc='<!doctype html><html><head>' + document.head.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</head><body>' + document.body.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</body></html>';
    } else {
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='0.2'; }
    document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'></iframe>";
    }
    }
    return false;
    }

    … adding another option to “Overlay Iframe Remembering” types of solutions, we figure … cute in the sense that all this is clientside HTML/Javascript/CSS

  • … as per these interim changes

  • mobile platform considerations (in our tests of iOS iPad and iPhone) …
    1. allowing for a button press “touch” event (“touchstart” for us, but read somewhere that they liked “touchend”) to trigger the AudioContext setup
    2. taking away the “capture” property of our browser buttons so that the mobile platform user can browse for an existant media file or capture that media
    3. we try to allow video media to be played in that video element should the user choose a video media file as their audio media choice which tends to be the way for the “capture” property of a mobile user input type=file browser button

    … as per these changes

Did you get from the code snippets how this “Overlay Iframe Remembering” works by storing the large amounts of data in an overlayed “layer” of webpage, both webpage layers “clientside” by nature and available datawise to each other in a parent/child (layer1WebpageParent/layer2OverlayedIframeWebpageChild) arrangement, that iframe being populated via a src= scenario getting the “overlay” to populate itself or help that “overlay” along (perhaps it’s that period after lunch digesting the caviar?!) by supplying its content via srcdoc= usage? Again, perhaps it is easier to see it in action at this live run link.


Previous relevant HTML5 Web Audio Overlay Tutorial is shown below.

HTML5 Web Audio Overlay Tutorial

HTML5 Web Audio Overlay Tutorial

Again, in building on yesterday’s HTML5 Web Audio Duration Tutorial two pronged approach, we have another one today, those approaches involving …

  • first allow for clientside HTML to do what serverside PHP usually does for us … handle large amounts of data as PHP can do using its $_POST[] approach … we’re going to call “Overlay Iframe Remembering” … whereby the
    1. navigational form gets a new id=waform onsubmit=’return takealook(this);’

      function takealook(fo) {
      var noneed=true;
      var nsuffix='';
      if (document.getElementById('url1').value.length > 500) { noneed=false; }
      if (document.getElementById('url2').value.length > 500) { noneed=false; }
      if (document.getElementById('url3').value.length > 500) { noneed=false; }
      if (document.getElementById('url4').value.length > 500) { noneed=false; }
      if (document.getElementById('durationget').value.length > 0) { nsuffix='&notoka=secret'; noneed=false; }
      if (source_valid()) {
      if (noneed) { return true; }
      document.getElementById('divbody').style.opacity='0.2';
      document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + document.URL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "'></iframe>";
      } else {
      if (notoka.trim().toLowerCase() == 'secret') { noneed=false; }
      if (noneed) { return true; }
      document.getElementById('divbody').style.opacity='0.2';
      document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + document.URL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'></iframe>";
      }
      return false;
      }

      … where if noneed ends up as false we perform some overlay favourites … building on …
    2. textbox HTML design changes from …

      <input style='display:inline-block;background-color:#f0f0f0;' type=text name=url2 title='Audio URL 2' value='./one_to_fiftynine.m4a'></input>

      … to …

      <input data-id=url2 onblur="document.getElementById(this.getAttribute('data-id')).value=this.value;" style='display:inline-block;background-color:#f0f0f0;' type=text name=url2 title='Audio URL 2' value='./one_to_fiftynine.m4a'></input>
      <div id=dform style='display:none;'></div>
      <div id=diframe></div>

      … that makes the document.body onload logic below be useful for the context of that onsubmit form logic above …

    3. document.getElementById('dform').innerHTML=document.getElementById('waform').innerHTML.replace(/\ data\-id=/g, ' id=').replace(/\ onblur=/g, ' data-onblur=');

    … as per these interim changes … then in the context of those large amounts of data possibly coming from …

  • like with the recent Video via Canvas File API Tutorial

    … we see for web applications, two primary source “partitions”, those being …

    • around the “net” (in the server wooooooorrrrrlllllld, in the public areas of the Internet, which are not in “the dark web”, that is) via an absolute URL (to the same domain or beyond) and/or relative URL (in relation to the URL “home” place on the web server of the same domain as where you launched it … which we catered for yesterday, though quietly we’d have allowed absolute URLs too, it’s just that cross-domain restrictions make us shy about publicizing that) … versus …
    • on the client computer (or device)

    … and, yes, for all those who guessed we’d try to cater for image and/or video data coming from this client source, you are correct …

    … media file browsing, via the wonderful File API, additional functionality as per these changes to web_audio.htm

Did you get from the code snippets how this “Overlay Iframe Remembering” works by storing the large amounts of data in an overlayed “layer” of webpage, both webpage layers “clientside” by nature and available datawise to each other in a parent/child (layer1WebpageParent/layer2OverlayedIframeWebpageChild) arrangement? Perhaps it is easier to see it in action at this live run link.


Previous relevant HTML5 Web Audio Duration Tutorial is shown below.

HTML5 Web Audio Duration Tutorial

HTML5 Web Audio Duration Tutorial

In building on yesterday’s HTML5 Web Audio Primer Tutorial we adopted a two pronged approach, that being …

  • first allow for the reduction of use of Javascript eval involving statements that assign values (ie. eval statement contains an “=” sign) (but will continue on with it helping out with some mathematics) … in favour of using arrays instead …

    var source=[];
    var sourcep=[];
    var notoka=location.search.split('notoka=')[1] ? (" " + decodeURIComponent(location.search.split('notoka=')[1]).split('&')[0]) : "";
    if (notoka == "") {
    for (var iii=1; iii<=4; iii++) {
    source.push(null);
    sourcep.push(false);
    }
    }

    for (var ii=5; ii<500; ii++) {
    if (source_valid()) { //if (typeof source !== 'undefined') {
    source.push(null);
    if (sourcep_valid()) { //if (typeof sourcep !== 'undefined') {
    sourcep.push(false);
    }
    } else {
    eval("var source" + ii + " = null;"); //context.createBufferSource();
    }
    }

    function source_valid() {
    if (typeof source !== 'undefined') {
    if (source.length >= 4) { return true; }
    }
    return false;
    }

    function sourcep_valid() {
    if (typeof sourcep !== 'undefined') {
    if (sourcep.length >= 4) { return true; }
    }
    return false;
    }

    … as per these interim changes … then go on to …
  • other changes as per …
    1. add duration as a very useful third parameter …

      Seconds … optionally follow by ; sets of ButtonNumber1to4:StartingAt=[0]:StartingIn=[0]:Loop=[false]:Duration=[0]

      … to Web Audio class “start” method … the use of which is the final piece in a puzzle that allows us to …

    2. schedule an execution run of button presses to play Audio ahead of time … because with a duration we can piggy back the audios (so be able to synchronize our efforts better) … and we also …
    3. open the Audio content up to the “server” woooorrrrlllld (via the “reveal” friendly HTML details/summary element combination) by allowing the user to specify their own 4 audio URLs (and one synchronized video one) along with 4 button labels presented in an HTML form method=GET to renavigate with this user supplied content back to the body onload scenario

    … to arrive at this finally changed web_audio.html

… that we welcome you to try at this live run link.


Previous relevant HTML5 Web Audio Primer Tutorial is shown below.

HTML5 Web Audio Primer Tutorial

HTML5 Web Audio Primer Tutorial

As an audio/video synchronization alternative to the techniques used in Mac OS X Text to English Speech Primer Tutorial, today, we involve the great Web Audio API functionality introduced with HTML5 and “starring” in HTML5 Rocks’s Getting Started with Web Audio API great advice on this subject.

We start down this long road, we suspect, being able to …

  • set up the audio playing of four separate audio sources (some featuring in Spliced Audio Number Genericization Tutorial) … where …
  • one, with its default configuration, synchronizes with an apt video media play
  • allow looping
  • allow for “start at” seconds
  • allow for “start in” seconds

… on a first draft HTML and Javascript and CSS web_audio.html live run link.

We hope you hang around on our road trip with this topic.


Previous relevant Spliced Audio Number Genericization Tutorial is shown below.

Spliced Audio Number Genericization Tutorial

Spliced Audio Number Genericization Tutorial

If you’ve completed a successful “proof of concept” stage to a project, it can be tempting at this early stage, even before applying it to the specific intended software integration target, to consider ways to “genericize” that application, and so it is for us, here, with yesterday’s Spliced Audio Number Announcements Tutorial, as shown below, that we feel this could come along to be applied for other purposes. We have no doubt the exercise of doing this serves at least three good purposes …

  1. slow it down a bit before rushing to “software integrate”, as patience can be good here
  2. learn more about what’s possible, and what isn’t, to do with the scope of your planning and thinking
  3. other application may, too, benefit from this “early days” “genericization” of a potential plugin component piece of HTML and Javascript code

In this early stage of “genericization” thoughts, we think that with our project we want to keep intact these ideas …

  • there’ll be up to 3 “columns” of ideas to piece together an audio message from its constituent parts, like with those Sydney train platform announcements we’ve talked about before
  • there’ll be 3 soundfiles mapped to most of the usage regarding these 3 “columns”
  • there’ll be the possibility for silence to be an option in each “column”
  • there’ll be the mechanism by which the user can define their own “Title” and “Subtitle” and 3 “column” headings themselves
  • there’ll be 2 leftmost “columns” that define counting numbers whose ranges can be defined by the user, where, for now, the timing of sounds goes that sounds start at [number].4 seconds and plays for 1.5 seconds
  • there’ll be minimum and maximum special case entries available for user definition in the leftmost “column” that calls on the fourth soundfile, where, for now, the timing of sounds goes that sounds start at 0 seconds and 2 seconds respectively and plays for 2 seconds
  • there’ll be a minimum special case entry available for user definition in the middle “column” that calls on a sound from the third soundfile, where, for now, the timing of sounds goes that sounds start at 3.1 seconds and plays for 1.8 seconds
  • there’ll be 1 rightmost “column” that can have three entries defined

And that is as far as we go with “genericizations”, at this stage, with our project.

In our experience, what Javascript function is a big friend of “genericization”? We’d say Javascript eval function is our favourite here.

It’s funny to think that our HTML and Javascript and CSS audio_1_59.htm, vastly changed from yesterday as per this link, functions exactly the same in its default form, and you can continue to enjoy its accompanying default live run link, but it can, through the use of complex URLs (only, just at this early stage) be made to look quite different, with the same code, as you can see with this complex live run.

So, in summary, this leaves us with many more “live run” options, those being …


Previous relevant Spliced Audio Number Announcements Tutorial is shown below.

Spliced Audio Number Announcements Tutorial

Spliced Audio Number Announcements Tutorial

We’ve got a “proof of concept” tutorial for you today, because we’ve got an idea for something, as we said some time back at Splicing Audio Primer Tutorial

The first was a simulation of those Sydney train public announcements where the timbre of the voice differs a bit between when they say “Platform” and the “6″ (or whatever platform it is) that follows. This is pretty obviously computer audio “bits” strung together … and wanted to get somewhere towards that capability.

… that will probably be blimmin’ obvious to you should you be a regular recent reader at this blog.

Do you remember what we, here, see as a characteristic of “proof of concept” at WordPress Is Mentioned By Navigation Primer Tutorial

To us, a “proof of concept” is not much use if it is as involved as what it is trying to prove

… and do you remember how we observed at Windows 10 Cortana Primer Tutorial

… because you can work Cortana without the voice recognition part, if you like, or if you have the urge to run for the nearest cupboard before being caught talking into a computer (microphone)

? Well, today, we’d like you to be patient about the lack of audio quality with our home made audio (see excuse 2 above) bit we are mainly interested in “proof of concept” issues (see excuse 1 above).

So what “ingredients” went into this “Audio Numbers” web application? As we did in Apple iOS Siri Audio Commentary Tutorial

HTML audio elements that allow for an audio commentary of the 9 “subimages” … the content for which is derived on a Mac OS X by QuickTime Player‘s Audio Recording functionality, which we last talked about at this blog with QuickTime Player Video Flickr Share Primer Tutorial

… we do again today. On doing this we realized the recordings were not loud enough, so started down the road of R&D on this and got to the very useful Increase Audio Volume website tool that helped a little, and this manifests itself if/when you run our live run today, that if you pick “minute” numbers less than or equal to “30″ they are a better better in volume than others, with the “Trial Version” of this software helping you out with “half file” enhancements. “Proof of concept”, remember? And so the aspects you’d change for your own purposes, are …

  1. the content (and more than likely, names) of audio files mentioned below …
  2. arrays of audio files …

    var audiomedia=["one_to_fiftynine.m4a","past_quarterto.m4a","am_pm.m4a"];
    var midmedia=["midnight_midday.m4a"];

    … and it should be noted here, that a separate file for each unique sound, could be a good alternative design, and would stop failures to do with the slow loading speed of the home web server causing audio misfiring … and would mean, below, that “astart” is always “0″ and “delay” should be set to the audio object’s duration parameter
  3. variables “astart” and “delay” as per example …

    } else if (thingis.toLowerCase().indexOf('clock') != -1) {
    oaudio.src=audiomedia[i];
    astart=eval("3.1");
    delay=1.8;


    … where “astart” reflects a start of play value and “delay” represents a length of play scenario in seconds, as we got going in the past when we presented Spliced Audio/Video Overlay Position Tutorial as shown below, where you can read more about the HTML5 Audio objects we used with this “proof of concept” project

Please note with the recording of “one_to_fiftynine.m4a”, that records numbers from 1 to 59, via QuickTime Player, we relied on the recording timer, to time our number recording with a second of duration to make the HTML and Javascript coding a lot easier!

So, as you can see, this is “proof of concept” preparation, and of you want to try it yourself, perhaps you’d like to start with a skeleton of today’s HTML and Javascript audio_1_59.html as a starting point?!


Previous relevant Spliced Audio/Video Overlay Position Tutorial is shown below.

Spliced Audio/Video Overlay Position Tutorial

Spliced Audio/Video Overlay Position Tutorial

Today we’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 Spliced Audio/Video/Image Overlay Tutorial as shown below, here, and that can take any of the forms …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses
  • video
  • image … and background image for webpage

… for either of the modes of use, that being …

  • discrete … or “Optional”
  • synchronized … or “Overlay”

… all like yesterday, but this time we allow you to “seek” or position yourself within the audio and/or video media. We still all “fit” 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 “just clientside” or “just client looking, plus, perhaps, Javascript serverside code” (ala Node.js) or perhaps “Javascript clientside client code, plus Ajax methodologies”. In any case, it does simplify design to not have to involve a serverside language like PHP … but please don’t think we do not encourage you to learn a serverside language like PHP.

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 autoplay property for a media object is frowned upon regarding these mobile devices … for reasons of “runaway” unknown charge issues as you can read at this useful link … thanks … and where they quote from Apple …

“Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.

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.” – Apple documentation.

A link we’d like to thank regarding the new “seek” or media positioning functionality is this one … thanks.

Also, today, for that sense of symmetry, we start to create the Audio objects from now on using …


document.createElement("AUDIO");

… as this acts the same as new Audio() to the best of our testing.

For your own testing purposes, if you know of some media URLs to try, please feel free to try the “overlay” of media ideas inherent in today’s splice_audio.htm live run. For today’s cake “prepared before the program” we’ve again channelled the GoToMeeting Primer Tutorial which had separate audio (albeit very short … sorry … but you get the gist) and video … 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 …

We think, though, that we will be back regarding this interesting topic, and hope we can improve mobile device functionality.


Previous relevant Spliced Audio/Video/Image Overlay Tutorial is shown below.

Spliced Audio/Video/Image Overlay Tutorial

Spliced Audio/Video/Image Overlay Tutorial

Today we’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 that can take any of the forms …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses
  • video
  • image … and background image for webpage

… for either of the modes of use, that being …

  • discrete … or “Optional”
  • synchronized … or “Overlay”

The major new change here, apart from the ability to play two media files at once in our synchronized (or “overlayed”) way, is the additional functionality for Video, and we proceeded thinking there’d be an Javascript DOM OOPy method like … var xv = new Video(); … to allow for this, but found out from this useful link … thanks … that an alternative approach for Video object creation, on the fly, is …


var xv = document.createElement("VIDEO");

… curiously. And it took us a while to tweak to the idea that to have a “display home” for the video on the webpage we needed to …


document.body.appendChild(xv);

… which means you need to take care of any HTML form data already filled in, that isn’t that form’s default, when you effectively “refresh” the webpage like this. Essentially though, media on the fly is a modern approach possible fairly easily with just clientside code. Cute, huh?!

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 synchronization of media themed blog postings of the past, which you may want to read more, for this type of approach.

In the meantime, if you know of some media URLs to try, please feel free to try the “overlay” of media ideas inherent in today’s splice_audio.htm live run. We’ve thought of this one. Do you remember how the GoToMeeting Primer Tutorial had separate audio (albeit very short … sorry … but you get the gist) and video … 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 …

We think, though, that we will be back regarding this interesting topic.


Previous relevant Splicing Audio Primer Tutorial is shown below.

Spliced Audio Primer Tutorial

Splicing Audio Primer Tutorial

Today we’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 …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses

Do you remember, perhaps, when we did a series of blog posts regarding the YouTube API, that finished, so far, with YouTube API Iframe Synchronicity Resizing Tutorial? Well, a lot of what we do today is doing similar sorts of functionalities but just for Audio objects in HTML5. For help on this we’d like to thank this great link. So rather than have HTML audio elements in our HTML, as we first shaped to do, we’ve taken the great advice from this link, and gone all Javascript DOM OOPy on the task, to splice audio media together.

There were three thought patterns going on here for me.

  • The first was a simulation of those Sydney train public announcements where the timbre of the voice differs a bit between when they say “Platform” and the “6″ (or whatever platform it is) that follows. This is pretty obviously computer audio “bits” strung together … and wanted to get somewhere towards that capability.
  • The second one relates to presentation ideas following up on that “onmouseover” Siri audio enhanced presentation we did at Apple iOS Siri Audio Commentary Tutorial. Well, we think we can do something related to that here, and we’ve prepared this cake audio presentation here, for us, in advance … really, there’s no need for thanks.
  • The third concerns our eternal media file synchronization quests here at this blog that you may find of interest we hope, here.

Also of interest over time has been the Google Translate Text to Speech functionality that used to be very open, and we now only use around here in an interactive “user clicks” way … but we still use it, because it is very useful, so, thanks. But trying to get this method working for “Platform” and “6″ without a yawning gap in between ruins the spontaneity and fun somehow, but there’s nothing stopping you making your own audio files yourself as we did in that Siri tutorial called Apple iOS Siri Audio Commentary Tutorial and take the HTML and Javascript code you could call splice_audio.html from today, and go and make your own web application? Now, is there? Huh?

Try a live run or perhaps some more Siri cakes?!

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in Event-Driven Programming, Tutorials, eLearning | Tagged , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Webcam Mobile Deprecation Revisit Tutorial

Webcam Mobile Deprecation Revisit Tutorial

Webcam Mobile Deprecation Revisit Tutorial

When it comes to topics like media, and worldwide decisions regarding online standards and practices, it stands to reason that “things might change” regarding code you write for web applications, trying to work over a variety of web browsers and platforms. In this regard, an oft times forlorn word for programmers is (software) “deprecation”

While a deprecated software feature remains in the software, its use may raise warning messages recommending alternative practices; deprecated status may also indicate the feature will be removed in the future. Features are deprecated rather than immediately removed, to provide backward compatibility, and to give programmers time to bring affected code into compliance with the new standard.

… in the sense that you write something that satisfies, working at the time, but that false sense of “deprecation smugness” may come back to bite months or years later. Today, it was our turn to “revisit webcams” from the days of Webcam Mobile Tutorial with this changed webcamtest.htm live run link.

In a lot of platforms window.URL.createObjectURL(stream) is now deprecated (fully … ie. is no more) … and so (following the lead of the great webpage, thanks) …


function handleVideo(stream) {
try {
video.srcObject = stream;
video.play(); // new today
} catch (error) {
video.src = window.URL.createObjectURL(stream);
video.play(); // new today
}
}

… start thinking “HTMLMediaElement.srcObject” from here on.

The video initial setting of autoplay (in the HTML design) is not as good as to follow the lead of this excellent link, thanks, and so


video.setAttribute('autoplay', ''); // new today soon after onload
video.setAttribute('muted', ''); // new today soon after onload
video.setAttribute('playsinline', ''); // new today soon after onload
// ... then ... later ... as above ...
video.play(); // new today

We also found HTML5Rocks really helpful, as usual, thanks again.

You can also see this play out at WordPress 4.1.1′s Webcam Mobile Deprecation Revisit Tutorial.


Previous relevant Webcam Mobile Tutorial is shown below.

Webcam Mobile Tutorial

Webcam Mobile Tutorial

Am hoping most of you laptop and desktop computer users were able to see a webcam working with our web application we left off last with Webcam Photobooth Tutorial as shown below, and that’s great if that is the case, but the fact is that lots of platforms, predominantly mobile ones, it would appear do not support a Javascript call like …


navigator.getUserMedia({video: true, audio: true}, handleVideo, videoError);

… alas and alack! However, for all you long suffering (mainly mobile device) blog readers … thanks for reading … for what we taketh away, let us now putteth innereth a bitteth today. The webcam is a “streaming” video, but the next best thing we can do short of “streaming” is to loop an existing video, wouldn’t you say? Even there, though, platforms like Safari on iOS (ie. on an iPad or iPhone) still want that user clicking intervention to start any video … remember our last discussion regarding this Apple bandwidth concern when we presented Piano Playing Web Application Mobile Tutorial … and we cater for that with a four second chance for these Safari iOS users to “click away”.

On a mobile platform what form could the “webcam” (as a camera device) take? We think it can be worked, like with mobile iOS apps like Photobooth, the “webcam” can take the form of the mobile device camera, and we touched on that when we used the HTML(5) input capture syntax when we presented Audio/Video HTML5 Form Input Capture via PHP Download Tutorial, as food for thought in this area, should you be curious?!

By the way, before we forget, today’s thanks go to a regular here at this blog, the incredible html5rocks.com website, a great HTML5 and more other web ideas resource … so … thanks.

We “loop” the (webcam) video via Javascript DOM code like …


if (navigator.getUserMedia) {
navigator.getUserMedia({video: true, audio: true}, handleVideo, videoError);
} else {

video.type = "video/mp4";
video.loop = true;
video.autoplay = true;
video.controls = true;
video.src = 'webcamtest.m4v';
video.style.visibility = 'visible';
document.getElementById('errmsg').innerHTML = "So sad, cannot work the 'navigator.getUserMedia({video: true, audio: true}, handleVideo, videoError)' Javascript call we require. But you can see the blog posting's video on a loop (well, it worked in <a onclick=putOnSpeed(); style=text-decoration:underline;cursor:pointer;>Speed</a>) that for best viewing should be <a style=text-decoration:underline;cursor:pointer; onclick=document.getElementById('autoflip').click();>flipped</a>.";
document.getElementById('sosad').innerHTML = " (would have been nice ... but ...)";

setTimeout(andno,4000);
}

function andno() {
video.style.visibility = 'hidden';
}

A big curiosity for our tiny scrambled brain is that, if you are one of these “previously deprived” (but now sooooooo well looked after … crumpets, Jeeves?!) and have seen what happens with that looping local video (that same one from this blog posting thread’s “Primer” tutorial), is that it is one of those “flipped” scenarios, so we suggest one of …

  • viewing this blog posting in your vehicle’s side mirror … but please, not while driving … or …
  • stand on your head, rotate 180 degrees and do the “flop” while viewing this blog posting’s web application (“you can call this technique ‘flop and click’”) … of course … off you go … or …
  • use the Auto Flip New Items checkbox we put in at that last Webcam Photobooth Tutorial to do the job

… to unscramble, and “stay calm”.

And so that brings us to the opportunity for a live run link that now involves the HTML and Javascript of webcamtest.html that changed in this way regarding this “what do we do if there is an error” commonplace coding scenario, especially regarding cross-platform and cross-browser considerations, with our webcam/video/canvas web application.

Maybe at the live run link above the “putteth innereth a bitteth” bit was apparent to you, but for you other readers (and other bewildered users?!), visit this link to see what we mean.


Previous relevant Webcam Photobooth Tutorial is shown below.

Webcam Photobooth Tutorial

Webcam Photobooth Tutorial

The webcam of a computer device can be like a video selfie except that when filming something it can be flipped horizontally, like when dealing with mirrors, on occasions, especially after a heavy night! And that’s where the Mac OS X (and iOS) Photobooth desktop (or mobile “desktop”) application comes to our thinking. It has a very useful option Edit > Auto Flip New Items, a simulation of functionality we’d like to add onto the web application of our previous Webcam Primer Tutorial as shown below. The thought of doing all this to the implicit video of the Webcam sounds daunting, but the clue to this being easier than expected came from the “bowels” of that previous tutorial, basing itself on the help of a few excellent links you can link into below too, and its use of an HTML(5) canvas element to be an intermediary between the webcam (video) and your dear little selves. And it is on this canvas (sounds apt to say “palette” today) that there are tremendous HTML5 “goodies” functionality-wise to call on to be able to …

… and so, effectively (horizontally) “flip” (or also today’s “we didn’t know” flop (meaning vertically flip)) the canvas right there in the middle of the action, doing twirls and triple pikes just for you gals and guys … awwwww, shucks! This ability of our Webcam application was precisely what was missing as we lamented in yesterday’s Windows Memory Stick Research Primer Tutorial

The YouTube’s genesis was from the Mac OS X desktop application PhotoBooth, mainly done this way because of its excellent Edit -> Auto Flip New Items option, otherwise we’d have used our recent Webcam web application.

We’d like to thank this webpage for a great Javascript function to manipulate our HTML(5) canvas element this way.

This opens our web application up to allowing you to use a Webcam to show a “filmed” thing in an unmirrored context, and so, if you, as we did today with our YouTube video …

record this from afar, as we did with an iPad Camera app’s Video mode, it will appear the correct way around, as the Photobooth application can also do, and was the genesis of our inspiration to do today.

We’ll leave you the HTML and Javascript code we’ve got those three four links above to thank for, mainly. The code can be downloaded and/or perused via the webcamtest.html (https:) source code link, that changed for today’s purposes in this way. To try it out for yourself, if your computer device suits, try this live run link.


Previous relevant Webcam Primer Tutorial is shown below.

Webcam Primer Tutorial

Webcam Primer Tutorial

The webcam of a computer device can be a very useful piece of hardware. We’ve written an “entry level” web application using your device’s webcam, should it have one, and should you give permission for the web application to access it, and if the web browser and platform combination you use suits some or all of the functionality offered in this first draft. We would like to thank three great online resources for the code stitched together for this first draft web application, those being …

  1. www.kirupa.com link taught us about the getUserMedia method of the navigator object …
  2. software.intel.com link helped us with code and event logic allowing for a 33mS refresh of the webcam’s underlying video to an HTML(5) canvas element, along with a greyscale manipulation of that canvas element’s “snapshot in time” contents
  3. developer.mozilla.org link helped us with some other image within canvas pixel level functionalities such as colour reversal, and zooming in ((like a magnifier) as you see often on eCommerce product pages) and an individual canvas pixel rgba(r,g,b,opacity) report

None of this functionality calls on anything else but HTML(5) and Javascript “smarts”, and is eye opening in that way, no doubt.

And so today’s first draft is mainly about the webcam (hardware) “capture” capabilities, its “conduit” to the outside world … that being you user gals and guys … say hello … is that curious and exciting notion that you capture the webcam video streaming “snapshot” fast enough into a canvas element, it looks like you are just dealing with a “magical” canvas, though the (usually green) webcam light on your device (and the web browser tab (usually red) light, and any other web browser webcam icons shown) should be the giveaway that a webcam underpins the goings on.

There are cross-platform and cross-browser issues with webcams, that is for sure. Maybe you’ve gone and clicked the live run equivalent of clicking the tutorial’s picture, already, above, and noticed a slightly different pattern of arrangement to our usual. We direct you to an https: URL, because the Google Chrome web browser asks for this type of URL to go with allowing permission to access the device’s webcam.

And so that leaves us to show you the HTML and Javascript code we’ve got those three links above to thank for, mainly. The code can be downloaded and/or perused via the webcamtest.html (https:) source code link. We also direct you to a video we made for you to visualize all this, below …

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in Event-Driven Programming, Tutorials, eLearning | Tagged , , , , , , , , , , , , , , | Leave a comment

HTML5 Web Audio Piano Mobile Safari Web Inspector Debug Tutorial

HTML5 Web Audio Piano Mobile Safari Web Inspector Debug Tutorial

HTML5 Web Audio Piano Mobile Safari Web Inspector Debug Tutorial

There were problems peculiar to mobile platforms involved in the work of yesterday’s HTML5 Web Audio Piano Mobile Tutorial. But just how did we arrive at a solution? We can tell you now a placement of Javascript “alert” popup windows is inadequate for such an involved issue that cannot be simulated on our usual MacBook Pro laptop “home base” computer. So what to do?

There’s a big clue in the difference reports of yesterday …

Did you notice the use of … anyone, anyone? … yes, Augusta Ada Kingconsole.log([message]) calls all over the place. Could it be that “alert” calls would be too disruptive? That’s right. Do you remember, perhaps, in science at school, how we learnt that looking at a photon was difficult because we would be interfering in how that photon would be in nature, and so we can not conclude anything categorically because of our interference. Well, “timing issues” are a bit the same, but console.log([message]) calls will not interfere and yet pass on information to … anyone, anyone? … yes, Grace Brewster Murray Hopper … a web inspector. Like Safari’s we think, given we’re working with …

  • an iPhone to test on
  • a MacBook Pro to facilitate the testing … connected via …
  • (the ubiquitous Apple white) lead … hardware wise … and …
  • the Safari web browser (on both devices, running our “piano web application” on the iPhone Safari web browser) … software wise … and within that browser’s …
  • Developer menu can get us to (the iPhone incarnation of the) Web Inspector … within which the …
  • Console tab can show us errors and warnings and information (which we can augment ourselves via our console.log([message]) Javascript DOM calls in the HTML/Javascript/CSS code of our “piano web application” and its “web audio interfacing” friend)

… but if you’ve not done this in the past, there is a fair bit to do to get up and running doing this. In setting this up, we were stuck for a while with connections but blank console tab screens. Why? Well, you need both iPhone and MacBook Pro to have any outstanding operating system updates attended to. Then, given that, we’d recommend following the excellent advice of How to Activate the iPhone Debug Console, thanks …

On the iPhone (setting up wise) …

  1. Tap the Settings icon on the iPhone Home screen.
  2. Scroll down until you reach Safari and tap on it to open the screen that contains everything related to the Safari web browser on your iPhone, iPad, or iPod touch.
  3. Scroll to the bottom of the screen and tap Advanced menu.
  4. Toggle the slider next to Web Inspector to the On position.

On the MacBook Pro (setting up wise) …

  1. Click Safari in the menu bar and choose Preferences.
  2. Click the Advanced tab
  3. Select the box next to Show Develop menu in menu bar.
  4. Exit the settings window.
  5. Click Develop in the Safari menu bar and select Show Web Inspector.

… and we’ve got for you some screenshots of our “goings on” sorting out our “piano web application” problems on mobile (at least iOS) platforms with today’s PDF “stream of consciousness” presentation regarding this piano play web application. We hope it helps you out, or gets you down the road of digging into an issue you have with an HTML web application on an iOS device.

You can also see this play out at WordPress 4.1.1′s HTML5 Web Audio Piano Mobile Safari Web Inspector Debug Tutorial.


Previous relevant HTML5 Web Audio Piano Mobile Tutorial is shown below.

HTML5 Web Audio Piano Mobile Tutorial

HTML5 Web Audio Piano Mobile Tutorial

You guessed it! The software integrations of yesterday’s HTML5 Web Audio Piano Tutorial had issues with the mobile platforms. Do fish swim? Do axolotl have two L’s and two O’s? Yes, yes and yes.

With our iPad and iPhone testing (and we’ll go more into that tomorrow) we found timing issues as to when exactly to call that window onload init function. Which beggars the question, being that window and document are two different objects of a webpage “is window onload the same as document body onload?” We’d always assumed so, and trying “not to be in that bubble of our own existence”, did read at least the first link of that previous Google search to feel appeased. It seems so … but we digress.

Why is this timing important? As we’ve said many times, Apple‘s iOS (mobile operating system) and audio are super sensitive to trying to eradicate “sounds on (webpage) load”, we take it, and want to only allow for audio easily via a “touch” event off a button (made by a human … and, we hope, all axolotls), that’s why. Get the timing wrong, and we weren’t, on mobile platforms, creating the buttons needed to touch in order to make the 87 different notes on our piano.

This work is accessible via the changed piano.htm‘s piano web application calling on the changed web_audio.htm (Web Audio API interfacer) in an iframe.


Previous relevant HTML5 Web Audio Piano Tutorial is shown below.

HTML5 Web Audio Piano Tutorial

HTML5 Web Audio Piano Tutorial

We find software integration interesting yet challenging, and the integration of …

… in these early days, before we give up on the mobile platform issue compromises we have so far, is no exception.

In broad brush terms we …

  • call from the changed piano.htm‘s piano web application the changed web_audio.htm (Web Audio API interfacer) in an iframe as per (the HTML) …

    <iframe class=ask title='versus Audio Web' frameborder=0 scrolling='no' style='overflow:hidden;background-color:orange;display:inline-block;width:500px;height:28px;max-height:28px;' width=500 height=28 src='web_audio.htm?vscaseyrule=y'></iframe>

    … and so in …
  • web_audio.htm (it) creates up above all else in the top left corner of its webpage, on detecting this call above …

    <script type='text/javascript'>
    if ((location.search.split('vscaseyrule=')[1] ? (' ' + decodeURIComponent(location.search.split('vscaseyrule=')[1]).split('&')[0]) : '') != '') { //navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    var hish='<div class=parent id=dchoose style="font-size:26px;position:absolute;top:0px;left:0px;z-index:2001;display:inline-block;background-color:transparent;"><input class=child placeholder="CaseyRule" title="versus Audio Web" style="position:absolute;top:0px;left:0px;z-index:2001;display:inline-block;background-color:transparent;" name=dlhuhb id=dlhuhb onchange="' + "actedupon=true; this.visibility='visible'; parent.document.getElementById('conduit').value=' '; parent.document.getElementById('cmdconduit').value=' '; document.getElementById('dchoose').innerHTML='Web Audio'; " + '" onclick="actedupon=true; parent.document.getElementById("' + "conduit" + '").value=String.fromCharCode(32); parent.document.getElementById("' + "cmdconduit" + '").value=String.fromCharCode(32); setTimeout(init,1500);" onblur="actedupon=true; parent.document.getElementById("' + "conduit" + '").value=String.fromCharCode(32); parent.document.getElementById("' + "cmdconduit" + '").value=String.fromCharCode(32); this.value=' + "'Web Audio';" + ' setTimeout(init,1800);" ontouchstart=" parent.document.getElementById("' + "conduit" + '").value=String.fromCharCode(32); parent.document.getElementById("' + "cmdconduit" + '").value=String.fromCharCode(32); setTimeout(init,500);" list="modes" name="modes"><datalist id="modes"><option value="CaseyRule"><option value="Audio Web"></datalist></div>';
    if (1 == 1 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    hish='<div class=parent id=dchoose style="font-size:26px;position:absolute;top:0px;left:0px;z-index:2001;display:inline-block;background-color:transparent;">CaseyRule versus <button style=display:inline-block;background-color:red; id=dlhuhb onmousedown="' + "actedupon=true; parent.document.getElementById('conduit').value=' '; parent.document.getElementById('cmdconduit').value=' '; this.innerHTML=''; setTimeout(init,500);" + '" ontouchstart="' + "actedupon=true; parent.document.getElementById('conduit').value=' '; parent.document.getElementById('cmdconduit').value=' '; setTimeout(init,200);" + '">Web Audio</button></div>';
    }
    document.write(hish);
    }
    </script>

    … a default piano “CaseyRule” mode of use piece of text, followed by a HTML button element “Web Audio” to switch to that … and back at …
  • piano.htm detects a “Web Audio” mode of use when that …

    if (document.getElementById('conduit').value != '') {
    document.getElementById('cmdconduit').value+="parent.document.getElementById('iaudio" + caboffrank + "').src='" + what + "'; ";
    document.getElementById('conduit').value+=what.replace('/','').replace('.','') + ' ';
    } else {
    document.getElementById('iaudio' + caboffrank).src=what;
    }

    … document.getElementById(‘conduit’).value is not ” because it is storing button press information for …
  • web_audio.htm to play the audio off that button press via …

    function pianonoteplay(bo) {
    var ioth='' + eval('' + bo.title);
    var prefix="";
    if (!nostop) { stopit(); } else { lastbo=null; }
    if (whichs == "") { whichs="" + ioth; }
    whichs="" + eval(ioffs[eval(-1 + eval('' + ioth))] + eval(ioth));
    if (sourcep_valid()) { //if (typeof sourcep !== 'undefined') {
    sourcep[eval(-1 + eval(whichs))]=true;
    } else {
    eval("source" + whichs + "p=true;");
    }
    var sendb=("(" + document.getElementById('startingin').value + "," + document.getElementById('startingat').value + ");").replace("(,)", "(0)").replace("(,", "(0,").replace(",)", ",0)");
    var suffix=("(" + document.getElementById('startingin').value + "," + document.getElementById('startingat').value + ")").replace("(,)", "").replace("(0,0)", "").replace("(0,)", "").replace("(,0)", "").replace("(,", ",").replace(",)", "").trim();
    if (source_valid()) { //if (typeof source !== 'undefined') {
    if (fors.replace('0','') != '' && fors.indexOf('-') == -1) {
    source[eval(-1 + eval(whichs))].start(eval('0' + document.getElementById('startingin').value), eval('0' + document.getElementById('startingat').value), eval('' + dura(document.getElementById('duration').value,lastbo).split(';')[0].split(':')[eval(-1 + dura(document.getElementById('duration').value,lastbo).split(';')[0].split(':').length)].split('.')[0].split(' ')[0]));
    } else if (document.getElementById('duration').value.replace('0','') != '') {
    source[eval(-1 + eval(whichs))].start(eval('0' + document.getElementById('startingin').value), eval('0' + document.getElementById('startingat').value), eval('' + dura(document.getElementById('duration').value,lastbo).split(';')[0].split(':')[eval(-1 + dura(document.getElementById('duration').value,lastbo).split(';')[0].split(':').length)].split('.')[0].split(' ')[0]));
    } else {
    source[eval(-1 + eval(whichs))].start(eval('0' + document.getElementById('startingin').value), eval('0' + document.getElementById('startingat').value));
    }
    } else {
    eval("source" + whichs + ".start" + dura(sendb,lastbo));
    }
    nostop=false;
    document.getElementById('startingat').value='';
    document.getElementById('startingin').value='';
    document.getElementById('loop1').checked=false;
    document.getElementById('loop2').checked=false;
    checknext();
    ioffs[eval(-1 + eval(ioth))]+=four;
    ioffset=ioffs[eval(-1 + eval(ioth))];
    if (sourcep_valid()) { //if (typeof sourcep !== 'undefined') {
    sourcep[eval(-1 + eval(ioffset + eval(ioth)))]=false;
    } else {
    eval("source" + eval(ioffset + eval(ioth)) + "p=false;");
    }
    if (source_valid()) { //if (typeof source !== 'undefined') {
    source[eval(-1 + eval(ioffset + eval(ioth)))] = context.createBufferSource();
    source[eval(-1 + eval(ioffset + eval(ioth)))].buffer = sb[eval(-1 + eval(ioth))];
    source[eval(-1 + eval(ioffset + eval(ioth)))].connect(context.destination);
    } else {
    eval("source" + eval(ioffset + eval(ioth)) + " = context.createBufferSource(); source" + eval(ioffset + eval(ioth)) + ".buffer = sb[" + eval(-1 + eval(ioth)) + "]; source" + eval(ioffset + eval(ioth)) + ".connect(context.destination); ");
    }
    }

… for starters.

Expecting a sound tonality difference between the methods? No, a computer creates the sound the same way via the same sound frequency, and if the response time is reasonable we couldn’t hear big rhythm changes that you might expect with the parent/child “chatter” required for all this.

Feel free to try your piano playing scales and arpeggios and chords with today’s more integrated live run link.


Previous relevant HTML5 Web Audio Mobile Tutorial is shown below.

HTML5 Web Audio Mobile Tutorial

HTML5 Web Audio Mobile Tutorial

There is another two pronged improvement approach again today building on HTML5 Web Audio Overlay Tutorial‘s two pronged approach to the previous two pronged approach … which makes for a great fork for spaghetti but we digress … the prongs today being …

  • first, and like yesterday, allow for clientside HTML to do what serverside PHP usually does for us … handle large amounts of data as PHP can do using its $_POST[] approach … we’re still calling “Overlay Iframe Remembering” … and add to …
    1. child iframe src= mode of use … but also with, new to today …
    2. child iframe srcdoc= mode of use

    … because (am not absolutely sure why as yet but) it solves the problem with …
    … non-mobile/Safari/fill in “Audio Content” form/including a Duration/click “Web Audio Run” button …
    … didn’t automatically start any audio, though other non-mobile web browsers do …
    … and as you may imagine this needs some delimitation explanations that show below

    function takealook(fo) {
    var noneed=true;
    var htmlis='';
    var nsuffix='';
    if (document.getElementById('url1').value.length > 500) { noneed=false; }
    if (document.getElementById('url2').value.length > 500) { noneed=false; }
    if (document.getElementById('url3').value.length > 500) { noneed=false; }
    if (document.getElementById('url4').value.length > 500) { noneed=false; }
    if (document.getElementById('durationget').value.length > 0) { nsuffix='&notoka=secret'; noneed=false; } else { isrc=' src='; }
    if (source_valid()) {
    if (noneed) { return true; }
    if (isrc == ' srcdoc=') {
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    document.getElementById('huhb').style.display='inline-block';
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    } else {
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    }
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='1.0'; }
    document.getElementById('myi').srcdoc='<!doctype html><html><head>' + document.head.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</head><body>' + document.body.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</body></html>';
    } else {
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='0.2'; }
    document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "'></iframe>";
    }
    } else {
    if (notoka.trim().toLowerCase() == 'secret') { noneed=false; }
    if (noneed) { return true; }
    if (isrc == ' srcdoc=') {
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    document.getElementById('huhb').style.display='inline-block';
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    } else {
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    }
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='1.0'; }
    document.getElementById('myi').srcdoc='<!doctype html><html><head>' + document.head.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</head><body>' + document.body.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</body></html>';
    } else {
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='0.2'; }
    document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'></iframe>";
    }
    }
    return false;
    }

    … adding another option to “Overlay Iframe Remembering” types of solutions, we figure … cute in the sense that all this is clientside HTML/Javascript/CSS

  • … as per these interim changes

  • mobile platform considerations (in our tests of iOS iPad and iPhone) …
    1. allowing for a button press “touch” event (“touchstart” for us, but read somewhere that they liked “touchend”) to trigger the AudioContext setup
    2. taking away the “capture” property of our browser buttons so that the mobile platform user can browse for an existant media file or capture that media
    3. we try to allow video media to be played in that video element should the user choose a video media file as their audio media choice which tends to be the way for the “capture” property of a mobile user input type=file browser button

    … as per these changes

Did you get from the code snippets how this “Overlay Iframe Remembering” works by storing the large amounts of data in an overlayed “layer” of webpage, both webpage layers “clientside” by nature and available datawise to each other in a parent/child (layer1WebpageParent/layer2OverlayedIframeWebpageChild) arrangement, that iframe being populated via a src= scenario getting the “overlay” to populate itself or help that “overlay” along (perhaps it’s that period after lunch digesting the caviar?!) by supplying its content via srcdoc= usage? Again, perhaps it is easier to see it in action at this live run link.


Previous relevant HTML5 Web Audio Overlay Tutorial is shown below.

HTML5 Web Audio Overlay Tutorial

HTML5 Web Audio Overlay Tutorial

Again, in building on yesterday’s HTML5 Web Audio Duration Tutorial two pronged approach, we have another one today, those approaches involving …

  • first allow for clientside HTML to do what serverside PHP usually does for us … handle large amounts of data as PHP can do using its $_POST[] approach … we’re going to call “Overlay Iframe Remembering” … whereby the
    1. navigational form gets a new id=waform onsubmit=’return takealook(this);’

      function takealook(fo) {
      var noneed=true;
      var nsuffix='';
      if (document.getElementById('url1').value.length > 500) { noneed=false; }
      if (document.getElementById('url2').value.length > 500) { noneed=false; }
      if (document.getElementById('url3').value.length > 500) { noneed=false; }
      if (document.getElementById('url4').value.length > 500) { noneed=false; }
      if (document.getElementById('durationget').value.length > 0) { nsuffix='&notoka=secret'; noneed=false; }
      if (source_valid()) {
      if (noneed) { return true; }
      document.getElementById('divbody').style.opacity='0.2';
      document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + document.URL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "'></iframe>";
      } else {
      if (notoka.trim().toLowerCase() == 'secret') { noneed=false; }
      if (noneed) { return true; }
      document.getElementById('divbody').style.opacity='0.2';
      document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + document.URL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'></iframe>";
      }
      return false;
      }

      … where if noneed ends up as false we perform some overlay favourites … building on …
    2. textbox HTML design changes from …

      <input style='display:inline-block;background-color:#f0f0f0;' type=text name=url2 title='Audio URL 2' value='./one_to_fiftynine.m4a'></input>

      … to …

      <input data-id=url2 onblur="document.getElementById(this.getAttribute('data-id')).value=this.value;" style='display:inline-block;background-color:#f0f0f0;' type=text name=url2 title='Audio URL 2' value='./one_to_fiftynine.m4a'></input>
      <div id=dform style='display:none;'></div>
      <div id=diframe></div>

      … that makes the document.body onload logic below be useful for the context of that onsubmit form logic above …

    3. document.getElementById('dform').innerHTML=document.getElementById('waform').innerHTML.replace(/\ data\-id=/g, ' id=').replace(/\ onblur=/g, ' data-onblur=');

    … as per these interim changes … then in the context of those large amounts of data possibly coming from …

  • like with the recent Video via Canvas File API Tutorial

    … we see for web applications, two primary source “partitions”, those being …

    • around the “net” (in the server wooooooorrrrrlllllld, in the public areas of the Internet, which are not in “the dark web”, that is) via an absolute URL (to the same domain or beyond) and/or relative URL (in relation to the URL “home” place on the web server of the same domain as where you launched it … which we catered for yesterday, though quietly we’d have allowed absolute URLs too, it’s just that cross-domain restrictions make us shy about publicizing that) … versus …
    • on the client computer (or device)

    … and, yes, for all those who guessed we’d try to cater for image and/or video data coming from this client source, you are correct …

    … media file browsing, via the wonderful File API, additional functionality as per these changes to web_audio.htm

Did you get from the code snippets how this “Overlay Iframe Remembering” works by storing the large amounts of data in an overlayed “layer” of webpage, both webpage layers “clientside” by nature and available datawise to each other in a parent/child (layer1WebpageParent/layer2OverlayedIframeWebpageChild) arrangement? Perhaps it is easier to see it in action at this live run link.


Previous relevant HTML5 Web Audio Duration Tutorial is shown below.

HTML5 Web Audio Duration Tutorial

HTML5 Web Audio Duration Tutorial

In building on yesterday’s HTML5 Web Audio Primer Tutorial we adopted a two pronged approach, that being …

  • first allow for the reduction of use of Javascript eval involving statements that assign values (ie. eval statement contains an “=” sign) (but will continue on with it helping out with some mathematics) … in favour of using arrays instead …

    var source=[];
    var sourcep=[];
    var notoka=location.search.split('notoka=')[1] ? (" " + decodeURIComponent(location.search.split('notoka=')[1]).split('&')[0]) : "";
    if (notoka == "") {
    for (var iii=1; iii<=4; iii++) {
    source.push(null);
    sourcep.push(false);
    }
    }

    for (var ii=5; ii<500; ii++) {
    if (source_valid()) { //if (typeof source !== 'undefined') {
    source.push(null);
    if (sourcep_valid()) { //if (typeof sourcep !== 'undefined') {
    sourcep.push(false);
    }
    } else {
    eval("var source" + ii + " = null;"); //context.createBufferSource();
    }
    }

    function source_valid() {
    if (typeof source !== 'undefined') {
    if (source.length >= 4) { return true; }
    }
    return false;
    }

    function sourcep_valid() {
    if (typeof sourcep !== 'undefined') {
    if (sourcep.length >= 4) { return true; }
    }
    return false;
    }

    … as per these interim changes … then go on to …
  • other changes as per …
    1. add duration as a very useful third parameter …

      Seconds … optionally follow by ; sets of ButtonNumber1to4:StartingAt=[0]:StartingIn=[0]:Loop=[false]:Duration=[0]

      … to Web Audio class “start” method … the use of which is the final piece in a puzzle that allows us to …

    2. schedule an execution run of button presses to play Audio ahead of time … because with a duration we can piggy back the audios (so be able to synchronize our efforts better) … and we also …
    3. open the Audio content up to the “server” woooorrrrlllld (via the “reveal” friendly HTML details/summary element combination) by allowing the user to specify their own 4 audio URLs (and one synchronized video one) along with 4 button labels presented in an HTML form method=GET to renavigate with this user supplied content back to the body onload scenario

    … to arrive at this finally changed web_audio.html

… that we welcome you to try at this live run link.


Previous relevant HTML5 Web Audio Primer Tutorial is shown below.

HTML5 Web Audio Primer Tutorial

HTML5 Web Audio Primer Tutorial

As an audio/video synchronization alternative to the techniques used in Mac OS X Text to English Speech Primer Tutorial, today, we involve the great Web Audio API functionality introduced with HTML5 and “starring” in HTML5 Rocks’s Getting Started with Web Audio API great advice on this subject.

We start down this long road, we suspect, being able to …

  • set up the audio playing of four separate audio sources (some featuring in Spliced Audio Number Genericization Tutorial) … where …
  • one, with its default configuration, synchronizes with an apt video media play
  • allow looping
  • allow for “start at” seconds
  • allow for “start in” seconds

… on a first draft HTML and Javascript and CSS web_audio.html live run link.

We hope you hang around on our road trip with this topic.


Previous relevant Spliced Audio Number Genericization Tutorial is shown below.

Spliced Audio Number Genericization Tutorial

Spliced Audio Number Genericization Tutorial

If you’ve completed a successful “proof of concept” stage to a project, it can be tempting at this early stage, even before applying it to the specific intended software integration target, to consider ways to “genericize” that application, and so it is for us, here, with yesterday’s Spliced Audio Number Announcements Tutorial, as shown below, that we feel this could come along to be applied for other purposes. We have no doubt the exercise of doing this serves at least three good purposes …

  1. slow it down a bit before rushing to “software integrate”, as patience can be good here
  2. learn more about what’s possible, and what isn’t, to do with the scope of your planning and thinking
  3. other application may, too, benefit from this “early days” “genericization” of a potential plugin component piece of HTML and Javascript code

In this early stage of “genericization” thoughts, we think that with our project we want to keep intact these ideas …

  • there’ll be up to 3 “columns” of ideas to piece together an audio message from its constituent parts, like with those Sydney train platform announcements we’ve talked about before
  • there’ll be 3 soundfiles mapped to most of the usage regarding these 3 “columns”
  • there’ll be the possibility for silence to be an option in each “column”
  • there’ll be the mechanism by which the user can define their own “Title” and “Subtitle” and 3 “column” headings themselves
  • there’ll be 2 leftmost “columns” that define counting numbers whose ranges can be defined by the user, where, for now, the timing of sounds goes that sounds start at [number].4 seconds and plays for 1.5 seconds
  • there’ll be minimum and maximum special case entries available for user definition in the leftmost “column” that calls on the fourth soundfile, where, for now, the timing of sounds goes that sounds start at 0 seconds and 2 seconds respectively and plays for 2 seconds
  • there’ll be a minimum special case entry available for user definition in the middle “column” that calls on a sound from the third soundfile, where, for now, the timing of sounds goes that sounds start at 3.1 seconds and plays for 1.8 seconds
  • there’ll be 1 rightmost “column” that can have three entries defined

And that is as far as we go with “genericizations”, at this stage, with our project.

In our experience, what Javascript function is a big friend of “genericization”? We’d say Javascript eval function is our favourite here.

It’s funny to think that our HTML and Javascript and CSS audio_1_59.htm, vastly changed from yesterday as per this link, functions exactly the same in its default form, and you can continue to enjoy its accompanying default live run link, but it can, through the use of complex URLs (only, just at this early stage) be made to look quite different, with the same code, as you can see with this complex live run.

So, in summary, this leaves us with many more “live run” options, those being …


Previous relevant Spliced Audio Number Announcements Tutorial is shown below.

Spliced Audio Number Announcements Tutorial

Spliced Audio Number Announcements Tutorial

We’ve got a “proof of concept” tutorial for you today, because we’ve got an idea for something, as we said some time back at Splicing Audio Primer Tutorial

The first was a simulation of those Sydney train public announcements where the timbre of the voice differs a bit between when they say “Platform” and the “6″ (or whatever platform it is) that follows. This is pretty obviously computer audio “bits” strung together … and wanted to get somewhere towards that capability.

… that will probably be blimmin’ obvious to you should you be a regular recent reader at this blog.

Do you remember what we, here, see as a characteristic of “proof of concept” at WordPress Is Mentioned By Navigation Primer Tutorial

To us, a “proof of concept” is not much use if it is as involved as what it is trying to prove

… and do you remember how we observed at Windows 10 Cortana Primer Tutorial

… because you can work Cortana without the voice recognition part, if you like, or if you have the urge to run for the nearest cupboard before being caught talking into a computer (microphone)

? Well, today, we’d like you to be patient about the lack of audio quality with our home made audio (see excuse 2 above) bit we are mainly interested in “proof of concept” issues (see excuse 1 above).

So what “ingredients” went into this “Audio Numbers” web application? As we did in Apple iOS Siri Audio Commentary Tutorial

HTML audio elements that allow for an audio commentary of the 9 “subimages” … the content for which is derived on a Mac OS X by QuickTime Player‘s Audio Recording functionality, which we last talked about at this blog with QuickTime Player Video Flickr Share Primer Tutorial

… we do again today. On doing this we realized the recordings were not loud enough, so started down the road of R&D on this and got to the very useful Increase Audio Volume website tool that helped a little, and this manifests itself if/when you run our live run today, that if you pick “minute” numbers less than or equal to “30″ they are a better better in volume than others, with the “Trial Version” of this software helping you out with “half file” enhancements. “Proof of concept”, remember? And so the aspects you’d change for your own purposes, are …

  1. the content (and more than likely, names) of audio files mentioned below …
  2. arrays of audio files …

    var audiomedia=["one_to_fiftynine.m4a","past_quarterto.m4a","am_pm.m4a"];
    var midmedia=["midnight_midday.m4a"];

    … and it should be noted here, that a separate file for each unique sound, could be a good alternative design, and would stop failures to do with the slow loading speed of the home web server causing audio misfiring … and would mean, below, that “astart” is always “0″ and “delay” should be set to the audio object’s duration parameter
  3. variables “astart” and “delay” as per example …

    } else if (thingis.toLowerCase().indexOf('clock') != -1) {
    oaudio.src=audiomedia[i];
    astart=eval("3.1");
    delay=1.8;


    … where “astart” reflects a start of play value and “delay” represents a length of play scenario in seconds, as we got going in the past when we presented Spliced Audio/Video Overlay Position Tutorial as shown below, where you can read more about the HTML5 Audio objects we used with this “proof of concept” project

Please note with the recording of “one_to_fiftynine.m4a”, that records numbers from 1 to 59, via QuickTime Player, we relied on the recording timer, to time our number recording with a second of duration to make the HTML and Javascript coding a lot easier!

So, as you can see, this is “proof of concept” preparation, and of you want to try it yourself, perhaps you’d like to start with a skeleton of today’s HTML and Javascript audio_1_59.html as a starting point?!


Previous relevant Spliced Audio/Video Overlay Position Tutorial is shown below.

Spliced Audio/Video Overlay Position Tutorial

Spliced Audio/Video Overlay Position Tutorial

Today we’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 Spliced Audio/Video/Image Overlay Tutorial as shown below, here, and that can take any of the forms …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses
  • video
  • image … and background image for webpage

… for either of the modes of use, that being …

  • discrete … or “Optional”
  • synchronized … or “Overlay”

… all like yesterday, but this time we allow you to “seek” or position yourself within the audio and/or video media. We still all “fit” 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 “just clientside” or “just client looking, plus, perhaps, Javascript serverside code” (ala Node.js) or perhaps “Javascript clientside client code, plus Ajax methodologies”. In any case, it does simplify design to not have to involve a serverside language like PHP … but please don’t think we do not encourage you to learn a serverside language like PHP.

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 autoplay property for a media object is frowned upon regarding these mobile devices … for reasons of “runaway” unknown charge issues as you can read at this useful link … thanks … and where they quote from Apple …

“Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.

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.” – Apple documentation.

A link we’d like to thank regarding the new “seek” or media positioning functionality is this one … thanks.

Also, today, for that sense of symmetry, we start to create the Audio objects from now on using …


document.createElement("AUDIO");

… as this acts the same as new Audio() to the best of our testing.

For your own testing purposes, if you know of some media URLs to try, please feel free to try the “overlay” of media ideas inherent in today’s splice_audio.htm live run. For today’s cake “prepared before the program” we’ve again channelled the GoToMeeting Primer Tutorial which had separate audio (albeit very short … sorry … but you get the gist) and video … 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 …

We think, though, that we will be back regarding this interesting topic, and hope we can improve mobile device functionality.


Previous relevant Spliced Audio/Video/Image Overlay Tutorial is shown below.

Spliced Audio/Video/Image Overlay Tutorial

Spliced Audio/Video/Image Overlay Tutorial

Today we’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 that can take any of the forms …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses
  • video
  • image … and background image for webpage

… for either of the modes of use, that being …

  • discrete … or “Optional”
  • synchronized … or “Overlay”

The major new change here, apart from the ability to play two media files at once in our synchronized (or “overlayed”) way, is the additional functionality for Video, and we proceeded thinking there’d be an Javascript DOM OOPy method like … var xv = new Video(); … to allow for this, but found out from this useful link … thanks … that an alternative approach for Video object creation, on the fly, is …


var xv = document.createElement("VIDEO");

… curiously. And it took us a while to tweak to the idea that to have a “display home” for the video on the webpage we needed to …


document.body.appendChild(xv);

… which means you need to take care of any HTML form data already filled in, that isn’t that form’s default, when you effectively “refresh” the webpage like this. Essentially though, media on the fly is a modern approach possible fairly easily with just clientside code. Cute, huh?!

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 synchronization of media themed blog postings of the past, which you may want to read more, for this type of approach.

In the meantime, if you know of some media URLs to try, please feel free to try the “overlay” of media ideas inherent in today’s splice_audio.htm live run. We’ve thought of this one. Do you remember how the GoToMeeting Primer Tutorial had separate audio (albeit very short … sorry … but you get the gist) and video … 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 …

We think, though, that we will be back regarding this interesting topic.


Previous relevant Splicing Audio Primer Tutorial is shown below.

Spliced Audio Primer Tutorial

Splicing Audio Primer Tutorial

Today we’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 …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses

Do you remember, perhaps, when we did a series of blog posts regarding the YouTube API, that finished, so far, with YouTube API Iframe Synchronicity Resizing Tutorial? Well, a lot of what we do today is doing similar sorts of functionalities but just for Audio objects in HTML5. For help on this we’d like to thank this great link. So rather than have HTML audio elements in our HTML, as we first shaped to do, we’ve taken the great advice from this link, and gone all Javascript DOM OOPy on the task, to splice audio media together.

There were three thought patterns going on here for me.

  • The first was a simulation of those Sydney train public announcements where the timbre of the voice differs a bit between when they say “Platform” and the “6″ (or whatever platform it is) that follows. This is pretty obviously computer audio “bits” strung together … and wanted to get somewhere towards that capability.
  • The second one relates to presentation ideas following up on that “onmouseover” Siri audio enhanced presentation we did at Apple iOS Siri Audio Commentary Tutorial. Well, we think we can do something related to that here, and we’ve prepared this cake audio presentation here, for us, in advance … really, there’s no need for thanks.
  • The third concerns our eternal media file synchronization quests here at this blog that you may find of interest we hope, here.

Also of interest over time has been the Google Translate Text to Speech functionality that used to be very open, and we now only use around here in an interactive “user clicks” way … but we still use it, because it is very useful, so, thanks. But trying to get this method working for “Platform” and “6″ without a yawning gap in between ruins the spontaneity and fun somehow, but there’s nothing stopping you making your own audio files yourself as we did in that Siri tutorial called Apple iOS Siri Audio Commentary Tutorial and take the HTML and Javascript code you could call splice_audio.html from today, and go and make your own web application? Now, is there? Huh?

Try a live run or perhaps some more Siri cakes?!

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in Tutorials, eLearning, iOS | Tagged , , , , , , , , , , , , , , , , , , , , , | 1 Comment

HTML5 Web Audio Piano Mobile Tutorial

HTML5 Web Audio Piano Mobile Tutorial

HTML5 Web Audio Piano Mobile Tutorial

You guessed it! The software integrations of yesterday’s HTML5 Web Audio Piano Tutorial had issues with the mobile platforms. Do fish swim? Do axolotl have two L’s and two O’s? Yes, yes and yes.

With our iPad and iPhone testing (and we’ll go more into that tomorrow) we found timing issues as to when exactly to call that window onload init function. Which beggars the question, being that window and document are two different objects of a webpage “is window onload the same as document body onload?” We’d always assumed so, and trying “not to be in that bubble of our own existence”, did read at least the first link of that previous Google search to feel appeased. It seems so … but we digress.

Why is this timing important? As we’ve said many times, Apple‘s iOS (mobile operating system) and audio are super sensitive to trying to eradicate “sounds on (webpage) load”, we take it, and want to only allow for audio easily via a “touch” event off a button (made by a human … and, we hope, all axolotls), that’s why. Get the timing wrong, and we weren’t, on mobile platforms, creating the buttons needed to touch in order to make the 87 different notes on our piano.

This work is accessible via the changed piano.htm‘s piano web application calling on the changed web_audio.htm (Web Audio API interfacer) in an iframe.

You can also see this play out at WordPress 4.1.1′s HTML5 Web Audio Piano Mobile Tutorial.


Previous relevant HTML5 Web Audio Piano Tutorial is shown below.

HTML5 Web Audio Piano Tutorial

HTML5 Web Audio Piano Tutorial

We find software integration interesting yet challenging, and the integration of …

… in these early days, before we give up on the mobile platform issue compromises we have so far, is no exception.

In broad brush terms we …

  • call from the changed piano.htm‘s piano web application the changed web_audio.htm (Web Audio API interfacer) in an iframe as per (the HTML) …

    <iframe class=ask title='versus Audio Web' frameborder=0 scrolling='no' style='overflow:hidden;background-color:orange;display:inline-block;width:500px;height:28px;max-height:28px;' width=500 height=28 src='web_audio.htm?vscaseyrule=y'></iframe>

    … and so in …
  • web_audio.htm (it) creates up above all else in the top left corner of its webpage, on detecting this call above …

    <script type='text/javascript'>
    if ((location.search.split('vscaseyrule=')[1] ? (' ' + decodeURIComponent(location.search.split('vscaseyrule=')[1]).split('&')[0]) : '') != '') { //navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    var hish='<div class=parent id=dchoose style="font-size:26px;position:absolute;top:0px;left:0px;z-index:2001;display:inline-block;background-color:transparent;"><input class=child placeholder="CaseyRule" title="versus Audio Web" style="position:absolute;top:0px;left:0px;z-index:2001;display:inline-block;background-color:transparent;" name=dlhuhb id=dlhuhb onchange="' + "actedupon=true; this.visibility='visible'; parent.document.getElementById('conduit').value=' '; parent.document.getElementById('cmdconduit').value=' '; document.getElementById('dchoose').innerHTML='Web Audio'; " + '" onclick="actedupon=true; parent.document.getElementById("' + "conduit" + '").value=String.fromCharCode(32); parent.document.getElementById("' + "cmdconduit" + '").value=String.fromCharCode(32); setTimeout(init,1500);" onblur="actedupon=true; parent.document.getElementById("' + "conduit" + '").value=String.fromCharCode(32); parent.document.getElementById("' + "cmdconduit" + '").value=String.fromCharCode(32); this.value=' + "'Web Audio';" + ' setTimeout(init,1800);" ontouchstart=" parent.document.getElementById("' + "conduit" + '").value=String.fromCharCode(32); parent.document.getElementById("' + "cmdconduit" + '").value=String.fromCharCode(32); setTimeout(init,500);" list="modes" name="modes"><datalist id="modes"><option value="CaseyRule"><option value="Audio Web"></datalist></div>';
    if (1 == 1 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    hish='<div class=parent id=dchoose style="font-size:26px;position:absolute;top:0px;left:0px;z-index:2001;display:inline-block;background-color:transparent;">CaseyRule versus <button style=display:inline-block;background-color:red; id=dlhuhb onmousedown="' + "actedupon=true; parent.document.getElementById('conduit').value=' '; parent.document.getElementById('cmdconduit').value=' '; this.innerHTML=''; setTimeout(init,500);" + '" ontouchstart="' + "actedupon=true; parent.document.getElementById('conduit').value=' '; parent.document.getElementById('cmdconduit').value=' '; setTimeout(init,200);" + '">Web Audio</button></div>';
    }
    document.write(hish);
    }
    </script>

    … a default piano “CaseyRule” mode of use piece of text, followed by a HTML button element “Web Audio” to switch to that … and back at …
  • piano.htm detects a “Web Audio” mode of use when that …

    if (document.getElementById('conduit').value != '') {
    document.getElementById('cmdconduit').value+="parent.document.getElementById('iaudio" + caboffrank + "').src='" + what + "'; ";
    document.getElementById('conduit').value+=what.replace('/','').replace('.','') + ' ';
    } else {
    document.getElementById('iaudio' + caboffrank).src=what;
    }

    … document.getElementById(‘conduit’).value is not ” because it is storing button press information for …
  • web_audio.htm to play the audio off that button press via …

    function pianonoteplay(bo) {
    var ioth='' + eval('' + bo.title);
    var prefix="";
    if (!nostop) { stopit(); } else { lastbo=null; }
    if (whichs == "") { whichs="" + ioth; }
    whichs="" + eval(ioffs[eval(-1 + eval('' + ioth))] + eval(ioth));
    if (sourcep_valid()) { //if (typeof sourcep !== 'undefined') {
    sourcep[eval(-1 + eval(whichs))]=true;
    } else {
    eval("source" + whichs + "p=true;");
    }
    var sendb=("(" + document.getElementById('startingin').value + "," + document.getElementById('startingat').value + ");").replace("(,)", "(0)").replace("(,", "(0,").replace(",)", ",0)");
    var suffix=("(" + document.getElementById('startingin').value + "," + document.getElementById('startingat').value + ")").replace("(,)", "").replace("(0,0)", "").replace("(0,)", "").replace("(,0)", "").replace("(,", ",").replace(",)", "").trim();
    if (source_valid()) { //if (typeof source !== 'undefined') {
    if (fors.replace('0','') != '' && fors.indexOf('-') == -1) {
    source[eval(-1 + eval(whichs))].start(eval('0' + document.getElementById('startingin').value), eval('0' + document.getElementById('startingat').value), eval('' + dura(document.getElementById('duration').value,lastbo).split(';')[0].split(':')[eval(-1 + dura(document.getElementById('duration').value,lastbo).split(';')[0].split(':').length)].split('.')[0].split(' ')[0]));
    } else if (document.getElementById('duration').value.replace('0','') != '') {
    source[eval(-1 + eval(whichs))].start(eval('0' + document.getElementById('startingin').value), eval('0' + document.getElementById('startingat').value), eval('' + dura(document.getElementById('duration').value,lastbo).split(';')[0].split(':')[eval(-1 + dura(document.getElementById('duration').value,lastbo).split(';')[0].split(':').length)].split('.')[0].split(' ')[0]));
    } else {
    source[eval(-1 + eval(whichs))].start(eval('0' + document.getElementById('startingin').value), eval('0' + document.getElementById('startingat').value));
    }
    } else {
    eval("source" + whichs + ".start" + dura(sendb,lastbo));
    }
    nostop=false;
    document.getElementById('startingat').value='';
    document.getElementById('startingin').value='';
    document.getElementById('loop1').checked=false;
    document.getElementById('loop2').checked=false;
    checknext();
    ioffs[eval(-1 + eval(ioth))]+=four;
    ioffset=ioffs[eval(-1 + eval(ioth))];
    if (sourcep_valid()) { //if (typeof sourcep !== 'undefined') {
    sourcep[eval(-1 + eval(ioffset + eval(ioth)))]=false;
    } else {
    eval("source" + eval(ioffset + eval(ioth)) + "p=false;");
    }
    if (source_valid()) { //if (typeof source !== 'undefined') {
    source[eval(-1 + eval(ioffset + eval(ioth)))] = context.createBufferSource();
    source[eval(-1 + eval(ioffset + eval(ioth)))].buffer = sb[eval(-1 + eval(ioth))];
    source[eval(-1 + eval(ioffset + eval(ioth)))].connect(context.destination);
    } else {
    eval("source" + eval(ioffset + eval(ioth)) + " = context.createBufferSource(); source" + eval(ioffset + eval(ioth)) + ".buffer = sb[" + eval(-1 + eval(ioth)) + "]; source" + eval(ioffset + eval(ioth)) + ".connect(context.destination); ");
    }
    }

… for starters.

Expecting a sound tonality difference between the methods? No, a computer creates the sound the same way via the same sound frequency, and if the response time is reasonable we couldn’t hear big rhythm changes that you might expect with the parent/child “chatter” required for all this.

Feel free to try your piano playing scales and arpeggios and chords with today’s more integrated live run link.


Previous relevant HTML5 Web Audio Mobile Tutorial is shown below.

HTML5 Web Audio Mobile Tutorial

HTML5 Web Audio Mobile Tutorial

There is another two pronged improvement approach again today building on HTML5 Web Audio Overlay Tutorial‘s two pronged approach to the previous two pronged approach … which makes for a great fork for spaghetti but we digress … the prongs today being …

  • first, and like yesterday, allow for clientside HTML to do what serverside PHP usually does for us … handle large amounts of data as PHP can do using its $_POST[] approach … we’re still calling “Overlay Iframe Remembering” … and add to …
    1. child iframe src= mode of use … but also with, new to today …
    2. child iframe srcdoc= mode of use

    … because (am not absolutely sure why as yet but) it solves the problem with …
    … non-mobile/Safari/fill in “Audio Content” form/including a Duration/click “Web Audio Run” button …
    … didn’t automatically start any audio, though other non-mobile web browsers do …
    … and as you may imagine this needs some delimitation explanations that show below

    function takealook(fo) {
    var noneed=true;
    var htmlis='';
    var nsuffix='';
    if (document.getElementById('url1').value.length > 500) { noneed=false; }
    if (document.getElementById('url2').value.length > 500) { noneed=false; }
    if (document.getElementById('url3').value.length > 500) { noneed=false; }
    if (document.getElementById('url4').value.length > 500) { noneed=false; }
    if (document.getElementById('durationget').value.length > 0) { nsuffix='&notoka=secret'; noneed=false; } else { isrc=' src='; }
    if (source_valid()) {
    if (noneed) { return true; }
    if (isrc == ' srcdoc=') {
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    document.getElementById('huhb').style.display='inline-block';
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    } else {
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    }
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='1.0'; }
    document.getElementById('myi').srcdoc='<!doctype html><html><head>' + document.head.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</head><body>' + document.body.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</body></html>';
    } else {
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='0.2'; }
    document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "'></iframe>";
    }
    } else {
    if (notoka.trim().toLowerCase() == 'secret') { noneed=false; }
    if (noneed) { return true; }
    if (isrc == ' srcdoc=') {
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    document.getElementById('huhb').style.display='inline-block';
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    } else {
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    }
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='1.0'; }
    document.getElementById('myi').srcdoc='<!doctype html><html><head>' + document.head.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</head><body>' + document.body.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</body></html>';
    } else {
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='0.2'; }
    document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'></iframe>";
    }
    }
    return false;
    }

    … adding another option to “Overlay Iframe Remembering” types of solutions, we figure … cute in the sense that all this is clientside HTML/Javascript/CSS

  • … as per these interim changes

  • mobile platform considerations (in our tests of iOS iPad and iPhone) …
    1. allowing for a button press “touch” event (“touchstart” for us, but read somewhere that they liked “touchend”) to trigger the AudioContext setup
    2. taking away the “capture” property of our browser buttons so that the mobile platform user can browse for an existant media file or capture that media
    3. we try to allow video media to be played in that video element should the user choose a video media file as their audio media choice which tends to be the way for the “capture” property of a mobile user input type=file browser button

    … as per these changes

Did you get from the code snippets how this “Overlay Iframe Remembering” works by storing the large amounts of data in an overlayed “layer” of webpage, both webpage layers “clientside” by nature and available datawise to each other in a parent/child (layer1WebpageParent/layer2OverlayedIframeWebpageChild) arrangement, that iframe being populated via a src= scenario getting the “overlay” to populate itself or help that “overlay” along (perhaps it’s that period after lunch digesting the caviar?!) by supplying its content via srcdoc= usage? Again, perhaps it is easier to see it in action at this live run link.


Previous relevant HTML5 Web Audio Overlay Tutorial is shown below.

HTML5 Web Audio Overlay Tutorial

HTML5 Web Audio Overlay Tutorial

Again, in building on yesterday’s HTML5 Web Audio Duration Tutorial two pronged approach, we have another one today, those approaches involving …

  • first allow for clientside HTML to do what serverside PHP usually does for us … handle large amounts of data as PHP can do using its $_POST[] approach … we’re going to call “Overlay Iframe Remembering” … whereby the
    1. navigational form gets a new id=waform onsubmit=’return takealook(this);’

      function takealook(fo) {
      var noneed=true;
      var nsuffix='';
      if (document.getElementById('url1').value.length > 500) { noneed=false; }
      if (document.getElementById('url2').value.length > 500) { noneed=false; }
      if (document.getElementById('url3').value.length > 500) { noneed=false; }
      if (document.getElementById('url4').value.length > 500) { noneed=false; }
      if (document.getElementById('durationget').value.length > 0) { nsuffix='&notoka=secret'; noneed=false; }
      if (source_valid()) {
      if (noneed) { return true; }
      document.getElementById('divbody').style.opacity='0.2';
      document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + document.URL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "'></iframe>";
      } else {
      if (notoka.trim().toLowerCase() == 'secret') { noneed=false; }
      if (noneed) { return true; }
      document.getElementById('divbody').style.opacity='0.2';
      document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + document.URL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'></iframe>";
      }
      return false;
      }

      … where if noneed ends up as false we perform some overlay favourites … building on …
    2. textbox HTML design changes from …

      <input style='display:inline-block;background-color:#f0f0f0;' type=text name=url2 title='Audio URL 2' value='./one_to_fiftynine.m4a'></input>

      … to …

      <input data-id=url2 onblur="document.getElementById(this.getAttribute('data-id')).value=this.value;" style='display:inline-block;background-color:#f0f0f0;' type=text name=url2 title='Audio URL 2' value='./one_to_fiftynine.m4a'></input>
      <div id=dform style='display:none;'></div>
      <div id=diframe></div>

      … that makes the document.body onload logic below be useful for the context of that onsubmit form logic above …

    3. document.getElementById('dform').innerHTML=document.getElementById('waform').innerHTML.replace(/\ data\-id=/g, ' id=').replace(/\ onblur=/g, ' data-onblur=');

    … as per these interim changes … then in the context of those large amounts of data possibly coming from …

  • like with the recent Video via Canvas File API Tutorial

    … we see for web applications, two primary source “partitions”, those being …

    • around the “net” (in the server wooooooorrrrrlllllld, in the public areas of the Internet, which are not in “the dark web”, that is) via an absolute URL (to the same domain or beyond) and/or relative URL (in relation to the URL “home” place on the web server of the same domain as where you launched it … which we catered for yesterday, though quietly we’d have allowed absolute URLs too, it’s just that cross-domain restrictions make us shy about publicizing that) … versus …
    • on the client computer (or device)

    … and, yes, for all those who guessed we’d try to cater for image and/or video data coming from this client source, you are correct …

    … media file browsing, via the wonderful File API, additional functionality as per these changes to web_audio.htm

Did you get from the code snippets how this “Overlay Iframe Remembering” works by storing the large amounts of data in an overlayed “layer” of webpage, both webpage layers “clientside” by nature and available datawise to each other in a parent/child (layer1WebpageParent/layer2OverlayedIframeWebpageChild) arrangement? Perhaps it is easier to see it in action at this live run link.


Previous relevant HTML5 Web Audio Duration Tutorial is shown below.

HTML5 Web Audio Duration Tutorial

HTML5 Web Audio Duration Tutorial

In building on yesterday’s HTML5 Web Audio Primer Tutorial we adopted a two pronged approach, that being …

  • first allow for the reduction of use of Javascript eval involving statements that assign values (ie. eval statement contains an “=” sign) (but will continue on with it helping out with some mathematics) … in favour of using arrays instead …

    var source=[];
    var sourcep=[];
    var notoka=location.search.split('notoka=')[1] ? (" " + decodeURIComponent(location.search.split('notoka=')[1]).split('&')[0]) : "";
    if (notoka == "") {
    for (var iii=1; iii<=4; iii++) {
    source.push(null);
    sourcep.push(false);
    }
    }

    for (var ii=5; ii<500; ii++) {
    if (source_valid()) { //if (typeof source !== 'undefined') {
    source.push(null);
    if (sourcep_valid()) { //if (typeof sourcep !== 'undefined') {
    sourcep.push(false);
    }
    } else {
    eval("var source" + ii + " = null;"); //context.createBufferSource();
    }
    }

    function source_valid() {
    if (typeof source !== 'undefined') {
    if (source.length >= 4) { return true; }
    }
    return false;
    }

    function sourcep_valid() {
    if (typeof sourcep !== 'undefined') {
    if (sourcep.length >= 4) { return true; }
    }
    return false;
    }

    … as per these interim changes … then go on to …
  • other changes as per …
    1. add duration as a very useful third parameter …

      Seconds … optionally follow by ; sets of ButtonNumber1to4:StartingAt=[0]:StartingIn=[0]:Loop=[false]:Duration=[0]

      … to Web Audio class “start” method … the use of which is the final piece in a puzzle that allows us to …

    2. schedule an execution run of button presses to play Audio ahead of time … because with a duration we can piggy back the audios (so be able to synchronize our efforts better) … and we also …
    3. open the Audio content up to the “server” woooorrrrlllld (via the “reveal” friendly HTML details/summary element combination) by allowing the user to specify their own 4 audio URLs (and one synchronized video one) along with 4 button labels presented in an HTML form method=GET to renavigate with this user supplied content back to the body onload scenario

    … to arrive at this finally changed web_audio.html

… that we welcome you to try at this live run link.


Previous relevant HTML5 Web Audio Primer Tutorial is shown below.

HTML5 Web Audio Primer Tutorial

HTML5 Web Audio Primer Tutorial

As an audio/video synchronization alternative to the techniques used in Mac OS X Text to English Speech Primer Tutorial, today, we involve the great Web Audio API functionality introduced with HTML5 and “starring” in HTML5 Rocks’s Getting Started with Web Audio API great advice on this subject.

We start down this long road, we suspect, being able to …

  • set up the audio playing of four separate audio sources (some featuring in Spliced Audio Number Genericization Tutorial) … where …
  • one, with its default configuration, synchronizes with an apt video media play
  • allow looping
  • allow for “start at” seconds
  • allow for “start in” seconds

… on a first draft HTML and Javascript and CSS web_audio.html live run link.

We hope you hang around on our road trip with this topic.


Previous relevant Spliced Audio Number Genericization Tutorial is shown below.

Spliced Audio Number Genericization Tutorial

Spliced Audio Number Genericization Tutorial

If you’ve completed a successful “proof of concept” stage to a project, it can be tempting at this early stage, even before applying it to the specific intended software integration target, to consider ways to “genericize” that application, and so it is for us, here, with yesterday’s Spliced Audio Number Announcements Tutorial, as shown below, that we feel this could come along to be applied for other purposes. We have no doubt the exercise of doing this serves at least three good purposes …

  1. slow it down a bit before rushing to “software integrate”, as patience can be good here
  2. learn more about what’s possible, and what isn’t, to do with the scope of your planning and thinking
  3. other application may, too, benefit from this “early days” “genericization” of a potential plugin component piece of HTML and Javascript code

In this early stage of “genericization” thoughts, we think that with our project we want to keep intact these ideas …

  • there’ll be up to 3 “columns” of ideas to piece together an audio message from its constituent parts, like with those Sydney train platform announcements we’ve talked about before
  • there’ll be 3 soundfiles mapped to most of the usage regarding these 3 “columns”
  • there’ll be the possibility for silence to be an option in each “column”
  • there’ll be the mechanism by which the user can define their own “Title” and “Subtitle” and 3 “column” headings themselves
  • there’ll be 2 leftmost “columns” that define counting numbers whose ranges can be defined by the user, where, for now, the timing of sounds goes that sounds start at [number].4 seconds and plays for 1.5 seconds
  • there’ll be minimum and maximum special case entries available for user definition in the leftmost “column” that calls on the fourth soundfile, where, for now, the timing of sounds goes that sounds start at 0 seconds and 2 seconds respectively and plays for 2 seconds
  • there’ll be a minimum special case entry available for user definition in the middle “column” that calls on a sound from the third soundfile, where, for now, the timing of sounds goes that sounds start at 3.1 seconds and plays for 1.8 seconds
  • there’ll be 1 rightmost “column” that can have three entries defined

And that is as far as we go with “genericizations”, at this stage, with our project.

In our experience, what Javascript function is a big friend of “genericization”? We’d say Javascript eval function is our favourite here.

It’s funny to think that our HTML and Javascript and CSS audio_1_59.htm, vastly changed from yesterday as per this link, functions exactly the same in its default form, and you can continue to enjoy its accompanying default live run link, but it can, through the use of complex URLs (only, just at this early stage) be made to look quite different, with the same code, as you can see with this complex live run.

So, in summary, this leaves us with many more “live run” options, those being …


Previous relevant Spliced Audio Number Announcements Tutorial is shown below.

Spliced Audio Number Announcements Tutorial

Spliced Audio Number Announcements Tutorial

We’ve got a “proof of concept” tutorial for you today, because we’ve got an idea for something, as we said some time back at Splicing Audio Primer Tutorial

The first was a simulation of those Sydney train public announcements where the timbre of the voice differs a bit between when they say “Platform” and the “6″ (or whatever platform it is) that follows. This is pretty obviously computer audio “bits” strung together … and wanted to get somewhere towards that capability.

… that will probably be blimmin’ obvious to you should you be a regular recent reader at this blog.

Do you remember what we, here, see as a characteristic of “proof of concept” at WordPress Is Mentioned By Navigation Primer Tutorial

To us, a “proof of concept” is not much use if it is as involved as what it is trying to prove

… and do you remember how we observed at Windows 10 Cortana Primer Tutorial

… because you can work Cortana without the voice recognition part, if you like, or if you have the urge to run for the nearest cupboard before being caught talking into a computer (microphone)

? Well, today, we’d like you to be patient about the lack of audio quality with our home made audio (see excuse 2 above) bit we are mainly interested in “proof of concept” issues (see excuse 1 above).

So what “ingredients” went into this “Audio Numbers” web application? As we did in Apple iOS Siri Audio Commentary Tutorial

HTML audio elements that allow for an audio commentary of the 9 “subimages” … the content for which is derived on a Mac OS X by QuickTime Player‘s Audio Recording functionality, which we last talked about at this blog with QuickTime Player Video Flickr Share Primer Tutorial

… we do again today. On doing this we realized the recordings were not loud enough, so started down the road of R&D on this and got to the very useful Increase Audio Volume website tool that helped a little, and this manifests itself if/when you run our live run today, that if you pick “minute” numbers less than or equal to “30″ they are a better better in volume than others, with the “Trial Version” of this software helping you out with “half file” enhancements. “Proof of concept”, remember? And so the aspects you’d change for your own purposes, are …

  1. the content (and more than likely, names) of audio files mentioned below …
  2. arrays of audio files …

    var audiomedia=["one_to_fiftynine.m4a","past_quarterto.m4a","am_pm.m4a"];
    var midmedia=["midnight_midday.m4a"];

    … and it should be noted here, that a separate file for each unique sound, could be a good alternative design, and would stop failures to do with the slow loading speed of the home web server causing audio misfiring … and would mean, below, that “astart” is always “0″ and “delay” should be set to the audio object’s duration parameter
  3. variables “astart” and “delay” as per example …

    } else if (thingis.toLowerCase().indexOf('clock') != -1) {
    oaudio.src=audiomedia[i];
    astart=eval("3.1");
    delay=1.8;


    … where “astart” reflects a start of play value and “delay” represents a length of play scenario in seconds, as we got going in the past when we presented Spliced Audio/Video Overlay Position Tutorial as shown below, where you can read more about the HTML5 Audio objects we used with this “proof of concept” project

Please note with the recording of “one_to_fiftynine.m4a”, that records numbers from 1 to 59, via QuickTime Player, we relied on the recording timer, to time our number recording with a second of duration to make the HTML and Javascript coding a lot easier!

So, as you can see, this is “proof of concept” preparation, and of you want to try it yourself, perhaps you’d like to start with a skeleton of today’s HTML and Javascript audio_1_59.html as a starting point?!


Previous relevant Spliced Audio/Video Overlay Position Tutorial is shown below.

Spliced Audio/Video Overlay Position Tutorial

Spliced Audio/Video Overlay Position Tutorial

Today we’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 Spliced Audio/Video/Image Overlay Tutorial as shown below, here, and that can take any of the forms …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses
  • video
  • image … and background image for webpage

… for either of the modes of use, that being …

  • discrete … or “Optional”
  • synchronized … or “Overlay”

… all like yesterday, but this time we allow you to “seek” or position yourself within the audio and/or video media. We still all “fit” 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 “just clientside” or “just client looking, plus, perhaps, Javascript serverside code” (ala Node.js) or perhaps “Javascript clientside client code, plus Ajax methodologies”. In any case, it does simplify design to not have to involve a serverside language like PHP … but please don’t think we do not encourage you to learn a serverside language like PHP.

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 autoplay property for a media object is frowned upon regarding these mobile devices … for reasons of “runaway” unknown charge issues as you can read at this useful link … thanks … and where they quote from Apple …

“Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.

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.” – Apple documentation.

A link we’d like to thank regarding the new “seek” or media positioning functionality is this one … thanks.

Also, today, for that sense of symmetry, we start to create the Audio objects from now on using …


document.createElement("AUDIO");

… as this acts the same as new Audio() to the best of our testing.

For your own testing purposes, if you know of some media URLs to try, please feel free to try the “overlay” of media ideas inherent in today’s splice_audio.htm live run. For today’s cake “prepared before the program” we’ve again channelled the GoToMeeting Primer Tutorial which had separate audio (albeit very short … sorry … but you get the gist) and video … 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 …

We think, though, that we will be back regarding this interesting topic, and hope we can improve mobile device functionality.


Previous relevant Spliced Audio/Video/Image Overlay Tutorial is shown below.

Spliced Audio/Video/Image Overlay Tutorial

Spliced Audio/Video/Image Overlay Tutorial

Today we’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 that can take any of the forms …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses
  • video
  • image … and background image for webpage

… for either of the modes of use, that being …

  • discrete … or “Optional”
  • synchronized … or “Overlay”

The major new change here, apart from the ability to play two media files at once in our synchronized (or “overlayed”) way, is the additional functionality for Video, and we proceeded thinking there’d be an Javascript DOM OOPy method like … var xv = new Video(); … to allow for this, but found out from this useful link … thanks … that an alternative approach for Video object creation, on the fly, is …


var xv = document.createElement("VIDEO");

… curiously. And it took us a while to tweak to the idea that to have a “display home” for the video on the webpage we needed to …


document.body.appendChild(xv);

… which means you need to take care of any HTML form data already filled in, that isn’t that form’s default, when you effectively “refresh” the webpage like this. Essentially though, media on the fly is a modern approach possible fairly easily with just clientside code. Cute, huh?!

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 synchronization of media themed blog postings of the past, which you may want to read more, for this type of approach.

In the meantime, if you know of some media URLs to try, please feel free to try the “overlay” of media ideas inherent in today’s splice_audio.htm live run. We’ve thought of this one. Do you remember how the GoToMeeting Primer Tutorial had separate audio (albeit very short … sorry … but you get the gist) and video … 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 …

We think, though, that we will be back regarding this interesting topic.


Previous relevant Splicing Audio Primer Tutorial is shown below.

Spliced Audio Primer Tutorial

Splicing Audio Primer Tutorial

Today we’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 …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses

Do you remember, perhaps, when we did a series of blog posts regarding the YouTube API, that finished, so far, with YouTube API Iframe Synchronicity Resizing Tutorial? Well, a lot of what we do today is doing similar sorts of functionalities but just for Audio objects in HTML5. For help on this we’d like to thank this great link. So rather than have HTML audio elements in our HTML, as we first shaped to do, we’ve taken the great advice from this link, and gone all Javascript DOM OOPy on the task, to splice audio media together.

There were three thought patterns going on here for me.

  • The first was a simulation of those Sydney train public announcements where the timbre of the voice differs a bit between when they say “Platform” and the “6″ (or whatever platform it is) that follows. This is pretty obviously computer audio “bits” strung together … and wanted to get somewhere towards that capability.
  • The second one relates to presentation ideas following up on that “onmouseover” Siri audio enhanced presentation we did at Apple iOS Siri Audio Commentary Tutorial. Well, we think we can do something related to that here, and we’ve prepared this cake audio presentation here, for us, in advance … really, there’s no need for thanks.
  • The third concerns our eternal media file synchronization quests here at this blog that you may find of interest we hope, here.

Also of interest over time has been the Google Translate Text to Speech functionality that used to be very open, and we now only use around here in an interactive “user clicks” way … but we still use it, because it is very useful, so, thanks. But trying to get this method working for “Platform” and “6″ without a yawning gap in between ruins the spontaneity and fun somehow, but there’s nothing stopping you making your own audio files yourself as we did in that Siri tutorial called Apple iOS Siri Audio Commentary Tutorial and take the HTML and Javascript code you could call splice_audio.html from today, and go and make your own web application? Now, is there? Huh?

Try a live run or perhaps some more Siri cakes?!

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in Event-Driven Programming, Tutorials, eLearning, iOS | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

HTML5 Web Audio Piano Tutorial

HTML5 Web Audio Piano Tutorial

HTML5 Web Audio Piano Tutorial

We find software integration interesting yet challenging, and the integration of …

… in these early days, before we give up on the mobile platform issue compromises we have so far, is no exception.

In broad brush terms we …

  • call from the changed piano.htm‘s piano web application the changed web_audio.htm (Web Audio API interfacer) in an iframe as per (the HTML) …

    <iframe class=ask title='versus Audio Web' frameborder=0 scrolling='no' style='overflow:hidden;background-color:orange;display:inline-block;width:500px;height:28px;max-height:28px;' width=500 height=28 src='web_audio.htm?vscaseyrule=y'></iframe>

    … and so in …
  • web_audio.htm (it) creates up above all else in the top left corner of its webpage, on detecting this call above …

    <script type='text/javascript'>
    if ((location.search.split('vscaseyrule=')[1] ? (' ' + decodeURIComponent(location.search.split('vscaseyrule=')[1]).split('&')[0]) : '') != '') { //navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    var hish='<div class=parent id=dchoose style="font-size:26px;position:absolute;top:0px;left:0px;z-index:2001;display:inline-block;background-color:transparent;"><input class=child placeholder="CaseyRule" title="versus Audio Web" style="position:absolute;top:0px;left:0px;z-index:2001;display:inline-block;background-color:transparent;" name=dlhuhb id=dlhuhb onchange="' + "actedupon=true; this.visibility='visible'; parent.document.getElementById('conduit').value=' '; parent.document.getElementById('cmdconduit').value=' '; document.getElementById('dchoose').innerHTML='Web Audio'; " + '" onclick="actedupon=true; parent.document.getElementById("' + "conduit" + '").value=String.fromCharCode(32); parent.document.getElementById("' + "cmdconduit" + '").value=String.fromCharCode(32); setTimeout(init,1500);" onblur="actedupon=true; parent.document.getElementById("' + "conduit" + '").value=String.fromCharCode(32); parent.document.getElementById("' + "cmdconduit" + '").value=String.fromCharCode(32); this.value=' + "'Web Audio';" + ' setTimeout(init,1800);" ontouchstart=" parent.document.getElementById("' + "conduit" + '").value=String.fromCharCode(32); parent.document.getElementById("' + "cmdconduit" + '").value=String.fromCharCode(32); setTimeout(init,500);" list="modes" name="modes"><datalist id="modes"><option value="CaseyRule"><option value="Audio Web"></datalist></div>';
    if (1 == 1 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    hish='<div class=parent id=dchoose style="font-size:26px;position:absolute;top:0px;left:0px;z-index:2001;display:inline-block;background-color:transparent;">CaseyRule versus <button style=display:inline-block;background-color:red; id=dlhuhb onmousedown="' + "actedupon=true; parent.document.getElementById('conduit').value=' '; parent.document.getElementById('cmdconduit').value=' '; this.innerHTML=''; setTimeout(init,500);" + '" ontouchstart="' + "actedupon=true; parent.document.getElementById('conduit').value=' '; parent.document.getElementById('cmdconduit').value=' '; setTimeout(init,200);" + '">Web Audio</button></div>';
    }
    document.write(hish);
    }
    </script>

    … a default piano “CaseyRule” mode of use piece of text, followed by a HTML button element “Web Audio” to switch to that … and back at …
  • piano.htm detects a “Web Audio” mode of use when that …

    if (document.getElementById('conduit').value != '') {
    document.getElementById('cmdconduit').value+="parent.document.getElementById('iaudio" + caboffrank + "').src='" + what + "'; ";
    document.getElementById('conduit').value+=what.replace('/','').replace('.','') + ' ';
    } else {
    document.getElementById('iaudio' + caboffrank).src=what;
    }

    … document.getElementById(‘conduit’).value is not ” because it is storing button press information for …
  • web_audio.htm to play the audio off that button press via …

    function pianonoteplay(bo) {
    var ioth='' + eval('' + bo.title);
    var prefix="";
    if (!nostop) { stopit(); } else { lastbo=null; }
    if (whichs == "") { whichs="" + ioth; }
    whichs="" + eval(ioffs[eval(-1 + eval('' + ioth))] + eval(ioth));
    if (sourcep_valid()) { //if (typeof sourcep !== 'undefined') {
    sourcep[eval(-1 + eval(whichs))]=true;
    } else {
    eval("source" + whichs + "p=true;");
    }
    var sendb=("(" + document.getElementById('startingin').value + "," + document.getElementById('startingat').value + ");").replace("(,)", "(0)").replace("(,", "(0,").replace(",)", ",0)");
    var suffix=("(" + document.getElementById('startingin').value + "," + document.getElementById('startingat').value + ")").replace("(,)", "").replace("(0,0)", "").replace("(0,)", "").replace("(,0)", "").replace("(,", ",").replace(",)", "").trim();
    if (source_valid()) { //if (typeof source !== 'undefined') {
    if (fors.replace('0','') != '' && fors.indexOf('-') == -1) {
    source[eval(-1 + eval(whichs))].start(eval('0' + document.getElementById('startingin').value), eval('0' + document.getElementById('startingat').value), eval('' + dura(document.getElementById('duration').value,lastbo).split(';')[0].split(':')[eval(-1 + dura(document.getElementById('duration').value,lastbo).split(';')[0].split(':').length)].split('.')[0].split(' ')[0]));
    } else if (document.getElementById('duration').value.replace('0','') != '') {
    source[eval(-1 + eval(whichs))].start(eval('0' + document.getElementById('startingin').value), eval('0' + document.getElementById('startingat').value), eval('' + dura(document.getElementById('duration').value,lastbo).split(';')[0].split(':')[eval(-1 + dura(document.getElementById('duration').value,lastbo).split(';')[0].split(':').length)].split('.')[0].split(' ')[0]));
    } else {
    source[eval(-1 + eval(whichs))].start(eval('0' + document.getElementById('startingin').value), eval('0' + document.getElementById('startingat').value));
    }
    } else {
    eval("source" + whichs + ".start" + dura(sendb,lastbo));
    }
    nostop=false;
    document.getElementById('startingat').value='';
    document.getElementById('startingin').value='';
    document.getElementById('loop1').checked=false;
    document.getElementById('loop2').checked=false;
    checknext();
    ioffs[eval(-1 + eval(ioth))]+=four;
    ioffset=ioffs[eval(-1 + eval(ioth))];
    if (sourcep_valid()) { //if (typeof sourcep !== 'undefined') {
    sourcep[eval(-1 + eval(ioffset + eval(ioth)))]=false;
    } else {
    eval("source" + eval(ioffset + eval(ioth)) + "p=false;");
    }
    if (source_valid()) { //if (typeof source !== 'undefined') {
    source[eval(-1 + eval(ioffset + eval(ioth)))] = context.createBufferSource();
    source[eval(-1 + eval(ioffset + eval(ioth)))].buffer = sb[eval(-1 + eval(ioth))];
    source[eval(-1 + eval(ioffset + eval(ioth)))].connect(context.destination);
    } else {
    eval("source" + eval(ioffset + eval(ioth)) + " = context.createBufferSource(); source" + eval(ioffset + eval(ioth)) + ".buffer = sb[" + eval(-1 + eval(ioth)) + "]; source" + eval(ioffset + eval(ioth)) + ".connect(context.destination); ");
    }
    }

… for starters.

Expecting a sound tonality difference between the methods? No, a computer creates the sound the same way via the same sound frequency, and if the response time is reasonable we couldn’t hear big rhythm changes that you might expect with the parent/child “chatter” required for all this.

Feel free to try your piano playing scales and arpeggios and chords with today’s more integrated live run link.

You can also see this play out at WordPress 4.1.1′s HTML5 Web Audio Piano Tutorial.


Previous relevant HTML5 Web Audio Mobile Tutorial is shown below.

HTML5 Web Audio Mobile Tutorial

HTML5 Web Audio Mobile Tutorial

There is another two pronged improvement approach again today building on HTML5 Web Audio Overlay Tutorial‘s two pronged approach to the previous two pronged approach … which makes for a great fork for spaghetti but we digress … the prongs today being …

  • first, and like yesterday, allow for clientside HTML to do what serverside PHP usually does for us … handle large amounts of data as PHP can do using its $_POST[] approach … we’re still calling “Overlay Iframe Remembering” … and add to …
    1. child iframe src= mode of use … but also with, new to today …
    2. child iframe srcdoc= mode of use

    … because (am not absolutely sure why as yet but) it solves the problem with …
    … non-mobile/Safari/fill in “Audio Content” form/including a Duration/click “Web Audio Run” button …
    … didn’t automatically start any audio, though other non-mobile web browsers do …
    … and as you may imagine this needs some delimitation explanations that show below

    function takealook(fo) {
    var noneed=true;
    var htmlis='';
    var nsuffix='';
    if (document.getElementById('url1').value.length > 500) { noneed=false; }
    if (document.getElementById('url2').value.length > 500) { noneed=false; }
    if (document.getElementById('url3').value.length > 500) { noneed=false; }
    if (document.getElementById('url4').value.length > 500) { noneed=false; }
    if (document.getElementById('durationget').value.length > 0) { nsuffix='&notoka=secret'; noneed=false; } else { isrc=' src='; }
    if (source_valid()) {
    if (noneed) { return true; }
    if (isrc == ' srcdoc=') {
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    document.getElementById('huhb').style.display='inline-block';
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    } else {
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    }
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='1.0'; }
    document.getElementById('myi').srcdoc='<!doctype html><html><head>' + document.head.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</head><body>' + document.body.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</body></html>';
    } else {
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='0.2'; }
    document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "'></iframe>";
    }
    } else {
    if (notoka.trim().toLowerCase() == 'secret') { noneed=false; }
    if (noneed) { return true; }
    if (isrc == ' srcdoc=') {
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    document.getElementById('huhb').style.display='inline-block';
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    } else {
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    }
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='1.0'; }
    document.getElementById('myi').srcdoc='<!doctype html><html><head>' + document.head.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</head><body>' + document.body.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</body></html>';
    } else {
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='0.2'; }
    document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'></iframe>";
    }
    }
    return false;
    }

    … adding another option to “Overlay Iframe Remembering” types of solutions, we figure … cute in the sense that all this is clientside HTML/Javascript/CSS

  • … as per these interim changes

  • mobile platform considerations (in our tests of iOS iPad and iPhone) …
    1. allowing for a button press “touch” event (“touchstart” for us, but read somewhere that they liked “touchend”) to trigger the AudioContext setup
    2. taking away the “capture” property of our browser buttons so that the mobile platform user can browse for an existant media file or capture that media
    3. we try to allow video media to be played in that video element should the user choose a video media file as their audio media choice which tends to be the way for the “capture” property of a mobile user input type=file browser button

    … as per these changes

Did you get from the code snippets how this “Overlay Iframe Remembering” works by storing the large amounts of data in an overlayed “layer” of webpage, both webpage layers “clientside” by nature and available datawise to each other in a parent/child (layer1WebpageParent/layer2OverlayedIframeWebpageChild) arrangement, that iframe being populated via a src= scenario getting the “overlay” to populate itself or help that “overlay” along (perhaps it’s that period after lunch digesting the caviar?!) by supplying its content via srcdoc= usage? Again, perhaps it is easier to see it in action at this live run link.


Previous relevant HTML5 Web Audio Overlay Tutorial is shown below.

HTML5 Web Audio Overlay Tutorial

HTML5 Web Audio Overlay Tutorial

Again, in building on yesterday’s HTML5 Web Audio Duration Tutorial two pronged approach, we have another one today, those approaches involving …

  • first allow for clientside HTML to do what serverside PHP usually does for us … handle large amounts of data as PHP can do using its $_POST[] approach … we’re going to call “Overlay Iframe Remembering” … whereby the
    1. navigational form gets a new id=waform onsubmit=’return takealook(this);’

      function takealook(fo) {
      var noneed=true;
      var nsuffix='';
      if (document.getElementById('url1').value.length > 500) { noneed=false; }
      if (document.getElementById('url2').value.length > 500) { noneed=false; }
      if (document.getElementById('url3').value.length > 500) { noneed=false; }
      if (document.getElementById('url4').value.length > 500) { noneed=false; }
      if (document.getElementById('durationget').value.length > 0) { nsuffix='&notoka=secret'; noneed=false; }
      if (source_valid()) {
      if (noneed) { return true; }
      document.getElementById('divbody').style.opacity='0.2';
      document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + document.URL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "'></iframe>";
      } else {
      if (notoka.trim().toLowerCase() == 'secret') { noneed=false; }
      if (noneed) { return true; }
      document.getElementById('divbody').style.opacity='0.2';
      document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + document.URL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'></iframe>";
      }
      return false;
      }

      … where if noneed ends up as false we perform some overlay favourites … building on …
    2. textbox HTML design changes from …

      <input style='display:inline-block;background-color:#f0f0f0;' type=text name=url2 title='Audio URL 2' value='./one_to_fiftynine.m4a'></input>

      … to …

      <input data-id=url2 onblur="document.getElementById(this.getAttribute('data-id')).value=this.value;" style='display:inline-block;background-color:#f0f0f0;' type=text name=url2 title='Audio URL 2' value='./one_to_fiftynine.m4a'></input>
      <div id=dform style='display:none;'></div>
      <div id=diframe></div>

      … that makes the document.body onload logic below be useful for the context of that onsubmit form logic above …

    3. document.getElementById('dform').innerHTML=document.getElementById('waform').innerHTML.replace(/\ data\-id=/g, ' id=').replace(/\ onblur=/g, ' data-onblur=');

    … as per these interim changes … then in the context of those large amounts of data possibly coming from …

  • like with the recent Video via Canvas File API Tutorial

    … we see for web applications, two primary source “partitions”, those being …

    • around the “net” (in the server wooooooorrrrrlllllld, in the public areas of the Internet, which are not in “the dark web”, that is) via an absolute URL (to the same domain or beyond) and/or relative URL (in relation to the URL “home” place on the web server of the same domain as where you launched it … which we catered for yesterday, though quietly we’d have allowed absolute URLs too, it’s just that cross-domain restrictions make us shy about publicizing that) … versus …
    • on the client computer (or device)

    … and, yes, for all those who guessed we’d try to cater for image and/or video data coming from this client source, you are correct …

    … media file browsing, via the wonderful File API, additional functionality as per these changes to web_audio.htm

Did you get from the code snippets how this “Overlay Iframe Remembering” works by storing the large amounts of data in an overlayed “layer” of webpage, both webpage layers “clientside” by nature and available datawise to each other in a parent/child (layer1WebpageParent/layer2OverlayedIframeWebpageChild) arrangement? Perhaps it is easier to see it in action at this live run link.


Previous relevant HTML5 Web Audio Duration Tutorial is shown below.

HTML5 Web Audio Duration Tutorial

HTML5 Web Audio Duration Tutorial

In building on yesterday’s HTML5 Web Audio Primer Tutorial we adopted a two pronged approach, that being …

  • first allow for the reduction of use of Javascript eval involving statements that assign values (ie. eval statement contains an “=” sign) (but will continue on with it helping out with some mathematics) … in favour of using arrays instead …

    var source=[];
    var sourcep=[];
    var notoka=location.search.split('notoka=')[1] ? (" " + decodeURIComponent(location.search.split('notoka=')[1]).split('&')[0]) : "";
    if (notoka == "") {
    for (var iii=1; iii<=4; iii++) {
    source.push(null);
    sourcep.push(false);
    }
    }

    for (var ii=5; ii<500; ii++) {
    if (source_valid()) { //if (typeof source !== 'undefined') {
    source.push(null);
    if (sourcep_valid()) { //if (typeof sourcep !== 'undefined') {
    sourcep.push(false);
    }
    } else {
    eval("var source" + ii + " = null;"); //context.createBufferSource();
    }
    }

    function source_valid() {
    if (typeof source !== 'undefined') {
    if (source.length >= 4) { return true; }
    }
    return false;
    }

    function sourcep_valid() {
    if (typeof sourcep !== 'undefined') {
    if (sourcep.length >= 4) { return true; }
    }
    return false;
    }

    … as per these interim changes … then go on to …
  • other changes as per …
    1. add duration as a very useful third parameter …

      Seconds … optionally follow by ; sets of ButtonNumber1to4:StartingAt=[0]:StartingIn=[0]:Loop=[false]:Duration=[0]

      … to Web Audio class “start” method … the use of which is the final piece in a puzzle that allows us to …

    2. schedule an execution run of button presses to play Audio ahead of time … because with a duration we can piggy back the audios (so be able to synchronize our efforts better) … and we also …
    3. open the Audio content up to the “server” woooorrrrlllld (via the “reveal” friendly HTML details/summary element combination) by allowing the user to specify their own 4 audio URLs (and one synchronized video one) along with 4 button labels presented in an HTML form method=GET to renavigate with this user supplied content back to the body onload scenario

    … to arrive at this finally changed web_audio.html

… that we welcome you to try at this live run link.


Previous relevant HTML5 Web Audio Primer Tutorial is shown below.

HTML5 Web Audio Primer Tutorial

HTML5 Web Audio Primer Tutorial

As an audio/video synchronization alternative to the techniques used in Mac OS X Text to English Speech Primer Tutorial, today, we involve the great Web Audio API functionality introduced with HTML5 and “starring” in HTML5 Rocks’s Getting Started with Web Audio API great advice on this subject.

We start down this long road, we suspect, being able to …

  • set up the audio playing of four separate audio sources (some featuring in Spliced Audio Number Genericization Tutorial) … where …
  • one, with its default configuration, synchronizes with an apt video media play
  • allow looping
  • allow for “start at” seconds
  • allow for “start in” seconds

… on a first draft HTML and Javascript and CSS web_audio.html live run link.

We hope you hang around on our road trip with this topic.


Previous relevant Spliced Audio Number Genericization Tutorial is shown below.

Spliced Audio Number Genericization Tutorial

Spliced Audio Number Genericization Tutorial

If you’ve completed a successful “proof of concept” stage to a project, it can be tempting at this early stage, even before applying it to the specific intended software integration target, to consider ways to “genericize” that application, and so it is for us, here, with yesterday’s Spliced Audio Number Announcements Tutorial, as shown below, that we feel this could come along to be applied for other purposes. We have no doubt the exercise of doing this serves at least three good purposes …

  1. slow it down a bit before rushing to “software integrate”, as patience can be good here
  2. learn more about what’s possible, and what isn’t, to do with the scope of your planning and thinking
  3. other application may, too, benefit from this “early days” “genericization” of a potential plugin component piece of HTML and Javascript code

In this early stage of “genericization” thoughts, we think that with our project we want to keep intact these ideas …

  • there’ll be up to 3 “columns” of ideas to piece together an audio message from its constituent parts, like with those Sydney train platform announcements we’ve talked about before
  • there’ll be 3 soundfiles mapped to most of the usage regarding these 3 “columns”
  • there’ll be the possibility for silence to be an option in each “column”
  • there’ll be the mechanism by which the user can define their own “Title” and “Subtitle” and 3 “column” headings themselves
  • there’ll be 2 leftmost “columns” that define counting numbers whose ranges can be defined by the user, where, for now, the timing of sounds goes that sounds start at [number].4 seconds and plays for 1.5 seconds
  • there’ll be minimum and maximum special case entries available for user definition in the leftmost “column” that calls on the fourth soundfile, where, for now, the timing of sounds goes that sounds start at 0 seconds and 2 seconds respectively and plays for 2 seconds
  • there’ll be a minimum special case entry available for user definition in the middle “column” that calls on a sound from the third soundfile, where, for now, the timing of sounds goes that sounds start at 3.1 seconds and plays for 1.8 seconds
  • there’ll be 1 rightmost “column” that can have three entries defined

And that is as far as we go with “genericizations”, at this stage, with our project.

In our experience, what Javascript function is a big friend of “genericization”? We’d say Javascript eval function is our favourite here.

It’s funny to think that our HTML and Javascript and CSS audio_1_59.htm, vastly changed from yesterday as per this link, functions exactly the same in its default form, and you can continue to enjoy its accompanying default live run link, but it can, through the use of complex URLs (only, just at this early stage) be made to look quite different, with the same code, as you can see with this complex live run.

So, in summary, this leaves us with many more “live run” options, those being …


Previous relevant Spliced Audio Number Announcements Tutorial is shown below.

Spliced Audio Number Announcements Tutorial

Spliced Audio Number Announcements Tutorial

We’ve got a “proof of concept” tutorial for you today, because we’ve got an idea for something, as we said some time back at Splicing Audio Primer Tutorial

The first was a simulation of those Sydney train public announcements where the timbre of the voice differs a bit between when they say “Platform” and the “6″ (or whatever platform it is) that follows. This is pretty obviously computer audio “bits” strung together … and wanted to get somewhere towards that capability.

… that will probably be blimmin’ obvious to you should you be a regular recent reader at this blog.

Do you remember what we, here, see as a characteristic of “proof of concept” at WordPress Is Mentioned By Navigation Primer Tutorial

To us, a “proof of concept” is not much use if it is as involved as what it is trying to prove

… and do you remember how we observed at Windows 10 Cortana Primer Tutorial

… because you can work Cortana without the voice recognition part, if you like, or if you have the urge to run for the nearest cupboard before being caught talking into a computer (microphone)

? Well, today, we’d like you to be patient about the lack of audio quality with our home made audio (see excuse 2 above) bit we are mainly interested in “proof of concept” issues (see excuse 1 above).

So what “ingredients” went into this “Audio Numbers” web application? As we did in Apple iOS Siri Audio Commentary Tutorial

HTML audio elements that allow for an audio commentary of the 9 “subimages” … the content for which is derived on a Mac OS X by QuickTime Player‘s Audio Recording functionality, which we last talked about at this blog with QuickTime Player Video Flickr Share Primer Tutorial

… we do again today. On doing this we realized the recordings were not loud enough, so started down the road of R&D on this and got to the very useful Increase Audio Volume website tool that helped a little, and this manifests itself if/when you run our live run today, that if you pick “minute” numbers less than or equal to “30″ they are a better better in volume than others, with the “Trial Version” of this software helping you out with “half file” enhancements. “Proof of concept”, remember? And so the aspects you’d change for your own purposes, are …

  1. the content (and more than likely, names) of audio files mentioned below …
  2. arrays of audio files …

    var audiomedia=["one_to_fiftynine.m4a","past_quarterto.m4a","am_pm.m4a"];
    var midmedia=["midnight_midday.m4a"];

    … and it should be noted here, that a separate file for each unique sound, could be a good alternative design, and would stop failures to do with the slow loading speed of the home web server causing audio misfiring … and would mean, below, that “astart” is always “0″ and “delay” should be set to the audio object’s duration parameter
  3. variables “astart” and “delay” as per example …

    } else if (thingis.toLowerCase().indexOf('clock') != -1) {
    oaudio.src=audiomedia[i];
    astart=eval("3.1");
    delay=1.8;


    … where “astart” reflects a start of play value and “delay” represents a length of play scenario in seconds, as we got going in the past when we presented Spliced Audio/Video Overlay Position Tutorial as shown below, where you can read more about the HTML5 Audio objects we used with this “proof of concept” project

Please note with the recording of “one_to_fiftynine.m4a”, that records numbers from 1 to 59, via QuickTime Player, we relied on the recording timer, to time our number recording with a second of duration to make the HTML and Javascript coding a lot easier!

So, as you can see, this is “proof of concept” preparation, and of you want to try it yourself, perhaps you’d like to start with a skeleton of today’s HTML and Javascript audio_1_59.html as a starting point?!


Previous relevant Spliced Audio/Video Overlay Position Tutorial is shown below.

Spliced Audio/Video Overlay Position Tutorial

Spliced Audio/Video Overlay Position Tutorial

Today we’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 Spliced Audio/Video/Image Overlay Tutorial as shown below, here, and that can take any of the forms …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses
  • video
  • image … and background image for webpage

… for either of the modes of use, that being …

  • discrete … or “Optional”
  • synchronized … or “Overlay”

… all like yesterday, but this time we allow you to “seek” or position yourself within the audio and/or video media. We still all “fit” 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 “just clientside” or “just client looking, plus, perhaps, Javascript serverside code” (ala Node.js) or perhaps “Javascript clientside client code, plus Ajax methodologies”. In any case, it does simplify design to not have to involve a serverside language like PHP … but please don’t think we do not encourage you to learn a serverside language like PHP.

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 autoplay property for a media object is frowned upon regarding these mobile devices … for reasons of “runaway” unknown charge issues as you can read at this useful link … thanks … and where they quote from Apple …

“Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.

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.” – Apple documentation.

A link we’d like to thank regarding the new “seek” or media positioning functionality is this one … thanks.

Also, today, for that sense of symmetry, we start to create the Audio objects from now on using …


document.createElement("AUDIO");

… as this acts the same as new Audio() to the best of our testing.

For your own testing purposes, if you know of some media URLs to try, please feel free to try the “overlay” of media ideas inherent in today’s splice_audio.htm live run. For today’s cake “prepared before the program” we’ve again channelled the GoToMeeting Primer Tutorial which had separate audio (albeit very short … sorry … but you get the gist) and video … 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 …

We think, though, that we will be back regarding this interesting topic, and hope we can improve mobile device functionality.


Previous relevant Spliced Audio/Video/Image Overlay Tutorial is shown below.

Spliced Audio/Video/Image Overlay Tutorial

Spliced Audio/Video/Image Overlay Tutorial

Today we’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 that can take any of the forms …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses
  • video
  • image … and background image for webpage

… for either of the modes of use, that being …

  • discrete … or “Optional”
  • synchronized … or “Overlay”

The major new change here, apart from the ability to play two media files at once in our synchronized (or “overlayed”) way, is the additional functionality for Video, and we proceeded thinking there’d be an Javascript DOM OOPy method like … var xv = new Video(); … to allow for this, but found out from this useful link … thanks … that an alternative approach for Video object creation, on the fly, is …


var xv = document.createElement("VIDEO");

… curiously. And it took us a while to tweak to the idea that to have a “display home” for the video on the webpage we needed to …


document.body.appendChild(xv);

… which means you need to take care of any HTML form data already filled in, that isn’t that form’s default, when you effectively “refresh” the webpage like this. Essentially though, media on the fly is a modern approach possible fairly easily with just clientside code. Cute, huh?!

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 synchronization of media themed blog postings of the past, which you may want to read more, for this type of approach.

In the meantime, if you know of some media URLs to try, please feel free to try the “overlay” of media ideas inherent in today’s splice_audio.htm live run. We’ve thought of this one. Do you remember how the GoToMeeting Primer Tutorial had separate audio (albeit very short … sorry … but you get the gist) and video … 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 …

We think, though, that we will be back regarding this interesting topic.


Previous relevant Splicing Audio Primer Tutorial is shown below.

Spliced Audio Primer Tutorial

Splicing Audio Primer Tutorial

Today we’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 …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses

Do you remember, perhaps, when we did a series of blog posts regarding the YouTube API, that finished, so far, with YouTube API Iframe Synchronicity Resizing Tutorial? Well, a lot of what we do today is doing similar sorts of functionalities but just for Audio objects in HTML5. For help on this we’d like to thank this great link. So rather than have HTML audio elements in our HTML, as we first shaped to do, we’ve taken the great advice from this link, and gone all Javascript DOM OOPy on the task, to splice audio media together.

There were three thought patterns going on here for me.

  • The first was a simulation of those Sydney train public announcements where the timbre of the voice differs a bit between when they say “Platform” and the “6″ (or whatever platform it is) that follows. This is pretty obviously computer audio “bits” strung together … and wanted to get somewhere towards that capability.
  • The second one relates to presentation ideas following up on that “onmouseover” Siri audio enhanced presentation we did at Apple iOS Siri Audio Commentary Tutorial. Well, we think we can do something related to that here, and we’ve prepared this cake audio presentation here, for us, in advance … really, there’s no need for thanks.
  • The third concerns our eternal media file synchronization quests here at this blog that you may find of interest we hope, here.

Also of interest over time has been the Google Translate Text to Speech functionality that used to be very open, and we now only use around here in an interactive “user clicks” way … but we still use it, because it is very useful, so, thanks. But trying to get this method working for “Platform” and “6″ without a yawning gap in between ruins the spontaneity and fun somehow, but there’s nothing stopping you making your own audio files yourself as we did in that Siri tutorial called Apple iOS Siri Audio Commentary Tutorial and take the HTML and Javascript code you could call splice_audio.html from today, and go and make your own web application? Now, is there? Huh?

Try a live run or perhaps some more Siri cakes?!

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in Event-Driven Programming, Tutorials, eLearning | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

HTML5 Web Audio Mobile Tutorial

HTML5 Web Audio Mobile Tutorial

HTML5 Web Audio Mobile Tutorial

There is another two pronged improvement approach again today building on HTML5 Web Audio Overlay Tutorial‘s two pronged approach to the previous two pronged approach … which makes for a great fork for spaghetti but we digress … the prongs today being …

  • first, and like yesterday, allow for clientside HTML to do what serverside PHP usually does for us … handle large amounts of data as PHP can do using its $_POST[] approach … we’re still calling “Overlay Iframe Remembering” … and add to …
    1. child iframe src= mode of use … but also with, new to today …
    2. child iframe srcdoc= mode of use

    … because (am not absolutely sure why as yet but) it solves the problem with …
    … non-mobile/Safari/fill in “Audio Content” form/including a Duration/click “Web Audio Run” button …
    … didn’t automatically start any audio, though other non-mobile web browsers do …
    … and as you may imagine this needs some delimitation explanations that show below

    function takealook(fo) {
    var noneed=true;
    var htmlis='';
    var nsuffix='';
    if (document.getElementById('url1').value.length > 500) { noneed=false; }
    if (document.getElementById('url2').value.length > 500) { noneed=false; }
    if (document.getElementById('url3').value.length > 500) { noneed=false; }
    if (document.getElementById('url4').value.length > 500) { noneed=false; }
    if (document.getElementById('durationget').value.length > 0) { nsuffix='&notoka=secret'; noneed=false; } else { isrc=' src='; }
    if (source_valid()) {
    if (noneed) { return true; }
    if (isrc == ' srcdoc=') {
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    document.getElementById('huhb').style.display='inline-block';
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    } else {
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    }
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='1.0'; }
    document.getElementById('myi').srcdoc='<!doctype html><html><head>' + document.head.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</head><body>' + document.body.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</body></html>';
    } else {
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='0.2'; }
    document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "'></iframe>";
    }
    } else {
    if (notoka.trim().toLowerCase() == 'secret') { noneed=false; }
    if (noneed) { return true; }
    if (isrc == ' srcdoc=') {
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
    document.getElementById('huhb').style.display='inline-block';
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    } else {
    document.getElementById('diframe').innerHTML="<iframe id=myi style='opacity:1.0;position:absolute;top:0px;left:0px;z-index:-" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' srcdoc=></iframe>";
    }
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='1.0'; }
    document.getElementById('myi').srcdoc='<!doctype html><html><head>' + document.head.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</head><body>' + document.body.innerHTML.replace(/document\.URL/g,"'" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'").replace(/\'0\.2\'/g,"'1.0'") + '</body></html>';
    } else {
    if (documentURL.indexOf('#') == -1) { document.getElementById('divbody').style.opacity='0.2'; }
    document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + documentURL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'></iframe>";
    }
    }
    return false;
    }

    … adding another option to “Overlay Iframe Remembering” types of solutions, we figure … cute in the sense that all this is clientside HTML/Javascript/CSS

  • … as per these interim changes

  • mobile platform considerations (in our tests of iOS iPad and iPhone) …
    1. allowing for a button press “touch” event (“touchstart” for us, but read somewhere that they liked “touchend”) to trigger the AudioContext setup
    2. taking away the “capture” property of our browser buttons so that the mobile platform user can browse for an existant media file or capture that media
    3. we try to allow video media to be played in that video element should the user choose a video media file as their audio media choice which tends to be the way for the “capture” property of a mobile user input type=file browser button

    … as per these changes

Did you get from the code snippets how this “Overlay Iframe Remembering” works by storing the large amounts of data in an overlayed “layer” of webpage, both webpage layers “clientside” by nature and available datawise to each other in a parent/child (layer1WebpageParent/layer2OverlayedIframeWebpageChild) arrangement, that iframe being populated via a src= scenario getting the “overlay” to populate itself or help that “overlay” along (perhaps it’s that period after lunch digesting the caviar?!) by supplying its content via srcdoc= usage? Again, perhaps it is easier to see it in action at this live run link.

You can also see this play out at WordPress 4.1.1′s HTML5 Web Audio Mobile Tutorial.


Previous relevant HTML5 Web Audio Overlay Tutorial is shown below.

HTML5 Web Audio Overlay Tutorial

HTML5 Web Audio Overlay Tutorial

Again, in building on yesterday’s HTML5 Web Audio Duration Tutorial two pronged approach, we have another one today, those approaches involving …

  • first allow for clientside HTML to do what serverside PHP usually does for us … handle large amounts of data as PHP can do using its $_POST[] approach … we’re going to call “Overlay Iframe Remembering” … whereby the
    1. navigational form gets a new id=waform onsubmit=’return takealook(this);’

      function takealook(fo) {
      var noneed=true;
      var nsuffix='';
      if (document.getElementById('url1').value.length > 500) { noneed=false; }
      if (document.getElementById('url2').value.length > 500) { noneed=false; }
      if (document.getElementById('url3').value.length > 500) { noneed=false; }
      if (document.getElementById('url4').value.length > 500) { noneed=false; }
      if (document.getElementById('durationget').value.length > 0) { nsuffix='&notoka=secret'; noneed=false; }
      if (source_valid()) {
      if (noneed) { return true; }
      document.getElementById('divbody').style.opacity='0.2';
      document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + document.URL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "'></iframe>";
      } else {
      if (notoka.trim().toLowerCase() == 'secret') { noneed=false; }
      if (noneed) { return true; }
      document.getElementById('divbody').style.opacity='0.2';
      document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + document.URL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'></iframe>";
      }
      return false;
      }

      … where if noneed ends up as false we perform some overlay favourites … building on …
    2. textbox HTML design changes from …

      <input style='display:inline-block;background-color:#f0f0f0;' type=text name=url2 title='Audio URL 2' value='./one_to_fiftynine.m4a'></input>

      … to …

      <input data-id=url2 onblur="document.getElementById(this.getAttribute('data-id')).value=this.value;" style='display:inline-block;background-color:#f0f0f0;' type=text name=url2 title='Audio URL 2' value='./one_to_fiftynine.m4a'></input>
      <div id=dform style='display:none;'></div>
      <div id=diframe></div>

      … that makes the document.body onload logic below be useful for the context of that onsubmit form logic above …

    3. document.getElementById('dform').innerHTML=document.getElementById('waform').innerHTML.replace(/\ data\-id=/g, ' id=').replace(/\ onblur=/g, ' data-onblur=');

    … as per these interim changes … then in the context of those large amounts of data possibly coming from …

  • like with the recent Video via Canvas File API Tutorial

    … we see for web applications, two primary source “partitions”, those being …

    • around the “net” (in the server wooooooorrrrrlllllld, in the public areas of the Internet, which are not in “the dark web”, that is) via an absolute URL (to the same domain or beyond) and/or relative URL (in relation to the URL “home” place on the web server of the same domain as where you launched it … which we catered for yesterday, though quietly we’d have allowed absolute URLs too, it’s just that cross-domain restrictions make us shy about publicizing that) … versus …
    • on the client computer (or device)

    … and, yes, for all those who guessed we’d try to cater for image and/or video data coming from this client source, you are correct …

    … media file browsing, via the wonderful File API, additional functionality as per these changes to web_audio.htm

Did you get from the code snippets how this “Overlay Iframe Remembering” works by storing the large amounts of data in an overlayed “layer” of webpage, both webpage layers “clientside” by nature and available datawise to each other in a parent/child (layer1WebpageParent/layer2OverlayedIframeWebpageChild) arrangement? Perhaps it is easier to see it in action at this live run link.


Previous relevant HTML5 Web Audio Duration Tutorial is shown below.

HTML5 Web Audio Duration Tutorial

HTML5 Web Audio Duration Tutorial

In building on yesterday’s HTML5 Web Audio Primer Tutorial we adopted a two pronged approach, that being …

  • first allow for the reduction of use of Javascript eval involving statements that assign values (ie. eval statement contains an “=” sign) (but will continue on with it helping out with some mathematics) … in favour of using arrays instead …

    var source=[];
    var sourcep=[];
    var notoka=location.search.split('notoka=')[1] ? (" " + decodeURIComponent(location.search.split('notoka=')[1]).split('&')[0]) : "";
    if (notoka == "") {
    for (var iii=1; iii<=4; iii++) {
    source.push(null);
    sourcep.push(false);
    }
    }

    for (var ii=5; ii<500; ii++) {
    if (source_valid()) { //if (typeof source !== 'undefined') {
    source.push(null);
    if (sourcep_valid()) { //if (typeof sourcep !== 'undefined') {
    sourcep.push(false);
    }
    } else {
    eval("var source" + ii + " = null;"); //context.createBufferSource();
    }
    }

    function source_valid() {
    if (typeof source !== 'undefined') {
    if (source.length >= 4) { return true; }
    }
    return false;
    }

    function sourcep_valid() {
    if (typeof sourcep !== 'undefined') {
    if (sourcep.length >= 4) { return true; }
    }
    return false;
    }

    … as per these interim changes … then go on to …
  • other changes as per …
    1. add duration as a very useful third parameter …

      Seconds … optionally follow by ; sets of ButtonNumber1to4:StartingAt=[0]:StartingIn=[0]:Loop=[false]:Duration=[0]

      … to Web Audio class “start” method … the use of which is the final piece in a puzzle that allows us to …

    2. schedule an execution run of button presses to play Audio ahead of time … because with a duration we can piggy back the audios (so be able to synchronize our efforts better) … and we also …
    3. open the Audio content up to the “server” woooorrrrlllld (via the “reveal” friendly HTML details/summary element combination) by allowing the user to specify their own 4 audio URLs (and one synchronized video one) along with 4 button labels presented in an HTML form method=GET to renavigate with this user supplied content back to the body onload scenario

    … to arrive at this finally changed web_audio.html

… that we welcome you to try at this live run link.


Previous relevant HTML5 Web Audio Primer Tutorial is shown below.

HTML5 Web Audio Primer Tutorial

HTML5 Web Audio Primer Tutorial

As an audio/video synchronization alternative to the techniques used in Mac OS X Text to English Speech Primer Tutorial, today, we involve the great Web Audio API functionality introduced with HTML5 and “starring” in HTML5 Rocks’s Getting Started with Web Audio API great advice on this subject.

We start down this long road, we suspect, being able to …

  • set up the audio playing of four separate audio sources (some featuring in Spliced Audio Number Genericization Tutorial) … where …
  • one, with its default configuration, synchronizes with an apt video media play
  • allow looping
  • allow for “start at” seconds
  • allow for “start in” seconds

… on a first draft HTML and Javascript and CSS web_audio.html live run link.

We hope you hang around on our road trip with this topic.


Previous relevant Spliced Audio Number Genericization Tutorial is shown below.

Spliced Audio Number Genericization Tutorial

Spliced Audio Number Genericization Tutorial

If you’ve completed a successful “proof of concept” stage to a project, it can be tempting at this early stage, even before applying it to the specific intended software integration target, to consider ways to “genericize” that application, and so it is for us, here, with yesterday’s Spliced Audio Number Announcements Tutorial, as shown below, that we feel this could come along to be applied for other purposes. We have no doubt the exercise of doing this serves at least three good purposes …

  1. slow it down a bit before rushing to “software integrate”, as patience can be good here
  2. learn more about what’s possible, and what isn’t, to do with the scope of your planning and thinking
  3. other application may, too, benefit from this “early days” “genericization” of a potential plugin component piece of HTML and Javascript code

In this early stage of “genericization” thoughts, we think that with our project we want to keep intact these ideas …

  • there’ll be up to 3 “columns” of ideas to piece together an audio message from its constituent parts, like with those Sydney train platform announcements we’ve talked about before
  • there’ll be 3 soundfiles mapped to most of the usage regarding these 3 “columns”
  • there’ll be the possibility for silence to be an option in each “column”
  • there’ll be the mechanism by which the user can define their own “Title” and “Subtitle” and 3 “column” headings themselves
  • there’ll be 2 leftmost “columns” that define counting numbers whose ranges can be defined by the user, where, for now, the timing of sounds goes that sounds start at [number].4 seconds and plays for 1.5 seconds
  • there’ll be minimum and maximum special case entries available for user definition in the leftmost “column” that calls on the fourth soundfile, where, for now, the timing of sounds goes that sounds start at 0 seconds and 2 seconds respectively and plays for 2 seconds
  • there’ll be a minimum special case entry available for user definition in the middle “column” that calls on a sound from the third soundfile, where, for now, the timing of sounds goes that sounds start at 3.1 seconds and plays for 1.8 seconds
  • there’ll be 1 rightmost “column” that can have three entries defined

And that is as far as we go with “genericizations”, at this stage, with our project.

In our experience, what Javascript function is a big friend of “genericization”? We’d say Javascript eval function is our favourite here.

It’s funny to think that our HTML and Javascript and CSS audio_1_59.htm, vastly changed from yesterday as per this link, functions exactly the same in its default form, and you can continue to enjoy its accompanying default live run link, but it can, through the use of complex URLs (only, just at this early stage) be made to look quite different, with the same code, as you can see with this complex live run.

So, in summary, this leaves us with many more “live run” options, those being …


Previous relevant Spliced Audio Number Announcements Tutorial is shown below.

Spliced Audio Number Announcements Tutorial

Spliced Audio Number Announcements Tutorial

We’ve got a “proof of concept” tutorial for you today, because we’ve got an idea for something, as we said some time back at Splicing Audio Primer Tutorial

The first was a simulation of those Sydney train public announcements where the timbre of the voice differs a bit between when they say “Platform” and the “6″ (or whatever platform it is) that follows. This is pretty obviously computer audio “bits” strung together … and wanted to get somewhere towards that capability.

… that will probably be blimmin’ obvious to you should you be a regular recent reader at this blog.

Do you remember what we, here, see as a characteristic of “proof of concept” at WordPress Is Mentioned By Navigation Primer Tutorial

To us, a “proof of concept” is not much use if it is as involved as what it is trying to prove

… and do you remember how we observed at Windows 10 Cortana Primer Tutorial

… because you can work Cortana without the voice recognition part, if you like, or if you have the urge to run for the nearest cupboard before being caught talking into a computer (microphone)

? Well, today, we’d like you to be patient about the lack of audio quality with our home made audio (see excuse 2 above) bit we are mainly interested in “proof of concept” issues (see excuse 1 above).

So what “ingredients” went into this “Audio Numbers” web application? As we did in Apple iOS Siri Audio Commentary Tutorial

HTML audio elements that allow for an audio commentary of the 9 “subimages” … the content for which is derived on a Mac OS X by QuickTime Player‘s Audio Recording functionality, which we last talked about at this blog with QuickTime Player Video Flickr Share Primer Tutorial

… we do again today. On doing this we realized the recordings were not loud enough, so started down the road of R&D on this and got to the very useful Increase Audio Volume website tool that helped a little, and this manifests itself if/when you run our live run today, that if you pick “minute” numbers less than or equal to “30″ they are a better better in volume than others, with the “Trial Version” of this software helping you out with “half file” enhancements. “Proof of concept”, remember? And so the aspects you’d change for your own purposes, are …

  1. the content (and more than likely, names) of audio files mentioned below …
  2. arrays of audio files …

    var audiomedia=["one_to_fiftynine.m4a","past_quarterto.m4a","am_pm.m4a"];
    var midmedia=["midnight_midday.m4a"];

    … and it should be noted here, that a separate file for each unique sound, could be a good alternative design, and would stop failures to do with the slow loading speed of the home web server causing audio misfiring … and would mean, below, that “astart” is always “0″ and “delay” should be set to the audio object’s duration parameter
  3. variables “astart” and “delay” as per example …

    } else if (thingis.toLowerCase().indexOf('clock') != -1) {
    oaudio.src=audiomedia[i];
    astart=eval("3.1");
    delay=1.8;


    … where “astart” reflects a start of play value and “delay” represents a length of play scenario in seconds, as we got going in the past when we presented Spliced Audio/Video Overlay Position Tutorial as shown below, where you can read more about the HTML5 Audio objects we used with this “proof of concept” project

Please note with the recording of “one_to_fiftynine.m4a”, that records numbers from 1 to 59, via QuickTime Player, we relied on the recording timer, to time our number recording with a second of duration to make the HTML and Javascript coding a lot easier!

So, as you can see, this is “proof of concept” preparation, and of you want to try it yourself, perhaps you’d like to start with a skeleton of today’s HTML and Javascript audio_1_59.html as a starting point?!


Previous relevant Spliced Audio/Video Overlay Position Tutorial is shown below.

Spliced Audio/Video Overlay Position Tutorial

Spliced Audio/Video Overlay Position Tutorial

Today we’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 Spliced Audio/Video/Image Overlay Tutorial as shown below, here, and that can take any of the forms …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses
  • video
  • image … and background image for webpage

… for either of the modes of use, that being …

  • discrete … or “Optional”
  • synchronized … or “Overlay”

… all like yesterday, but this time we allow you to “seek” or position yourself within the audio and/or video media. We still all “fit” 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 “just clientside” or “just client looking, plus, perhaps, Javascript serverside code” (ala Node.js) or perhaps “Javascript clientside client code, plus Ajax methodologies”. In any case, it does simplify design to not have to involve a serverside language like PHP … but please don’t think we do not encourage you to learn a serverside language like PHP.

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 autoplay property for a media object is frowned upon regarding these mobile devices … for reasons of “runaway” unknown charge issues as you can read at this useful link … thanks … and where they quote from Apple …

“Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.

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.” – Apple documentation.

A link we’d like to thank regarding the new “seek” or media positioning functionality is this one … thanks.

Also, today, for that sense of symmetry, we start to create the Audio objects from now on using …


document.createElement("AUDIO");

… as this acts the same as new Audio() to the best of our testing.

For your own testing purposes, if you know of some media URLs to try, please feel free to try the “overlay” of media ideas inherent in today’s splice_audio.htm live run. For today’s cake “prepared before the program” we’ve again channelled the GoToMeeting Primer Tutorial which had separate audio (albeit very short … sorry … but you get the gist) and video … 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 …

We think, though, that we will be back regarding this interesting topic, and hope we can improve mobile device functionality.


Previous relevant Spliced Audio/Video/Image Overlay Tutorial is shown below.

Spliced Audio/Video/Image Overlay Tutorial

Spliced Audio/Video/Image Overlay Tutorial

Today we’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 that can take any of the forms …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses
  • video
  • image … and background image for webpage

… for either of the modes of use, that being …

  • discrete … or “Optional”
  • synchronized … or “Overlay”

The major new change here, apart from the ability to play two media files at once in our synchronized (or “overlayed”) way, is the additional functionality for Video, and we proceeded thinking there’d be an Javascript DOM OOPy method like … var xv = new Video(); … to allow for this, but found out from this useful link … thanks … that an alternative approach for Video object creation, on the fly, is …


var xv = document.createElement("VIDEO");

… curiously. And it took us a while to tweak to the idea that to have a “display home” for the video on the webpage we needed to …


document.body.appendChild(xv);

… which means you need to take care of any HTML form data already filled in, that isn’t that form’s default, when you effectively “refresh” the webpage like this. Essentially though, media on the fly is a modern approach possible fairly easily with just clientside code. Cute, huh?!

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 synchronization of media themed blog postings of the past, which you may want to read more, for this type of approach.

In the meantime, if you know of some media URLs to try, please feel free to try the “overlay” of media ideas inherent in today’s splice_audio.htm live run. We’ve thought of this one. Do you remember how the GoToMeeting Primer Tutorial had separate audio (albeit very short … sorry … but you get the gist) and video … 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 …

We think, though, that we will be back regarding this interesting topic.


Previous relevant Splicing Audio Primer Tutorial is shown below.

Spliced Audio Primer Tutorial

Splicing Audio Primer Tutorial

Today we’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 …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses

Do you remember, perhaps, when we did a series of blog posts regarding the YouTube API, that finished, so far, with YouTube API Iframe Synchronicity Resizing Tutorial? Well, a lot of what we do today is doing similar sorts of functionalities but just for Audio objects in HTML5. For help on this we’d like to thank this great link. So rather than have HTML audio elements in our HTML, as we first shaped to do, we’ve taken the great advice from this link, and gone all Javascript DOM OOPy on the task, to splice audio media together.

There were three thought patterns going on here for me.

  • The first was a simulation of those Sydney train public announcements where the timbre of the voice differs a bit between when they say “Platform” and the “6″ (or whatever platform it is) that follows. This is pretty obviously computer audio “bits” strung together … and wanted to get somewhere towards that capability.
  • The second one relates to presentation ideas following up on that “onmouseover” Siri audio enhanced presentation we did at Apple iOS Siri Audio Commentary Tutorial. Well, we think we can do something related to that here, and we’ve prepared this cake audio presentation here, for us, in advance … really, there’s no need for thanks.
  • The third concerns our eternal media file synchronization quests here at this blog that you may find of interest we hope, here.

Also of interest over time has been the Google Translate Text to Speech functionality that used to be very open, and we now only use around here in an interactive “user clicks” way … but we still use it, because it is very useful, so, thanks. But trying to get this method working for “Platform” and “6″ without a yawning gap in between ruins the spontaneity and fun somehow, but there’s nothing stopping you making your own audio files yourself as we did in that Siri tutorial called Apple iOS Siri Audio Commentary Tutorial and take the HTML and Javascript code you could call splice_audio.html from today, and go and make your own web application? Now, is there? Huh?

Try a live run or perhaps some more Siri cakes?!

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in Event-Driven Programming, Tutorials, eLearning, iOS | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

HTML5 Web Audio Overlay Tutorial

HTML5 Web Audio Overlay Tutorial

HTML5 Web Audio Overlay Tutorial

Again, in building on yesterday’s HTML5 Web Audio Duration Tutorial two pronged approach, we have another one today, those approaches involving …

  • first allow for clientside HTML to do what serverside PHP usually does for us … handle large amounts of data as PHP can do using its $_POST[] approach … we’re going to call “Overlay Iframe Remembering” … whereby the
    1. navigational form gets a new id=waform onsubmit=’return takealook(this);’

      function takealook(fo) {
      var noneed=true;
      var nsuffix='';
      if (document.getElementById('url1').value.length > 500) { noneed=false; }
      if (document.getElementById('url2').value.length > 500) { noneed=false; }
      if (document.getElementById('url3').value.length > 500) { noneed=false; }
      if (document.getElementById('url4').value.length > 500) { noneed=false; }
      if (document.getElementById('durationget').value.length > 0) { nsuffix='&notoka=secret'; noneed=false; }
      if (source_valid()) {
      if (noneed) { return true; }
      document.getElementById('divbody').style.opacity='0.2';
      document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + document.URL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + nsuffix + "'></iframe>";
      } else {
      if (notoka.trim().toLowerCase() == 'secret') { noneed=false; }
      if (noneed) { return true; }
      document.getElementById('divbody').style.opacity='0.2';
      document.getElementById('diframe').innerHTML="<iframe style='position:absolute;top:0px;left:0px;z-index:" + eval(1 + eval('0' + zi)) + ";width:100%;height:100vh;' src='" + document.URL.split('#')[0].split('?')[0] + "?zi=" + eval(1 + eval('0' + zi)) + "&notoka=" + encodeURIComponent(notoka.trim()) + "'></iframe>";
      }
      return false;
      }

      … where if noneed ends up as false we perform some overlay favourites … building on …
    2. textbox HTML design changes from …

      <input style='display:inline-block;background-color:#f0f0f0;' type=text name=url2 title='Audio URL 2' value='./one_to_fiftynine.m4a'></input>

      … to …

      <input data-id=url2 onblur="document.getElementById(this.getAttribute('data-id')).value=this.value;" style='display:inline-block;background-color:#f0f0f0;' type=text name=url2 title='Audio URL 2' value='./one_to_fiftynine.m4a'></input>
      <div id=dform style='display:none;'></div>
      <div id=diframe></div>

      … that makes the document.body onload logic below be useful for the context of that onsubmit form logic above …

    3. document.getElementById('dform').innerHTML=document.getElementById('waform').innerHTML.replace(/\ data\-id=/g, ' id=').replace(/\ onblur=/g, ' data-onblur=');

    … as per these interim changes … then in the context of those large amounts of data possibly coming from …

  • like with the recent Video via Canvas File API Tutorial

    … we see for web applications, two primary source “partitions”, those being …

    • around the “net” (in the server wooooooorrrrrlllllld, in the public areas of the Internet, which are not in “the dark web”, that is) via an absolute URL (to the same domain or beyond) and/or relative URL (in relation to the URL “home” place on the web server of the same domain as where you launched it … which we catered for yesterday, though quietly we’d have allowed absolute URLs too, it’s just that cross-domain restrictions make us shy about publicizing that) … versus …
    • on the client computer (or device)

    … and, yes, for all those who guessed we’d try to cater for image and/or video data coming from this client source, you are correct …

    … media file browsing, via the wonderful File API, additional functionality as per these changes to web_audio.htm

Did you get from the code snippets how this “Overlay Iframe Remembering” works by storing the large amounts of data in an overlayed “layer” of webpage, both webpage layers “clientside” by nature and available datawise to each other in a parent/child (layer1WebpageParent/layer2OverlayedIframeWebpageChild) arrangement? Perhaps it is easier to see it in action at this live run link.

You can also see this play out at WordPress 4.1.1′s HTML5 Web Audio Overlay Tutorial.


Previous relevant HTML5 Web Audio Duration Tutorial is shown below.

HTML5 Web Audio Duration Tutorial

HTML5 Web Audio Duration Tutorial

In building on yesterday’s HTML5 Web Audio Primer Tutorial we adopted a two pronged approach, that being …

  • first allow for the reduction of use of Javascript eval involving statements that assign values (ie. eval statement contains an “=” sign) (but will continue on with it helping out with some mathematics) … in favour of using arrays instead …

    var source=[];
    var sourcep=[];
    var notoka=location.search.split('notoka=')[1] ? (" " + decodeURIComponent(location.search.split('notoka=')[1]).split('&')[0]) : "";
    if (notoka == "") {
    for (var iii=1; iii<=4; iii++) {
    source.push(null);
    sourcep.push(false);
    }
    }

    for (var ii=5; ii<500; ii++) {
    if (source_valid()) { //if (typeof source !== 'undefined') {
    source.push(null);
    if (sourcep_valid()) { //if (typeof sourcep !== 'undefined') {
    sourcep.push(false);
    }
    } else {
    eval("var source" + ii + " = null;"); //context.createBufferSource();
    }
    }

    function source_valid() {
    if (typeof source !== 'undefined') {
    if (source.length >= 4) { return true; }
    }
    return false;
    }

    function sourcep_valid() {
    if (typeof sourcep !== 'undefined') {
    if (sourcep.length >= 4) { return true; }
    }
    return false;
    }

    … as per these interim changes … then go on to …
  • other changes as per …
    1. add duration as a very useful third parameter …

      Seconds … optionally follow by ; sets of ButtonNumber1to4:StartingAt=[0]:StartingIn=[0]:Loop=[false]:Duration=[0]

      … to Web Audio class “start” method … the use of which is the final piece in a puzzle that allows us to …

    2. schedule an execution run of button presses to play Audio ahead of time … because with a duration we can piggy back the audios (so be able to synchronize our efforts better) … and we also …
    3. open the Audio content up to the “server” woooorrrrlllld (via the “reveal” friendly HTML details/summary element combination) by allowing the user to specify their own 4 audio URLs (and one synchronized video one) along with 4 button labels presented in an HTML form method=GET to renavigate with this user supplied content back to the body onload scenario

    … to arrive at this finally changed web_audio.html

… that we welcome you to try at this live run link.


Previous relevant HTML5 Web Audio Primer Tutorial is shown below.

HTML5 Web Audio Primer Tutorial

HTML5 Web Audio Primer Tutorial

As an audio/video synchronization alternative to the techniques used in Mac OS X Text to English Speech Primer Tutorial, today, we involve the great Web Audio API functionality introduced with HTML5 and “starring” in HTML5 Rocks’s Getting Started with Web Audio API great advice on this subject.

We start down this long road, we suspect, being able to …

  • set up the audio playing of four separate audio sources (some featuring in Spliced Audio Number Genericization Tutorial) … where …
  • one, with its default configuration, synchronizes with an apt video media play
  • allow looping
  • allow for “start at” seconds
  • allow for “start in” seconds

… on a first draft HTML and Javascript and CSS web_audio.html live run link.

We hope you hang around on our road trip with this topic.


Previous relevant Spliced Audio Number Genericization Tutorial is shown below.

Spliced Audio Number Genericization Tutorial

Spliced Audio Number Genericization Tutorial

If you’ve completed a successful “proof of concept” stage to a project, it can be tempting at this early stage, even before applying it to the specific intended software integration target, to consider ways to “genericize” that application, and so it is for us, here, with yesterday’s Spliced Audio Number Announcements Tutorial, as shown below, that we feel this could come along to be applied for other purposes. We have no doubt the exercise of doing this serves at least three good purposes …

  1. slow it down a bit before rushing to “software integrate”, as patience can be good here
  2. learn more about what’s possible, and what isn’t, to do with the scope of your planning and thinking
  3. other application may, too, benefit from this “early days” “genericization” of a potential plugin component piece of HTML and Javascript code

In this early stage of “genericization” thoughts, we think that with our project we want to keep intact these ideas …

  • there’ll be up to 3 “columns” of ideas to piece together an audio message from its constituent parts, like with those Sydney train platform announcements we’ve talked about before
  • there’ll be 3 soundfiles mapped to most of the usage regarding these 3 “columns”
  • there’ll be the possibility for silence to be an option in each “column”
  • there’ll be the mechanism by which the user can define their own “Title” and “Subtitle” and 3 “column” headings themselves
  • there’ll be 2 leftmost “columns” that define counting numbers whose ranges can be defined by the user, where, for now, the timing of sounds goes that sounds start at [number].4 seconds and plays for 1.5 seconds
  • there’ll be minimum and maximum special case entries available for user definition in the leftmost “column” that calls on the fourth soundfile, where, for now, the timing of sounds goes that sounds start at 0 seconds and 2 seconds respectively and plays for 2 seconds
  • there’ll be a minimum special case entry available for user definition in the middle “column” that calls on a sound from the third soundfile, where, for now, the timing of sounds goes that sounds start at 3.1 seconds and plays for 1.8 seconds
  • there’ll be 1 rightmost “column” that can have three entries defined

And that is as far as we go with “genericizations”, at this stage, with our project.

In our experience, what Javascript function is a big friend of “genericization”? We’d say Javascript eval function is our favourite here.

It’s funny to think that our HTML and Javascript and CSS audio_1_59.htm, vastly changed from yesterday as per this link, functions exactly the same in its default form, and you can continue to enjoy its accompanying default live run link, but it can, through the use of complex URLs (only, just at this early stage) be made to look quite different, with the same code, as you can see with this complex live run.

So, in summary, this leaves us with many more “live run” options, those being …


Previous relevant Spliced Audio Number Announcements Tutorial is shown below.

Spliced Audio Number Announcements Tutorial

Spliced Audio Number Announcements Tutorial

We’ve got a “proof of concept” tutorial for you today, because we’ve got an idea for something, as we said some time back at Splicing Audio Primer Tutorial

The first was a simulation of those Sydney train public announcements where the timbre of the voice differs a bit between when they say “Platform” and the “6″ (or whatever platform it is) that follows. This is pretty obviously computer audio “bits” strung together … and wanted to get somewhere towards that capability.

… that will probably be blimmin’ obvious to you should you be a regular recent reader at this blog.

Do you remember what we, here, see as a characteristic of “proof of concept” at WordPress Is Mentioned By Navigation Primer Tutorial

To us, a “proof of concept” is not much use if it is as involved as what it is trying to prove

… and do you remember how we observed at Windows 10 Cortana Primer Tutorial

… because you can work Cortana without the voice recognition part, if you like, or if you have the urge to run for the nearest cupboard before being caught talking into a computer (microphone)

? Well, today, we’d like you to be patient about the lack of audio quality with our home made audio (see excuse 2 above) bit we are mainly interested in “proof of concept” issues (see excuse 1 above).

So what “ingredients” went into this “Audio Numbers” web application? As we did in Apple iOS Siri Audio Commentary Tutorial

HTML audio elements that allow for an audio commentary of the 9 “subimages” … the content for which is derived on a Mac OS X by QuickTime Player‘s Audio Recording functionality, which we last talked about at this blog with QuickTime Player Video Flickr Share Primer Tutorial

… we do again today. On doing this we realized the recordings were not loud enough, so started down the road of R&D on this and got to the very useful Increase Audio Volume website tool that helped a little, and this manifests itself if/when you run our live run today, that if you pick “minute” numbers less than or equal to “30″ they are a better better in volume than others, with the “Trial Version” of this software helping you out with “half file” enhancements. “Proof of concept”, remember? And so the aspects you’d change for your own purposes, are …

  1. the content (and more than likely, names) of audio files mentioned below …
  2. arrays of audio files …

    var audiomedia=["one_to_fiftynine.m4a","past_quarterto.m4a","am_pm.m4a"];
    var midmedia=["midnight_midday.m4a"];

    … and it should be noted here, that a separate file for each unique sound, could be a good alternative design, and would stop failures to do with the slow loading speed of the home web server causing audio misfiring … and would mean, below, that “astart” is always “0″ and “delay” should be set to the audio object’s duration parameter
  3. variables “astart” and “delay” as per example …

    } else if (thingis.toLowerCase().indexOf('clock') != -1) {
    oaudio.src=audiomedia[i];
    astart=eval("3.1");
    delay=1.8;


    … where “astart” reflects a start of play value and “delay” represents a length of play scenario in seconds, as we got going in the past when we presented Spliced Audio/Video Overlay Position Tutorial as shown below, where you can read more about the HTML5 Audio objects we used with this “proof of concept” project

Please note with the recording of “one_to_fiftynine.m4a”, that records numbers from 1 to 59, via QuickTime Player, we relied on the recording timer, to time our number recording with a second of duration to make the HTML and Javascript coding a lot easier!

So, as you can see, this is “proof of concept” preparation, and of you want to try it yourself, perhaps you’d like to start with a skeleton of today’s HTML and Javascript audio_1_59.html as a starting point?!


Previous relevant Spliced Audio/Video Overlay Position Tutorial is shown below.

Spliced Audio/Video Overlay Position Tutorial

Spliced Audio/Video Overlay Position Tutorial

Today we’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 Spliced Audio/Video/Image Overlay Tutorial as shown below, here, and that can take any of the forms …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses
  • video
  • image … and background image for webpage

… for either of the modes of use, that being …

  • discrete … or “Optional”
  • synchronized … or “Overlay”

… all like yesterday, but this time we allow you to “seek” or position yourself within the audio and/or video media. We still all “fit” 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 “just clientside” or “just client looking, plus, perhaps, Javascript serverside code” (ala Node.js) or perhaps “Javascript clientside client code, plus Ajax methodologies”. In any case, it does simplify design to not have to involve a serverside language like PHP … but please don’t think we do not encourage you to learn a serverside language like PHP.

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 autoplay property for a media object is frowned upon regarding these mobile devices … for reasons of “runaway” unknown charge issues as you can read at this useful link … thanks … and where they quote from Apple …

“Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.

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.” – Apple documentation.

A link we’d like to thank regarding the new “seek” or media positioning functionality is this one … thanks.

Also, today, for that sense of symmetry, we start to create the Audio objects from now on using …


document.createElement("AUDIO");

… as this acts the same as new Audio() to the best of our testing.

For your own testing purposes, if you know of some media URLs to try, please feel free to try the “overlay” of media ideas inherent in today’s splice_audio.htm live run. For today’s cake “prepared before the program” we’ve again channelled the GoToMeeting Primer Tutorial which had separate audio (albeit very short … sorry … but you get the gist) and video … 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 …

We think, though, that we will be back regarding this interesting topic, and hope we can improve mobile device functionality.


Previous relevant Spliced Audio/Video/Image Overlay Tutorial is shown below.

Spliced Audio/Video/Image Overlay Tutorial

Spliced Audio/Video/Image Overlay Tutorial

Today we’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 that can take any of the forms …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses
  • video
  • image … and background image for webpage

… for either of the modes of use, that being …

  • discrete … or “Optional”
  • synchronized … or “Overlay”

The major new change here, apart from the ability to play two media files at once in our synchronized (or “overlayed”) way, is the additional functionality for Video, and we proceeded thinking there’d be an Javascript DOM OOPy method like … var xv = new Video(); … to allow for this, but found out from this useful link … thanks … that an alternative approach for Video object creation, on the fly, is …


var xv = document.createElement("VIDEO");

… curiously. And it took us a while to tweak to the idea that to have a “display home” for the video on the webpage we needed to …


document.body.appendChild(xv);

… which means you need to take care of any HTML form data already filled in, that isn’t that form’s default, when you effectively “refresh” the webpage like this. Essentially though, media on the fly is a modern approach possible fairly easily with just clientside code. Cute, huh?!

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 synchronization of media themed blog postings of the past, which you may want to read more, for this type of approach.

In the meantime, if you know of some media URLs to try, please feel free to try the “overlay” of media ideas inherent in today’s splice_audio.htm live run. We’ve thought of this one. Do you remember how the GoToMeeting Primer Tutorial had separate audio (albeit very short … sorry … but you get the gist) and video … 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 …

We think, though, that we will be back regarding this interesting topic.


Previous relevant Splicing Audio Primer Tutorial is shown below.

Spliced Audio Primer Tutorial

Splicing Audio Primer Tutorial

Today we’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 …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses

Do you remember, perhaps, when we did a series of blog posts regarding the YouTube API, that finished, so far, with YouTube API Iframe Synchronicity Resizing Tutorial? Well, a lot of what we do today is doing similar sorts of functionalities but just for Audio objects in HTML5. For help on this we’d like to thank this great link. So rather than have HTML audio elements in our HTML, as we first shaped to do, we’ve taken the great advice from this link, and gone all Javascript DOM OOPy on the task, to splice audio media together.

There were three thought patterns going on here for me.

  • The first was a simulation of those Sydney train public announcements where the timbre of the voice differs a bit between when they say “Platform” and the “6″ (or whatever platform it is) that follows. This is pretty obviously computer audio “bits” strung together … and wanted to get somewhere towards that capability.
  • The second one relates to presentation ideas following up on that “onmouseover” Siri audio enhanced presentation we did at Apple iOS Siri Audio Commentary Tutorial. Well, we think we can do something related to that here, and we’ve prepared this cake audio presentation here, for us, in advance … really, there’s no need for thanks.
  • The third concerns our eternal media file synchronization quests here at this blog that you may find of interest we hope, here.

Also of interest over time has been the Google Translate Text to Speech functionality that used to be very open, and we now only use around here in an interactive “user clicks” way … but we still use it, because it is very useful, so, thanks. But trying to get this method working for “Platform” and “6″ without a yawning gap in between ruins the spontaneity and fun somehow, but there’s nothing stopping you making your own audio files yourself as we did in that Siri tutorial called Apple iOS Siri Audio Commentary Tutorial and take the HTML and Javascript code you could call splice_audio.html from today, and go and make your own web application? Now, is there? Huh?

Try a live run or perhaps some more Siri cakes?!

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in Event-Driven Programming, Tutorials, eLearning | Tagged , , , , , , , , , , , , , , , , , , , , , | Leave a comment

HTML5 Web Audio Duration Tutorial

HTML5 Web Audio Duration Tutorial

HTML5 Web Audio Duration Tutorial

In building on yesterday’s HTML5 Web Audio Primer Tutorial we adopted a two pronged approach, that being …

  • first allow for the reduction of use of Javascript eval involving statements that assign values (ie. eval statement contains an “=” sign) (but will continue on with it helping out with some mathematics) … in favour of using arrays instead …

    var source=[];
    var sourcep=[];
    var notoka=location.search.split('notoka=')[1] ? (" " + decodeURIComponent(location.search.split('notoka=')[1]).split('&')[0]) : "";
    if (notoka == "") {
    for (var iii=1; iii<=4; iii++) {
    source.push(null);
    sourcep.push(false);
    }
    }

    for (var ii=5; ii<500; ii++) {
    if (source_valid()) { //if (typeof source !== 'undefined') {
    source.push(null);
    if (sourcep_valid()) { //if (typeof sourcep !== 'undefined') {
    sourcep.push(false);
    }
    } else {
    eval("var source" + ii + " = null;"); //context.createBufferSource();
    }
    }

    function source_valid() {
    if (typeof source !== 'undefined') {
    if (source.length >= 4) { return true; }
    }
    return false;
    }

    function sourcep_valid() {
    if (typeof sourcep !== 'undefined') {
    if (sourcep.length >= 4) { return true; }
    }
    return false;
    }

    … as per these interim changes … then go on to …
  • other changes as per …
    1. add duration as a very useful third parameter …

      Seconds … optionally follow by ; sets of ButtonNumber1to4:StartingAt=[0]:StartingIn=[0]:Loop=[false]:Duration=[0]

      … to Web Audio class “start” method … the use of which is the final piece in a puzzle that allows us to …

    2. schedule an execution run of button presses to play Audio ahead of time … because with a duration we can piggy back the audios (so be able to synchronize our efforts better) … and we also …
    3. open the Audio content up to the “server” woooorrrrlllld (via the “reveal” friendly HTML details/summary element combination) by allowing the user to specify their own 4 audio URLs (and one synchronized video one) along with 4 button labels presented in an HTML form method=GET to renavigate with this user supplied content back to the body onload scenario

    … to arrive at this finally changed web_audio.html

… that we welcome you to try at this live run link.

You can also see this play out at WordPress 4.1.1′s HTML5 Web Audio Duration Tutorial.


Previous relevant HTML5 Web Audio Primer Tutorial is shown below.

HTML5 Web Audio Primer Tutorial

HTML5 Web Audio Primer Tutorial

As an audio/video synchronization alternative to the techniques used in Mac OS X Text to English Speech Primer Tutorial, today, we involve the great Web Audio API functionality introduced with HTML5 and “starring” in HTML5 Rocks’s Getting Started with Web Audio API great advice on this subject.

We start down this long road, we suspect, being able to …

  • set up the audio playing of four separate audio sources (some featuring in Spliced Audio Number Genericization Tutorial) … where …
  • one, with its default configuration, synchronizes with an apt video media play
  • allow looping
  • allow for “start at” seconds
  • allow for “start in” seconds

… on a first draft HTML and Javascript and CSS web_audio.html live run link.

We hope you hang around on our road trip with this topic.


Previous relevant Spliced Audio Number Genericization Tutorial is shown below.

Spliced Audio Number Genericization Tutorial

Spliced Audio Number Genericization Tutorial

If you’ve completed a successful “proof of concept” stage to a project, it can be tempting at this early stage, even before applying it to the specific intended software integration target, to consider ways to “genericize” that application, and so it is for us, here, with yesterday’s Spliced Audio Number Announcements Tutorial, as shown below, that we feel this could come along to be applied for other purposes. We have no doubt the exercise of doing this serves at least three good purposes …

  1. slow it down a bit before rushing to “software integrate”, as patience can be good here
  2. learn more about what’s possible, and what isn’t, to do with the scope of your planning and thinking
  3. other application may, too, benefit from this “early days” “genericization” of a potential plugin component piece of HTML and Javascript code

In this early stage of “genericization” thoughts, we think that with our project we want to keep intact these ideas …

  • there’ll be up to 3 “columns” of ideas to piece together an audio message from its constituent parts, like with those Sydney train platform announcements we’ve talked about before
  • there’ll be 3 soundfiles mapped to most of the usage regarding these 3 “columns”
  • there’ll be the possibility for silence to be an option in each “column”
  • there’ll be the mechanism by which the user can define their own “Title” and “Subtitle” and 3 “column” headings themselves
  • there’ll be 2 leftmost “columns” that define counting numbers whose ranges can be defined by the user, where, for now, the timing of sounds goes that sounds start at [number].4 seconds and plays for 1.5 seconds
  • there’ll be minimum and maximum special case entries available for user definition in the leftmost “column” that calls on the fourth soundfile, where, for now, the timing of sounds goes that sounds start at 0 seconds and 2 seconds respectively and plays for 2 seconds
  • there’ll be a minimum special case entry available for user definition in the middle “column” that calls on a sound from the third soundfile, where, for now, the timing of sounds goes that sounds start at 3.1 seconds and plays for 1.8 seconds
  • there’ll be 1 rightmost “column” that can have three entries defined

And that is as far as we go with “genericizations”, at this stage, with our project.

In our experience, what Javascript function is a big friend of “genericization”? We’d say Javascript eval function is our favourite here.

It’s funny to think that our HTML and Javascript and CSS audio_1_59.htm, vastly changed from yesterday as per this link, functions exactly the same in its default form, and you can continue to enjoy its accompanying default live run link, but it can, through the use of complex URLs (only, just at this early stage) be made to look quite different, with the same code, as you can see with this complex live run.

So, in summary, this leaves us with many more “live run” options, those being …


Previous relevant Spliced Audio Number Announcements Tutorial is shown below.

Spliced Audio Number Announcements Tutorial

Spliced Audio Number Announcements Tutorial

We’ve got a “proof of concept” tutorial for you today, because we’ve got an idea for something, as we said some time back at Splicing Audio Primer Tutorial

The first was a simulation of those Sydney train public announcements where the timbre of the voice differs a bit between when they say “Platform” and the “6″ (or whatever platform it is) that follows. This is pretty obviously computer audio “bits” strung together … and wanted to get somewhere towards that capability.

… that will probably be blimmin’ obvious to you should you be a regular recent reader at this blog.

Do you remember what we, here, see as a characteristic of “proof of concept” at WordPress Is Mentioned By Navigation Primer Tutorial

To us, a “proof of concept” is not much use if it is as involved as what it is trying to prove

… and do you remember how we observed at Windows 10 Cortana Primer Tutorial

… because you can work Cortana without the voice recognition part, if you like, or if you have the urge to run for the nearest cupboard before being caught talking into a computer (microphone)

? Well, today, we’d like you to be patient about the lack of audio quality with our home made audio (see excuse 2 above) bit we are mainly interested in “proof of concept” issues (see excuse 1 above).

So what “ingredients” went into this “Audio Numbers” web application? As we did in Apple iOS Siri Audio Commentary Tutorial

HTML audio elements that allow for an audio commentary of the 9 “subimages” … the content for which is derived on a Mac OS X by QuickTime Player‘s Audio Recording functionality, which we last talked about at this blog with QuickTime Player Video Flickr Share Primer Tutorial

… we do again today. On doing this we realized the recordings were not loud enough, so started down the road of R&D on this and got to the very useful Increase Audio Volume website tool that helped a little, and this manifests itself if/when you run our live run today, that if you pick “minute” numbers less than or equal to “30″ they are a better better in volume than others, with the “Trial Version” of this software helping you out with “half file” enhancements. “Proof of concept”, remember? And so the aspects you’d change for your own purposes, are …

  1. the content (and more than likely, names) of audio files mentioned below …
  2. arrays of audio files …

    var audiomedia=["one_to_fiftynine.m4a","past_quarterto.m4a","am_pm.m4a"];
    var midmedia=["midnight_midday.m4a"];

    … and it should be noted here, that a separate file for each unique sound, could be a good alternative design, and would stop failures to do with the slow loading speed of the home web server causing audio misfiring … and would mean, below, that “astart” is always “0″ and “delay” should be set to the audio object’s duration parameter
  3. variables “astart” and “delay” as per example …

    } else if (thingis.toLowerCase().indexOf('clock') != -1) {
    oaudio.src=audiomedia[i];
    astart=eval("3.1");
    delay=1.8;


    … where “astart” reflects a start of play value and “delay” represents a length of play scenario in seconds, as we got going in the past when we presented Spliced Audio/Video Overlay Position Tutorial as shown below, where you can read more about the HTML5 Audio objects we used with this “proof of concept” project

Please note with the recording of “one_to_fiftynine.m4a”, that records numbers from 1 to 59, via QuickTime Player, we relied on the recording timer, to time our number recording with a second of duration to make the HTML and Javascript coding a lot easier!

So, as you can see, this is “proof of concept” preparation, and of you want to try it yourself, perhaps you’d like to start with a skeleton of today’s HTML and Javascript audio_1_59.html as a starting point?!


Previous relevant Spliced Audio/Video Overlay Position Tutorial is shown below.

Spliced Audio/Video Overlay Position Tutorial

Spliced Audio/Video Overlay Position Tutorial

Today we’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 Spliced Audio/Video/Image Overlay Tutorial as shown below, here, and that can take any of the forms …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses
  • video
  • image … and background image for webpage

… for either of the modes of use, that being …

  • discrete … or “Optional”
  • synchronized … or “Overlay”

… all like yesterday, but this time we allow you to “seek” or position yourself within the audio and/or video media. We still all “fit” 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 “just clientside” or “just client looking, plus, perhaps, Javascript serverside code” (ala Node.js) or perhaps “Javascript clientside client code, plus Ajax methodologies”. In any case, it does simplify design to not have to involve a serverside language like PHP … but please don’t think we do not encourage you to learn a serverside language like PHP.

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 autoplay property for a media object is frowned upon regarding these mobile devices … for reasons of “runaway” unknown charge issues as you can read at this useful link … thanks … and where they quote from Apple …

“Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.

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.” – Apple documentation.

A link we’d like to thank regarding the new “seek” or media positioning functionality is this one … thanks.

Also, today, for that sense of symmetry, we start to create the Audio objects from now on using …


document.createElement("AUDIO");

… as this acts the same as new Audio() to the best of our testing.

For your own testing purposes, if you know of some media URLs to try, please feel free to try the “overlay” of media ideas inherent in today’s splice_audio.htm live run. For today’s cake “prepared before the program” we’ve again channelled the GoToMeeting Primer Tutorial which had separate audio (albeit very short … sorry … but you get the gist) and video … 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 …

We think, though, that we will be back regarding this interesting topic, and hope we can improve mobile device functionality.


Previous relevant Spliced Audio/Video/Image Overlay Tutorial is shown below.

Spliced Audio/Video/Image Overlay Tutorial

Spliced Audio/Video/Image Overlay Tutorial

Today we’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 that can take any of the forms …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses
  • video
  • image … and background image for webpage

… for either of the modes of use, that being …

  • discrete … or “Optional”
  • synchronized … or “Overlay”

The major new change here, apart from the ability to play two media files at once in our synchronized (or “overlayed”) way, is the additional functionality for Video, and we proceeded thinking there’d be an Javascript DOM OOPy method like … var xv = new Video(); … to allow for this, but found out from this useful link … thanks … that an alternative approach for Video object creation, on the fly, is …


var xv = document.createElement("VIDEO");

… curiously. And it took us a while to tweak to the idea that to have a “display home” for the video on the webpage we needed to …


document.body.appendChild(xv);

… which means you need to take care of any HTML form data already filled in, that isn’t that form’s default, when you effectively “refresh” the webpage like this. Essentially though, media on the fly is a modern approach possible fairly easily with just clientside code. Cute, huh?!

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 synchronization of media themed blog postings of the past, which you may want to read more, for this type of approach.

In the meantime, if you know of some media URLs to try, please feel free to try the “overlay” of media ideas inherent in today’s splice_audio.htm live run. We’ve thought of this one. Do you remember how the GoToMeeting Primer Tutorial had separate audio (albeit very short … sorry … but you get the gist) and video … 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 …

We think, though, that we will be back regarding this interesting topic.


Previous relevant Splicing Audio Primer Tutorial is shown below.

Spliced Audio Primer Tutorial

Splicing Audio Primer Tutorial

Today we’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 …

  • audio file … and less user friendly is …
  • text that gets turned into speech via Google Translate (and user induced Text to Speech functionality), but needs your button presses

Do you remember, perhaps, when we did a series of blog posts regarding the YouTube API, that finished, so far, with YouTube API Iframe Synchronicity Resizing Tutorial? Well, a lot of what we do today is doing similar sorts of functionalities but just for Audio objects in HTML5. For help on this we’d like to thank this great link. So rather than have HTML audio elements in our HTML, as we first shaped to do, we’ve taken the great advice from this link, and gone all Javascript DOM OOPy on the task, to splice audio media together.

There were three thought patterns going on here for me.

  • The first was a simulation of those Sydney train public announcements where the timbre of the voice differs a bit between when they say “Platform” and the “6″ (or whatever platform it is) that follows. This is pretty obviously computer audio “bits” strung together … and wanted to get somewhere towards that capability.
  • The second one relates to presentation ideas following up on that “onmouseover” Siri audio enhanced presentation we did at Apple iOS Siri Audio Commentary Tutorial. Well, we think we can do something related to that here, and we’ve prepared this cake audio presentation here, for us, in advance … really, there’s no need for thanks.
  • The third concerns our eternal media file synchronization quests here at this blog that you may find of interest we hope, here.

Also of interest over time has been the Google Translate Text to Speech functionality that used to be very open, and we now only use around here in an interactive “user clicks” way … but we still use it, because it is very useful, so, thanks. But trying to get this method working for “Platform” and “6″ without a yawning gap in between ruins the spontaneity and fun somehow, but there’s nothing stopping you making your own audio files yourself as we did in that Siri tutorial called Apple iOS Siri Audio Commentary Tutorial and take the HTML and Javascript code you could call splice_audio.html from today, and go and make your own web application? Now, is there? Huh?

Try a live run or perhaps some more Siri cakes?!

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

Posted in Event-Driven Programming, Tutorials, eLearning | Tagged , , , , , , , , , , , , , , , , , | Leave a comment