Audio and Video Creator via Media Browsing Multiple Forms Tutorial
โœ‚๐Ÿƒ๐Ÿพโ€โ™€๏ธ๐Ÿƒ๐Ÿผโ€โ™‚๏ธ
๐Ÿ“–

๐Ÿ”€ ๐Ÿ“… โž• ๐Ÿ“ง
Audio and Video Creator via Media Browsing Multiple Forms Tutorial

Audio and Video Creator via Media Browsing Multiple Forms Tutorial   ๐Ÿ”

Automating yesterdayโ€™s Audio and Video Creator via Media Browsing Tutorial โ€œnot user apparentโ€ Audio/Video PHP web application processing functionality, whereby we used a URL like โ€ฆ

https://www.rjmprogramming.com.au/PHP/animegif/tutorial_to_animated_gif.php?allowaudio=y&allowvideo=y

โ€ฆ to allow this additional functionality in an โ€œinternal use onlyโ€ type of approach. Turning this into a user controlling initial approach, among a phalanx of different approaches we might show, we are going to show a very traditional idea, using multiple HTML method=GET form elements, the 3 used in an HTML table corresponding to the three combinations of possibilities with the GET arguments above. This new HTML looks like โ€ฆ



<table style="display:inline-block;">

<tbody>

<tr>

<td>

<form method="GET" action="./tutorial_to_animated_gif.php" style="display:inline-block;">

<input name="allowaudio" value="y" type="hidden">

<input type="submit" style="border:1px solid yellow;" value="Audio">

</form>

</td>

<td>

<form method="GET" action="./tutorial_to_animated_gif.php" style="display:inline-block;">

<input name="allowaudio" value="y" type="hidden">

<input name="allowvideo" value="y" type="hidden">

<input title="Both, in addition to Images, always" type="submit" value="/">

</form>

</td>

<td>

<form method="GET" action="./tutorial_to_animated_gif.php" style="display:inline-block;">

<input name="allowvideo" value="y" type="hidden">

<input type="submit" style="border:1px solid yellow;" value="Video">

</form>

</td>

</tr>

</tbody>

</table>

We use the โ€œtableโ€ to keep the forms inline.

We use the โ€œform method=GET action=./tutorial_to_animated_gif.phpโ€ to navigate back to simulate the possibilities behind that first URL way above.

Pretty fundamental, boring, but effective, HTML navigational functionality that adds user control into the picture.

Feel free to (re-)try thechanged tutorial_to_animated_gifโšซphp animatedโœ‚GIF creator web application.


Previous relevant Audio and Video Creator via Media Browsing Tutorial is shown below.

Audio and Video Creator via Media Browsing Tutorial

Audio and Video Creator via Media Browsing Tutorial   ๐Ÿ”

A couple of days ago with TextArea to Speech via macOS iTunes Tutorial we surmised โ€ฆ

We can feel some PHP โ€œaudio functionalityโ€ ideas coming on โ€ฆ perhaps we need to take a Bex and have a lie down.

โ€ฆ and so today we take the first steps in our โ€œidea setโ€.

Our last mention of our Animated GIF creator PHP web application was with Animated Gif Creator Variable Slide Delays Tutorial and, today, we expand its capabilities, at this stage hidden to the user, of being able to accept โ€ฆ

  • (its usual) image media (that creates Animated GIF images) โ€ฆ but, also, new as of today โ€ฆ
  • audio media browsed for file(s)
  • video media browsed for file(s)

โ€ฆ the latter two, if the whole is the some of the parts, being able to be sequenced if the user chooses to play the first audio/video media file first. Another โ€œsynchronizationโ€ effort to add to our list!

Thechanged tutorial_to_animated_gifโšซphp animatedโœ‚GIF creator web application can also be a audio/videoโœ‚creator web application which calls on achanged client_browsingโšซhtm HTML/Javascript media browsing helper.

Feel free to (re-)try thechanged tutorial_to_animated_gifโšซphp animatedโœ‚GIF creator web application.

Previous relevant Animated Gif Creator Variable Slide Delays Tutorial is shown below.

Animated Gif Creator Variable Slide Delays Tutorial

Animated Gif Creator Variable Slide Delays Tutorial   ๐Ÿ”

When thinking about the animated GIFs produced by the PHP (writes PHP) web application of the recent Animated Gif Creator Image Filters Tutorial compared to videos โ€ฆ well, we canโ€™t help you with the soundtrack, but how about that way a video can transfix us with a โ€œlingering viewโ€ (notice how we donโ€™t use the word โ€œslideโ€)? But what if we could have a mechanism by which an animated GIF presentation could have its version of a โ€œlingering viewโ€ โ€ฆ

an increased delay applied after the slide (for lingering) being currently displayed in the animated GIF

โ€ฆ being so catchy, huh?!

We actually readied some parts of the PHP code for this when we interfaced the Inhouse Animated GIF Creatorโ€™s involvement with our Haiku web application of Haiku Multimedia via Media Record Genericization Tutorial, but must have forgotten to follow through on the idea for non-Haiku scenarios (those rare occasions in life?!).

The recent Animated Gif Creator Image Filters Tutorial did us a huge favour here โ€œPHP code organization wiseโ€ when we introduced that โ€œfunction ingif($php_content_of_php)โ€ last gasp way of making amendments to that second phase PHP which goes on to create the animated GIF for you (that is, if you donโ€™t ask too much of it resource wise).

So now, where the first phase asks for a delay value, via a textbox, that textboxโ€™s advice now goes along the lines of โ€ฆ

Comma separated list noticed, with first value being default for undefined ones. Plus and minus values do delays relative to previous delay.

โ€ฆ to work with the new PHP code within thechanged tutorial_to_animated_gifโšซphp animatedโœ‚GIF creator web application, as per โ€ฆ

<?php


function ingif($gp) {

global $foundtitle, $wtsuffix, $atext, $filteretc, $enumber, $ow, $oh, $owend, $ohend, $diffow, $diffoh, $delay, $vdy;

$indelay=$delay;

if (isset($_GET['delay'])) { $indelay=str_replace(" ","+",urldecode($_GET['delay'])); }

if (isset($_POST['delay'])) { $indelay=str_replace(" ","+",urldecode($_POST['delay'])); }

if (strpos($indelay, ",") !== false) {

if (strpos($gp, ("framed" . "[" . "]=" . $vdy . ";")) !== false) {

$gpf=explode("framed" . "[" . "]=" . $vdy . ";", $gp)[0];

$gp=str_replace($gpf . "framed" . "[" . "]=" . $vdy . ";", $gpf . "framed" . "[" . "] = " . $vdy . ";", $gp); //, 1);

$delaysare=explode(",", $indelay);

for ($iuy=1; $iuy<sizeof($delaysare); $iuy++) {

if (strpos($gp, ("framed" . "[" . "]=" . $vdy . ";")) !== false) {

$gpf=explode("framed" . "[" . "]=" . $vdy . ";", $gp)[0];

if (trim($delaysare[$iuy]) == '') {

$gp=str_replace($gpf . "framed" . "[" . "]=" . $vdy . ";", $gpf . "framed" . "[" . "] = " . $vdy . ";", $gp); //, 1);

} else if (strpos($delaysare[$iuy], "+") !== false) {

$delaysare[$iuy]='' . ($delaysare[-1 + $iuy] + substr($delaysare[$iuy],1));

$gp=str_replace($gpf . "framed" . "[" . "]=" . $vdy . ";", $gpf . "framed" . "[" . "] = " . $delaysare[$iuy] . ";", $gp); //, 1);

} else if (strpos($delaysare[$iuy], "-") !== false) {

$delaysare[$iuy]='' . ($delaysare[-1 + $iuy] - substr($delaysare[$iuy],1));

$gp=str_replace($gpf . "framed" . "[" . "]=" . $vdy . ";", $gpf . "framed" . "[" . "] = " . $delaysare[$iuy] . ";", $gp); //, 1);

} else {

$gp=str_replace($gpf . "framed" . "[" . "]=" . $vdy . ";", $gpf . "framed" . "[" . "] = " . $delaysare[$iuy] . ";", $gp); //, 1);

}

}

}

}

}

$enbit="";

$outgp=$gp;

//

// Rest of last gasp changes (of recent times) follows ...

//

}


?>

โ€ฆ enabling you to refine your animated GIF aesthetics, we personally being of the belief that an animated GIF loses a lot of nuance if its delays between slides are all the same. It can feel quite robotic at times.

Previous relevant Animated Gif Creator Image Filters Tutorial is shown below.

Animated Gif Creator Image Filters Tutorial

Animated Gif Creator Image Filters Tutorial   ๐Ÿ”

On top of the functionality of yesterdayโ€™s Animated Gif Creator Image Dimensions Tutorial we want to offer โ€ฆ



PHP GD library imagefilter functionality

Hereโ€™s our table of context for thechanged tutorial_to_animated_gifโšซphp animatedโœ‚GIF creator web application โ€ฆ

Comes into play as a recall PHP execution receives HTML form data
<?php


$filteretc="";

$fhc="Image";

if (isset($_GET['filteretc'])) {

$filteretc=str_replace("+"," ",urldecode($_GET['filteretc']));

$fhc=str_replace(explode("IMG_",$filteretc)[1] . '"',explode("IMG_",$filteretc)[1] . '" selected',('<select title="Image" onchange="filteretcit(this);" id="sfilteris"><option value="">Image</option><option value=" imagefilter($image, IMG_FILTER_EMBOSS); ">Embossed Image(s)</option><option value=" imagefilter($image, IMG_FILTER_NEGATE); ">Negated Image(s)</option><option value=" imagefilter($image, IMG_FILTER_COLORIZE, 255, 0, 0); ">Red Colourized Image(s)</option><option value=" imagefilter($image, IMG_FILTER_COLORIZE, 0, 255, 0); ">Green Colourized Image(s)</option><option value=" imagefilter($image, IMG_FILTER_COLORIZE, -127.12, -127.98, 127); ">Colourized Image(s)</option><option value=" imagefilter($image, IMG_FILTER_COLORIZE, 0, 0, 255); ">Blue Colourized Image(s)</option><option value=" imagefilter($image, IMG_FILTER_PIXELATE, 3); ">Pixellated Image(s)</option><option value=" imagefilter($image, IMG_FILTER_SMOOTH, -1924.124); ">Smoothed Image(s)</option><option value=" imagefilter($image, IMG_FILTER_CONTRAST, -90); ">Contrasted Image(s)</option><option value=" imagefilter($image, IMG_FILTER_BRIGHTNESS, 98); ">Brightened Image(s)</option><option value=" imagefilter($image, IMG_FILTER_MEAN_REMOVAL); ">Mean Removal Image(s)</option></select>'));

} else if (isset($_POST['filteretc'])) {

$filteretc=str_replace("+"," ",urldecode($_POST['filteretc']));

$fhc=str_replace(explode("IMG_",$filteretc)[1] . '"',explode("IMG_",$filteretc)[1] . '" selected',('<select title="Image" onchange="filteretcit(this);" id="sfilteris"><option value="">Image</option><option value=" imagefilter($image, IMG_FILTER_EMBOSS); ">Embossed Image(s)</option><option value=" imagefilter($image, IMG_FILTER_NEGATE); ">Negated Image(s)</option><option value=" imagefilter($image, IMG_FILTER_COLORIZE, 255, 0, 0); ">Red Colourized Image(s)</option><option value=" imagefilter($image, IMG_FILTER_COLORIZE, 0, 255, 0); ">Green Colourized Image(s)</option><option value=" imagefilter($image, IMG_FILTER_COLORIZE, -127.12, -127.98, 127); ">Colourized Image(s)</option><option value=" imagefilter($image, IMG_FILTER_COLORIZE, 0, 0, 255); ">Blue Colourized Image(s)</option><option value=" imagefilter($image, IMG_FILTER_PIXELATE, 3); ">Pixellated Image(s)</option><option value=" imagefilter($image, IMG_FILTER_SMOOTH, -1924.124); ">Smoothed Image(s)</option><option value=" imagefilter($image, IMG_FILTER_CONTRAST, -90); ">Contrasted Image(s)</option><option value=" imagefilter($image, IMG_FILTER_BRIGHTNESS, 98); ">Brightened Image(s)</option><option value=" imagefilter($image, IMG_FILTER_MEAN_REMOVAL); ">Mean Removal Image(s)</option></select>'));

}


?>
Again as PHP writes out the PHP to create the animated GIF, an example โ€ฆ
<?php echo โ€


$eachone=" if (\$randomizematch == '' || \$randomizematch == \"\$randomizeloopcnt\") {



\$progtext='';

\$text='';



// Open the first source image and add the text.

\$image = imagecreatefromjpeg('source01.jpg');

" . $setwh . "

\$text_color = imagecolorallocate(\$image, " . $r200 . ", " . $g200 . ", " . $b200 . ");

\$black = imagecolorallocatealpha(\$image, 254, 254, 254, 0);

if (98 == 97) { \$progtext=\$progtext; }

imagestring(\$image, 5, 5, 5, \$text, \$text_color);

if (\$progtext != '') {

if (strpos(\$progtext, ' ') !== false) {

imagettftext(\$image, 6, 0, (strlen(\$text) * 12), 21, \$text_color, realpath('DejaVuSansMono.ttf'), \$progtext);

} else if (strpos(\$progtext, ' ') !== false) {

imagettftext(\$image, 10, 0, (strlen(\$text) * 12), 21, \$text_color, realpath('DejaVuSansMono.ttf'), \$progtext);

} else {

imagettftext(\$image, 20, 0, (strlen(\$text) * 12), 21, \$text_color, realpath('DejaVuSansMono.ttf'), \$progtext);

}

}



// Generate GIF from the $image

// We want to put the binary GIF data into an array to be used later,

// so we use the output buffer.

ob_start();

imagegif(\$image);

\$frames[]=ob_get_contents();

\$framed[]=40; // Delay in the animation.

ob_end_clean();

// And again..

}

";


โ€œ; ?>
Used as PHP writes PHP in this way โ€ฆ
<?php


function ingif($gp) {

global $foundtitle, $wtsuffix, $atext, $filteretc;

$outgp=$gp;

if ($wtsuffix != '' || $filteretc != '') {

//$bits=explode("\$image = ", $gp);

$bits=explode("if (98 == 97)", $gp);

if (sizeof($bits) > 1) {

$outgp="";

for ($ii=0; $ii<(-1 + sizeof($bits)); $ii++) {

$outgp.=lastcountidea($ii, (-1 + sizeof($bits)), $wtsuffix, $bits[$ii] . "\n " . $filteretc . "\n if (98 == 97)");

}

$outgp.=$bits[-1 + sizeof($bits)];

}

}

return $outgp;

}


โ€œ; ?>
And in order to correctly set the value of that new span element (ready to host a dropdown (select) element for image filtering that replaces a hardcoded โ€œImageโ€ word with Image Filtering dropdown options presented for user interaction) in a recall scenario, in this PHP writes Javascript code snippet change
<?php echo โ€


Tutorial Slideshow <a style='cursor:pointer;text-decoration:none;' onclick=\" if (document.getElementById('slideshow').value.toLowerCase().indexOf('.htm') != -1) { window.open(document.getElementById('slideshow').value,'_blank'); } \">HTML</a> or <span id=ifilter>" . $fhc . "</span> <input title='Please note a minus between numericals can define a URL range of image URLs and that an Audio URL or Video URL (or browsed for above) causes the resultant Animated GIF to be its background image' placeholder='Append #comment[~second line] for animated GIF watermarks (that are red if first slide has such a comment) ... {[unicode]} for some emojis and an Audio URL or Video URL (or browsed for above) causes the resultant Animated GIF to be its background image' onblur=\"maybemore(this.value, 'slideshow1', this);\" style='width:70%;' data-wh='' type='text' id='slideshow' name='slideshow' value='" . $url . "'></input><br><br>


โ€œ; ?>
And the PHP writes HTML new HTML form type=hidden fields that navigate up to the recalled PHP as well as the iframe element that will help gather animated GIF image slide dimensions
<?php echo โ€


<input name=filteretc id=filteretc value=\"" . $filteretc . "\" type=hidden></input>


โ€œ; ?>
Used by that select onchange logicโ€™s PHP writing Javascript called (and other) functions
<?php echo โ€


function filteretcit(oself) {

var xsuffis='';

if (oself.value.indexOf('imagefilter(') != -1) {

document.getElementById('filteretc').value=oself.value;

for (var i=0; i<oself.options.length; i++) {

if (oself.options[i].selected) {

if (oself.options[i].value != '') {

xsuffis=' ... ' + oself.options[i].innerText;

}

}

}

oself.title=oself.value + xsuffis;

} else {

document.getElementById('filteretc').value=oself.value;

document.getElementById('filteretc').title='Image';

}

//oself.value='';

}



function selitize(thiswh) {

if (thiswh.trim() != '') {

if (document.getElementById('selwhs').outerHTML.indexOf(thiswh) == -1) {

document.getElementById('selwhs').style.display='inline-block';

document.getElementById('selwhs').innerHTML+='<option value=\"' + thiswh + '\">' + thiswh.replace(',',' x ') + '</option>';

if (document.getElementById('selwhs').outerHTML.indexOf('?') == -1) {

if (thiswh.indexOf(',') != -1) {

document.getElementById('fow').value=thiswh.split(',')[0];

document.getElementById('foh').value=thiswh.split(',')[1];

}

document.getElementById('selwhs').innerHTML+='<option value=\"?\">You Enter Width,Height</option>';

document.getElementById('ifilter').innerHTML='<select title=\"Image\" onchange=filteretcit(this); id=sfilteris><option value=\"\">Image</option></select>';

document.getElementById('sfilteris').innerHTML+='<option value=\" imagefilter(\$image, IMG_FILTER_EMBOSS); \">Embossed Image(s)</option>';

document.getElementById('sfilteris').innerHTML+='<option value=\" imagefilter(\$image, IMG_FILTER_NEGATE); \">Negated Image(s)</option>';

document.getElementById('sfilteris').innerHTML+='<option value=\" imagefilter(\$image, IMG_FILTER_COLORIZE, 255, 0, 0); \">Red Colourized Image(s)</option>';

document.getElementById('sfilteris').innerHTML+='<option value=\" imagefilter(\$image, IMG_FILTER_COLORIZE, 0, 255, 0); \">Green Colourized Image(s)</option>';

document.getElementById('sfilteris').innerHTML+='<option value=\" imagefilter(\$image, IMG_FILTER_COLORIZE, -127.12, -127.98, 127); \">Colourized Image(s)</option>';

document.getElementById('sfilteris').innerHTML+='<option value=\" imagefilter(\$image, IMG_FILTER_COLORIZE, 0, 0, 255); \">Blue Colourized Image(s)</option>';

document.getElementById('sfilteris').innerHTML+='<option value=\" imagefilter(\$image, IMG_FILTER_PIXELATE, 3); \">Pixellated Image(s)</option>';

document.getElementById('sfilteris').innerHTML+='<option value=\" imagefilter(\$image, IMG_FILTER_SMOOTH, -1924.124); \">Smoothed Image(s)</option>';

document.getElementById('sfilteris').innerHTML+='<option value=\" imagefilter(\$image, IMG_FILTER_CONTRAST, -90); \">Contrasted Image(s)</option>';

document.getElementById('sfilteris').innerHTML+='<option value=\" imagefilter(\$image, IMG_FILTER_BRIGHTNESS, 98); \">Brightened Image(s)</option>';

document.getElementById('sfilteris').innerHTML+='<option value=\" imagefilter(\$image, IMG_FILTER_MEAN_REMOVAL); \">Mean Removal Image(s)</option>';

}

}

}

return thiswh;

}


โ€œ; ?>

Did you know?

As progress, also, weโ€™ve added to the second presentation part of your created animated GIF the โ€œclickโ€ ability to download the animated GIF to your local device or computer. Here on this MacBook Pro (using macOS Mojave), to further open that downloaded animated GIF did something very interesting. Even though the downloaded file was downloaded into the Downloads folder as โ€œmy_rjm_gif.gifโ€ as a default application to use with a โ€œclickโ€ on it (ie. its โ€œassociationโ€ application) we were surprised it opened in Preview (usually the preserve of all things PDF) and displayed like a PDF with all the images making up its โ€œslidesโ€ showing as โ€œslidesโ€ in Preview. Cute, huh?!

Previous relevant Animated Gif Creator Image Dimensions Tutorial is shown below.

Animated Gif Creator Image Dimensions Tutorial

Animated Gif Creator Image Dimensions Tutorial   ๐Ÿ”

You canโ€™t really claim to have a fully tailorable image creation process if you canโ€™t allow the user to have some control over the final โ€ฆ



width x height

โ€ฆ image dimensions. As you develop webpages you will find requirements to fit images into set spaces, and that is all okay if the images suit those dimensions exactly, or proportionally. And that is where the PHP GD library imagescale function can come in handy.

So, on our quest to improve on the Animated GIF Creator web application of yesterdayโ€™s Animated Gif Creator Watermark Display Mode Tutorial there is a one PHP codeline of difference to make this animated GIF dimensions be user controllable โ€ฆ

<?php echo โ€


$eachone=" if (\$randomizematch == '' || \$randomizematch == \"\$randomizeloopcnt\") {



\$text='';



// Open the first source image and add the text.

\$image = imagecreatefromjpeg('source01.jpg');

" . $setwh . "

\$text_color = imagecolorallocate(\$image, " . $r200 . ", " . $g200 . ", " . $b200 . ");

imagestring(\$image, 5, 5, 5, \$text, \$text_color);



// Generate GIF from the $image

// We want to put the binary GIF data into an array to be used later,

// so we use the output buffer.

ob_start();

imagegif(\$image);

\$frames[]=ob_get_contents();

\$framed[]=40; // Delay in the animation.

ob_end_clean();

// And again..

}

";


โ€œ; >

โ€ฆ but am guessing youโ€™d want some context around that, wouldnโ€™t you, for thechanged tutorial_to_animated_gifโšซphp animatedโœ‚GIF creator web application?!

Comes into play as a recall PHP execution receives HTML form data
<?php


$setwh="";

$ow=-1;

$oh=-1;

$setwhd="none";

$setwhihs="";

if (isset($_GET['ow']) && isset($_GET['oh'])) {

if (strlen(urldecode($_GET['ow'])) != 0 && strpos(urldecode($_GET['ow']), "-") === false) {

$ow=trim(str_replace("+"," ",urldecode($_GET['ow'])));

if (strlen(urldecode($_GET['oh'])) != 0 && strpos(urldecode($_GET['oh']), "-") === false) {

$oh=trim(str_replace("+"," ",urldecode($_GET['oh'])));

}

$setwh="\n \$image=imagescale(\$image, " . $ow . ", " . $oh . "); \n";

$setwhd="inline-block";

if (isset($_GET['fow']) && isset($_GET['foh'])) {

$setwhihs="<option value='" . trim(str_replace("+"," ",urldecode($_GET['fow']))) . "," . trim(str_replace("+"," ",urldecode($_GET['foh']))) . "'>" . trim(str_replace("+"," ",urldecode($_GET['fow']))) . " x " . trim(str_replace("+"," ",urldecode($_GET['foh']))) . "</option><option value='" . $ow . "," . $oh . "' selected>" . $ow . " x " . $oh . "</option><option value=?>You Enter Width,Height</option>";

} else {

$setwhihs="<option value='" . $ow . "," . $oh . "' selected>" . $ow . " x " . $oh . "</option>";

}

} else if (strlen(urldecode($_GET['oh'])) != 0 && strpos(urldecode($_GET['oh']), "-") === false) {

$oh=trim(str_replace("+"," ",urldecode($_GET['oh'])));

$setwh="\n \$image=imagescale(\$image, " . $ow . ", " . $oh . "); \n";

$setwhd="inline-block";

if (isset($_GET['fow']) && isset($_GET['foh'])) {

$setwhihs="<option value='" . trim(str_replace("+"," ",urldecode($_GET['fow']))) . "," . trim(str_replace("+"," ",urldecode($_GET['foh']))) . "'>" . trim(str_replace("+"," ",urldecode($_GET['fow']))) . " x " . trim(str_replace("+"," ",urldecode($_GET['foh']))) . "</option><option value='" . $ow . "," . $oh . "' selected>" . $ow . " x " . $oh . "</option><option value=?>You Enter Width,Height</option>";

} else {

$setwhihs="<option value='" . $ow . "," . $oh . "' selected>" . $ow . " x " . $oh . "</option>";

}

}

} else if (isset($_POST['ow']) && isset($_POST['oh'])) {

if (strlen(urldecode($_POST['ow'])) != 0 && strpos(urldecode($_POST['ow']), "-") === false) {

$ow=trim(str_replace("+"," ",urldecode($_POST['ow'])));

if (strlen(urldecode($_POST['oh'])) != 0 && strpos(urldecode($_POST['oh']), "-") === false) {

$oh=trim(str_replace("+"," ",urldecode($_POST['oh'])));

}

$setwh="\n \$image=imagescale(\$image, " . $ow . ", " . $oh . "); \n";

$setwhd="inline-block";

if (isset($_POST['fow']) && isset($_POST['foh'])) {

$setwhihs="<option value='" . trim(str_replace("+"," ",urldecode($_POST['fow']))) . "," . trim(str_replace("+"," ",urldecode($_POST['foh']))) . "'>" . trim(str_replace("+"," ",urldecode($_POST['fow']))) . " x " . trim(str_replace("+"," ",urldecode($_POST['foh']))) . "</option><option value='" . $ow . "," . $oh . "' selected>" . $ow . " x " . $oh . "</option><option value=?>You Enter Width,Height</option>";

} else {

$setwhihs="<option value='" . $ow . "," . $oh . "' selected>" . $ow . " x " . $oh . "</option>";

}

} else if (strlen(urldecode($_POST['oh'])) != 0 && strpos(urldecode($_POST['oh']), "-") === false) {

$oh=trim(str_replace("+"," ",urldecode($_POST['oh'])));

$setwh="\n \$image=imagescale(\$image, " . $ow . ", " . $oh . "); \n";

$setwhd="inline-block";

if (isset($_POST['fow']) && isset($_POST['foh'])) {

$setwhihs="<option value='" . trim(str_replace("+"," ",urldecode($_POST['fow']))) . "," . trim(str_replace("+"," ",urldecode($_POST['foh']))) . "'>" . trim(str_replace("+"," ",urldecode($_POST['fow']))) . " x " . trim(str_replace("+"," ",urldecode($_POST['foh']))) . "</option><option value='" . $ow . "," . $oh . "' selected>" . $ow . " x " . $oh . "</option><option value=?>You Enter Width,Height</option>";

} else {

$setwhihs="<option value='" . $ow . "," . $oh . "' selected>" . $ow . " x " . $oh . "</option>";

}

}

}


?>
Again as PHP writes out the PHP to create the animated GIF
<?php echo โ€


$eachone=" if (\$randomizematch == '' || \$randomizematch == \"\$randomizeloopcnt\") {



\$text='';



// Open the first source image and add the text.

\$image = imagecreatefromjpeg('source01.jpg');

" . $setwh . "

\$text_color = imagecolorallocate(\$image, " . $r200 . ", " . $g200 . ", " . $b200 . ");

imagestring(\$image, 5, 5, 5, \$text, \$text_color);



// Generate GIF from the $image

// We want to put the binary GIF data into an array to be used later,

// so we use the output buffer.

ob_start();

imagegif(\$image);

\$frames[]=ob_get_contents();

\$framed[]=40; // Delay in the animation.

ob_end_clean();

// And again..

}

";


โ€œ; ?>
And in order to correctly set the value of that new dropdown (select) element in a recall scenario, in this PHP writes Javascript code snippet change
<?php echo โ€


<h1 id='myh1' align='center'>Tutorial Slideshow to Animated GIF <select onchange=owoh(this); style='display:" . $setwhd . ";' id=selwhs><option value=''>Size of First Slide (as below)</option>" . $setwhihs . "</select>" . $moreh1 . " ... or ... <div style='display:inline-block;width:95px;height:30px;overflow:hidden;border-top:1px solid black;border-bottom:1px solid black;border-left:2px solid yellow;border-right:1px solid yellow;'><iframe id=cbi frameborder=0 style='width:173px;height:228px;margin-top:-194px;' src='../../HTMLCSS/client_browsing.htm?d=" . rand(0,18765432) . "'></iframe></div></h1>


โ€œ; ?>
And the PHP writes HTML new HTML form type=hidden fields that navigate up to the recalled PHP as well as the iframe element that will help gather animated GIF image slide dimensions
<?php echo โ€


<input name=fow id=fow value='-1' type=hidden></input><input name=foh id=foh value='-1' type=hidden></input>

<input name=ow id=ow value='-1' type=hidden></input><input name=oh id=oh value='-1' type=hidden></input>

<img style='display:none;' title='slideshow' id='myimghere' src='' onerror=\"iready=true;\" onload=\" if (this.src.length > 0) { iwidths.push(this.width); iheights.push(this.height); document.getElementById(this.title).setAttribute('data-wh',selitize('' + this.width + ',' + this.height)); iready=true; } \"></img>


โ€œ; ?>
And example of changed PHP writes HTML image slide textboxes whereby a new global data attribute called โ€œdata-whโ€ helps out the user with their newly presented โ€œimage dimensions choiceโ€ dropdown
<?php echo โ€


$scris.="\n if (fo.id == 'slideshow') { fo.value='" . $urlminus . "'; } else { fo.innerHTML+=\"Tutorial Slideshow Image \" + icnt + \" <input title='Please note a minus between numericals can define a URL range of image URLs' onblur='maybemore(this.value, this.id, this);' style='width:70%;' data-wh='' type='text' id='slideshow\" + icnt + \"' name='slideshow\" + icnt + \"' value='" . $urlminus . "'></input><br><br><div id='fdiv\" + icnt + \"'></div>\"; } \n";


โ€œ; ?>
Used by that iframe onload logicโ€™s PHP writing Javascript called (and other) functions
<?php echo โ€


var iwidths=[], iheights=[];

var iready=true;



function selitize(thiswh) {

if (thiswh.trim() != '') {

if (document.getElementById('selwhs').outerHTML.indexOf(thiswh) == -1) {

document.getElementById('selwhs').style.display='inline-block';

document.getElementById('selwhs').innerHTML+='<option value=\"' + thiswh + '\">' + thiswh.replace(',',' x ') + '</option>';

if (document.getElementById('selwhs').outerHTML.indexOf('?') == -1) {

if (thiswh.indexOf(',') != -1) {

document.getElementById('fow').value=thiswh.split(',')[0];

document.getElementById('foh').value=thiswh.split(',')[1];

}

document.getElementById('selwhs').innerHTML+='<option value=\"?\">You Enter Width,Height</option>';

}

}

}

return thiswh;

}



function owoh(thisselis) {

var askwh='';

if (thisselis.value.indexOf(',') != -1) {

document.getElementById('ow').value='' + thisselis.value.split(',')[0];

document.getElementById('oh').value='' + thisselis.value.split(',')[1];

} else if (thisselis.value='?') {

askwh=prompt('Please comma separate a width and height (eg. 750,1334) where a -1 for one lets it be proportional', '');

if (askwh == null) { askwh=''; } else { askwh=askwh.replace(/\ /g,''); }

if (askwh.indexOf(',') != -1 && eval('' + askwh.split('-').length) <= 2) {

if (askwh.indexOf('-1,') == 0) {

document.getElementById('ow').value='' + Math.round(eval('' + thisselis.outerHTML.split(' x ')[0].split('>')[eval(-1 + thisselis.outerHTML.split(' x ')[0].split('>').length)]) * eval('' + askwh.split(',')[1]) / eval('' + thisselis.outerHTML.split(',')[1].split('\"')[0].split(\"'\")[0]));

askwh=askwh.replace('-1,', document.getElementById('ow').value + ',');

document.getElementById('oh').value='' + askwh.split(',')[1];

} else {

document.getElementById('ow').value='' + askwh.split(',')[0];

document.getElementById('oh').value='' + askwh.split(',')[1];

}

if (thisselis.outerHTML.indexOf(askwh) == -1) {

thisselis.style.display='inline-block';

thisselis.innerHTML+='<option value=\"' + askwh + '\">' + askwh.replace(',',' x ') + '</option>';

}

} else {

askwh='';

document.getElementById('ow').value='-1';

document.getElementById('oh').value='-1';

}

thisselis.value=askwh;

} else {

document.getElementById('ow').value='-1';

document.getElementById('oh').value='-1';

}

}



setTimeout(startmonitoringwh, 3000);


โ€œ; ?>

Previous relevant Animated Gif Creator Watermark Display Mode Tutorial is shown below.

Animated Gif Creator Watermark Display Mode Tutorial

Animated Gif Creator Watermark Display Mode Tutorial   ๐Ÿ”

Itโ€™s not just โ€ฆ

  • the watermark colour of yesterdayโ€™s Animated Gif Creator Watermark Colour Tutorial that can help with an animated GIF being more self explanatory (in a display sense) โ€ฆ it is todayโ€™s new โ€ฆ
  • watermark display mode out of โ€ฆ
    1. Title Just on First
    2. Title on First and Count on Others
    3. Title With a Count on All
    4. No Watermark

โ€ฆ that can help us know where we are up to, given the use of the middle options above, again, doing a little to โ€œbridgeโ€ the gap between a video presentation and an animated GIF one we can create with thechanged tutorial_to_animated_gifโšซphp animatedโœ‚GIF creator web application.

This new functionality interfaces to the online user via a new dropdown (select) element replacement for the hardcoded โ€œTitleโ€ word of one of the headers. More and more, we start to see the benefits of involving โ€œoptionโ€ subelements with that โ€œselectโ€ hosting one being given IDs as you can surmise from the initial HTML (via PHP) โ€ฆ

<?php echo โ€


Tutorial Slideshow <select style='display:inline-block;width:80px;' onchange='watermarkchange(this);' id='watermarkmode' name='watermarkmode'><option id=watermarkoption value=''>Title</option><option value=''>Title Just on First</option><option value=' '>Title on First and Count on Others</option><option value=' '>Title With a Count on All</option><option id=optnow value=\"\\n\">No Watermark</option></select>


โ€œ; ?>

โ€ฆ referencing user interface โ€œonchangeโ€ Javascript logic โ€ฆ

<?php echo โ€


function watermarkchange(oselwater) {

var ovalis=oselwater.value

if (ovalis == ' ') {

document.getElementById('watermarkoption').innerHTML='Title on First and Count on Others';

document.getElementById('watermarkoption').value=ovalis;

} else if (ovalis == ' ') {

document.getElementById('watermarkoption').innerHTML='Title With a Count on All';

document.getElementById('watermarkoption').value=ovalis;

} else if (ovalis.length == 0) {

document.getElementById('watermarkoption').innerHTML='Title Just on First';

document.getElementById('watermarkoption').value=ovalis;

} else {

document.getElementById('watermarkoption').innerHTML='No Watermark';

document.getElementById('watermarkoption').value=ovalis;

}

}


โ€œ; ?>

โ€ฆ and because this new dropdown (select) element is within an HTML form and contributes to messaging sent to recalls of the PHP, all the following PHP and Javascript snippets are interesting too โ€ฆ

Comes into play as a recall PHP execution receives HTML form data
<?php


$foundtitle=" ";

$wtsuffix="";

$setwm="";

if (isset($_GET['watermarkmode'])) {

$wtsuffix=str_replace("+"," ",urldecode($_GET['watermarkmode']));

if ($wtsuffix == ' ') {

$setwm="\n document.getElementById('watermarkmode').value=' '; \n";

} else if ($wtsuffix == ' ') {

$setwm="\n document.getElementById('watermarkmode').value=' '; \n";

} else if ($wtsuffix != '') {

$setwm="\n document.getElementById('watermarkmode').value=document.getElementById('optnow').value; \n";

}

} else if (isset($_POST['watermarkmode'])) {

$wtsuffix=str_replace("+"," ",urldecode($_POST['watermarkmode']));

if ($wtsuffix == ' ') {

$setwm="\n document.getElementById('watermarkmode').value=' '; \n";

} else if ($wtsuffix == ' ') {

$setwm="\n document.getElementById('watermarkmode').value=' '; \n";

} else if ($wtsuffix != '') {

$setwm="\n document.getElementById('watermarkmode').value=document.getElementById('optnow').value; \n";

}

}


?>
Again as PHP writes out the PHP to create the animated GIF
<?php echo โ€


function lastcountidea($thiscounter,$totalcount,$suffixwatermarkmode,$sofarphp) {

global $foundtitle, $wtsuffix, $atext;

$ft="";

$ourdelim="'";

if (strpos($sofarphp, "\$text=") !== false) {

$sofars=explode("\$text=", $sofarphp);

$ourdelim=substr($sofars[1],0,1);

$ft=explode($ourdelim,substr($sofars[1],1))[0];

}

if ($foundtitle == " ") {

if (strpos($sofarphp, "\$text=") !== false) {

$sofars=explode("\$text=", $sofarphp);

$foundtitle=$ft;

}

}

if ($suffixwatermarkmode == ' ') {

if ($thiscounter == 0) {

$sofarphp=str_replace_first("\$text=" . $ourdelim . $ft . $ourdelim, "\$text=" . $ourdelim . $foundtitle . " ... 1 of " . $totalcount . $ourdelim, $sofarphp);

} else {

$sofarphp=str_replace_first("\$text=" . $ourdelim . $ft . $ourdelim, "\$text=" . $ourdelim . "" . (1 + $thiscounter) . " of " . $totalcount . $ourdelim, $sofarphp);

}

} else if ($suffixwatermarkmode == ' ') {

if ($thiscounter == 0) {

$sofarphp=str_replace_first("\$text=" . $ourdelim . $ft . $ourdelim, "\$text=" . $ourdelim . $foundtitle . " ... 1 of " . $totalcount . $ourdelim, $sofarphp);

} else {

$sofarphp=str_replace_first("\$text=" . $ourdelim . $ft . $ourdelim, "\$text=" . $ourdelim . $foundtitle . " ... " . (1 + $thiscounter) . " of " . $totalcount . $ourdelim, $sofarphp);

}

} else if (strlen($suffixwatermarkmode) != 0) {

if ($thiscounter == 0) {

$sofarphp=str_replace_first("\$text=" . $ourdelim . $ft . $ourdelim, "\$text=" . $ourdelim . $ourdelim, $sofarphp);

} else {

$sofarphp=str_replace_first("\$text=" . $ourdelim . $ft . $ourdelim, "\$text=" . $ourdelim . $ourdelim, $sofarphp);

}

}

return $sofarphp;

}



function ingif($gp) {

global $foundtitle, $wtsuffix, $atext;

$outgp=$gp;

if ($wtsuffix != '') {

$bits=explode("\$image = ", $gp);

if (sizeof($bits) > 1) {

$outgp="";

for ($ii=0; $ii<(-1 + sizeof($bits)); $ii++) {

$outgp.=lastcountidea($ii, (-1 + sizeof($bits)), $wtsuffix, $bits[$ii] . "\$image = ");

}

$outgp.=$bits[-1 + sizeof($bits)];

}

}

return $outgp;

}


โ€œ; ?>
<?php


// PHP writes PHP later, and onto that PHP can create the animated GIF data, as below ...

file_put_contents(server_remote_addr() . "_preview.php", ingif($gifphp) . $rltsuffix . $lastbit);

file_put_contents(server_remote_addr() . ".php", ingif($gifphp) . str_replace($lastbitfrom, str_replace("'animegif.gif'", "'" . server_remote_addr() . ".gif" . "'", $lastbitto), ($rltsuffix . $lastbit)));


?>
And in order to correctly set the value of that new dropdown (select) element in a recall scenario, in this PHP writes Javascript code snippet change
<?php echo โ€


function dolhsh() {

" . $setwm . "

if (('' + window.location.hash).replace('#','') != '') {

//alert(45);

document.getElementById('lhsh').innerHTML=window.location.hash.substring(1);

document.getElementById('dhash').innerHTML='<input type=hidden name=ihash value=\"' + window.location.hash.substring(1) + '\"></input>';

document.getElementById('cbi').src=document.getElementById('cbi').src + '0' + window.location.hash.replace(/\ /g,'%20');

//alert(document.getElementById('lhsh').innerHTML);

var gsu='" . $gfn . "';

//alert(gsu);

document.getElementById('dgfn').innerHTML='<input type=hidden name=gfn value=\"' + document.URL.split('tutorial_to_animated_gif.')[0] + gsu + '\"></input>';

if (window.parent) {

if (parent.document.getElementById('agifn')) {

// alert(gsu);

parent.document.getElementById('agifn').value=document.URL.split('tutorial_to_animated_gif.')[0] + gsu;

}

}

} else if (parent.window) {

if (parent.document.URL.indexOf('client_browsing.htm') != -1) {

if (parent.document.getElementById('lhsh')) {

if (parent.document.getElementById('lhsh').innerHTML != '') {

document.getElementById('lhsh').innerHTML=parent.document.getElementById('lhsh').innerHTML;

//alert('000:' + document.getElementById('lhsh').innerHTML);

document.getElementById('dhash').innerHTML='<input type=hidden name=ihash value=\"' + parent.document.getElementById('lhsh').innerHTML + '\"></input>';

document.getElementById('cbi').src=document.getElementById('cbi').src + '0#' + parent.document.getElementById('lhsh').innerHTML.replace(/\ /g,'%20');

var gsux='" . $gfn . "';

//alert(gsu);

document.getElementById('dgfn').innerHTML='<input type=hidden name=gfn value=\"' + document.URL.split('tutorial_to_animated_gif.')[0] + gsux + '\"></input>';

}

}

}

}

//else {

//alert(65);

//}

}


โ€œ; ?>

Previous relevant Animated Gif Creator Watermark Colour Tutorial is shown below.

Animated Gif Creator Watermark Colour Tutorial

Animated Gif Creator Watermark Colour Tutorial   ๐Ÿ”

Weโ€™re revisiting the Animated Gif Creator web application last looked at with the recent Haiku Multimedia via Media Record Genericization Tutorial on a quest to โ€œbridgeโ€ the gap between โ€ฆ

  • video โ€ฆ and โ€ฆ.
  • animated GIF

โ€ฆ as presentation tools, that โ€œbridgeโ€ being the operative word, as animated GIFs cannot match video even respecting the audio capabilities of videos, but there are things we can think of with our web application to improve it. And todayโ€™s start of this quest is to allow for user defined watermark (ie. text) colour on that first slide.

This control may mean that the first slide stands out enough to distinguish it enough from others to tell the user, especially on a rerun of the animated GIF presentation, that the user is at the start of the presentation. Of course, with the video HTML element, this โ€œwe are at the start of the presentationโ€ is pretty obvious by the look of the controls.

Thechanged tutorial_to_animated_gifโšซphp animatedโœ‚GIF creator uses and incorporates a new input type=color colour picker.

Previous relevant Haiku Multimedia via Media Record Genericization Tutorial is shown below.

Haiku Multimedia via Media Record Genericization Tutorial

Haiku Multimedia via Media Record Genericization Tutorial   ๐Ÿ”

Coming at yesterdayโ€™s Haiku Multimedia via Media Record Background Tutorial โ€ฆ

  • we start to allow a comma separated list of user entered image URLs into the Background URL textbox as a possibility โ€ฆ
  • along the way getting into some โ€œData-URI http error 414โ€ problems we needed โ€œconsole.logโ€ to help us out debugging โ€ฆ hence todayโ€™s tutorial picture โ€ฆ and โ€ฆ
  • a new genericization strategy โ€ฆ

โ€ฆ with a familiar idea, for us, that being โ€ฆ

change a hardcoding into a dynamic HTML concept

โ€ฆ that dynamic HTML concept being the most โ€œhands onโ€ genericization tool we could think of as far as โ€œuser controlโ€ goes. The hardcoding is pretty obvious for this current โ€œHaiku Creationโ€ web application, that being โ€ฆ



(the noun) "Haiku"

โ€ฆ and the most โ€œhands onโ€ genericization tool we could think of being a favourite of ours โ€ฆ



<h1><div onblur=titlefix(); style="display:inline-block;border:2px solid transparent;" id=subjectword contenteditable=true title='Can change this'>Haiku</div> Animated GIF Creator</h1>

โ€ฆ the HTML div element attribute contenteditable=true โ€ฆ teamed up with the Javascript โ€ฆ



function titlefix() {

var dgebiswih=document.getElementById('subjectword').innerHTML;

var dgebiswihtwo=dgebiswih;

if (dgebiswihtwo == "") { dgebiswihtwo="-"; }

document.title=document.title.replace(lastword, dgebiswihtwo);

document.getElementById('bag').value=document.getElementById('bag').value.replace(lastword, dgebiswihtwo);

document.getElementById('bemail').value=document.getElementById('bemail').value.replace(lastword, dgebiswihtwo);

document.getElementById('bsms').value=document.getElementById('bsms').value.replace(lastword, dgebiswihtwo);

document.getElementById('aemail').href=document.getElementById('aemail').href.replace(encodeURIComponent(lastword), encodeURIComponent(dgebiswihtwo));

prefix=prefix.replace('stitle=' + encodeURIComponent('My ' + lastword), 'stitle=' + encodeURIComponent(('My ' + dgebiswih + '`').replace('My `','').replace('`','')));

lastword=dgebiswihtwo;

}

But why the border:2px solid transparent; CSS styling? Well, that โ€œHaikuโ€ hardcoding replacement could be โ€œnothingโ€ (ie. a blank string, effectively like an implied English โ€œaโ€ article to reach a web application title of โ€œAnimated GIF Creatorโ€, and here we leave off any topic line annotations, if that swings the bargain for you). But how to change from โ€œnothingโ€ back to โ€œsomethingโ€? That 2px transparent border gives you a way to find your elusive โ€ฆ



<h1><div onblur=titlefix(); style="display:inline-block;border:2px solid transparent;" id=subjectword contenteditable=true title='Can change this'></div> Animated GIF Creator</h1>

โ€ฆ again.

So, on top of yesterdayโ€™s Haiku Multimedia via Media Record Share Tutorial we changed โ€ฆ

Previous relevant Haiku Multimedia via Media Record Background Tutorial is shown below.

Haiku Multimedia via Media Record Background Tutorial

Haiku Multimedia via Media Record Background Tutorial   ๐Ÿ”

Yesterdayโ€™s Haiku Multimedia via Media Record Share Tutorial helped with the โ€œHaiku feelโ€ to our Haiku Creation web application. The thing is, though, as we found with the video and YouTube API interfacing talents of our (ostenbibly) Karaoke web application, there is good reason to envisage this Haiku Creation web application fitting the bill for other possibilities. With that in mind, we decided to โ€ฆ

  • fix the positioning of the animated GIF in the lower art of the webpage โ€ฆ and โ€ฆ
  • allow the Choose File(s) local browsing functionality โ€ฆ
    1. browse for a single image file that could be the background image behind every (could be Haiku) animated GIF โ€œslideโ€ โ€ฆ or โ€ฆ
    2. browse for multiple image files that could be sequenced background images behind corresponding (could be Haiku) animated GIF โ€œslideโ€ with its (could be Haiku based) textarea derived corresponding record line overlayed annotation for that โ€œslideโ€ โ€ฆ a pretty apt use for multiple property โ€ฆ


      <input type=file accept="image/*,video/*,audio/*" capture multiple></input>

    โ€ฆ still supporting yesterdayโ€™s progress supporting audio and/or video foreground data and email sharing

As you might surmise from this, we are opening the โ€œHaiku feelโ€ up to lots more data than represented by a Haiku (5, 7, 5) syllable of text data arrangement. Weโ€™ll see if the โ€œgenericization driveโ€ continues?!

On top of yesterdayโ€™s Haiku Multimedia via Media Record Share Tutorial we changed โ€ฆ

Previous relevant Haiku Multimedia via Media Record Share Tutorial is shown below.

Haiku Multimedia via Media Record Share Tutorial

Haiku Multimedia via Media Record Share Tutorial   ๐Ÿ”

Everybody is somebodyโ€™s child. And often, in a modular I.T. woooooorrrrlllld a piece of code can be anotherโ€™s child, even though they have an identity as a parent in their own right. It was the latter role we said goodbye to (developing further, right now) with yesterdayโ€™s Media Mix Play Audio Video Mix Concatention Tutorial but we found, returning to our recent Haiku web application, this โ€œVoiceover Ideasโ€ middle child in its โ€ฆ

  • iframe โ€œchildโ€ window (especially where all participants reside on the RJM Programming domain) โ€ฆ
  • popup โ€œchildโ€ window (especially where participants reside on a local web server)

โ€ฆ and other โ€œchildlikeโ€ Ajax/FormData or โ€œnavigation to via HTML formโ€ guises may still need development to satisfy integration requirements (of the Haiku web application, in all its guises).

So working on top of where we left off Haiku work with the recent Haiku Multimedia via Media Record Capture Tutorial we implemented โ€ฆ

Previous relevant Haiku Multimedia via Media Record Capture Tutorial is shown below.

Haiku Multimedia via Media Record Capture Tutorial

Haiku Multimedia via Media Record Capture Tutorial   ๐Ÿ”

Letโ€™s semi-drop the โ€œmacOSโ€ on our โ€œmedia captureโ€ functionality weโ€™re developing currently, because over the last two days it has jumped out of this restrictive thought pattern, either through the โ€œvoiceoverโ€ idea of โ€ฆ

  • non-mobile Adobe Flash Player plugin audio recording (Speech to Audio) โ€ฆ as well as โ€ฆ
  • input type=file capture mobile browsing and/or creating (iOS video) and non-mobile browsing of media with an audio (Speech to Audio) capability โ€ฆ on top of that original โ€ฆ
  • macOS or Mac OS X โ€œsayโ€ command line command Text to Audio original โ€œvoiceoverโ€ idea

โ€ฆ onto yesterdayโ€™s MacOS and Other Mobile Media Record Tutorial you can join the story with, below.

And way back at Mac OS X Text to English Speech Primer Tutorial we can revisit the โ€œsynchronicity of mediaโ€ ideas we are so keen about. Our conduit idea to get us there has been a revisit of the Haiku creation work of Haiku Animated Gif Creator Tutorial where we allow either a โ€ฆ

  • audio data-URI โ€ฆ or โ€ฆ
  • video data-URI

โ€ฆ form the โ€œforegroundโ€ for an animated GIF (Haiku wording) โ€œbackgroundโ€ easy to show the user creating it, and shareable via an email HTML attachment approach, on some email clients (eg. Gmail webmail).

Along the way we repurposed the โ€œdishevelmentโ€ of yesterday into more programmatically restrictive web application functionality to come up with โ€ฆ

โ€ฆ to pull all this together in that tighter way (so long Colombo) for you to try yourself.

Previous relevant MacOS and Other Mobile Media Record Tutorial is shown below.

MacOS and Other Mobile Media Record Tutorial

MacOS and Other Mobile Media Record Tutorial   ๐Ÿ”

Weโ€™re letting a little โ€œdishevelmentโ€ continue with todayโ€™s work on top of yesterdayโ€™s MacOS Speech to Flash Player Audio Record Tutorial.

The reason (to our mind) is that involving mobile functionality into a media web applicationโ€™s sphere of influence is a big step with more than the usual time needed for testing โ€ฆ well, thatโ€™s my excuse, anyway. The major reason for this is that the โ€ฆ



<input type=file accept="video/*,audio/*" capture></input>

โ€ฆ is an incredible recent development (allowing dynamic media creation, with โ€œretakeโ€ possibilities, all because of that one โ€œcaptureโ€ property above) separating the mobile (smart device) platforms from the previous laptop media capture capabilities, and at least doubles the amount of unit testing needed to prove the code workings.

And so, for a little while, some users will be annoyed that they see web application functionality not meant for their platform characteristics.

Sometimes โ€œdishevelmentโ€ can work, too, or โ€œstewing for a dayโ€, because it turns out a piece of functionality you thought to be impossible with a particular platform amazingly becomes possible the next day?! Hence the adage โ€ฆ โ€œmulling is amazingโ€!

Code wise โ€ฆ

Please feel free to try it out yourself, email sharing as you go.

Previous relevant MacOS Speech to Flash Player Audio Record Tutorial is shown below.

MacOS Speech to Flash Player Audio Record Tutorial

MacOS Speech to Flash Player Audio Record Tutorial   ๐Ÿ”

Yesterdayโ€™s MacOS Text to Audio Share Tutorial involved โ€ฆ

  • local web server (over macOS) text to audio (via macOS say) programmatical input source for โ€œvoiceoverโ€ aims โ€ฆ and today, still on โ€ฆ
  • local web server (over macOS) (user) we have speech to audio (via Adobe Flash Player plugin) input source for โ€œvoiceoverโ€ or โ€œdictationโ€ or โ€œvoice memo feelingโ€ aims

โ€ฆ all shareable via email. So these are two non-mobile โ€œvoiceoverโ€ ideas, and we will present a mobile idea into the future, and thereby open a public domain worthy side to the functionality, then. Rereading here, it just tweaked with us that we can offer this โ€œpublic domainโ€ aspect even today with achanged macos_say_recordโšซphp liveโœ‚run link here, and your Flash Player methodology could work as long as you realize it will be later we hide the inapplicable macOS โ€œsayโ€ logics for โ€œpublic domainโ€ usage.

Youโ€™ll see in these changes more interplay among โ€ฆ

  • popup window child windows โ€ฆ and
  • iframe child windows that listen out for the (next) Flash Player *.wav file creation event via a recursive โ€ฆ HTML โ€ฆ
    <?php


    <iframe onload=checkff(this); name=checkflash id=checkflash style=display:none; src='./macos_say_record.php?audiosize=y'></iframe>


    ?>
    โ€ฆ
    <?php


    if (isset($_GET['audiosize'])) {

    // if (file_exists('HTTP://www.rjmprogramming.com.au/MarkItUp/html/audio/audio.wav')) {

    if (isset($_GET['getmecontent'])) {

    $ch = curl_init();

    curl_setopt($ch, CURLOPT_URL, 'HTTP://www.rjmprogramming.com.au/MarkItUp/html/audio/audio.wav');

    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    $output = curl_exec($ch);

    curl_close($ch);

    echo "<html><body onload=\" parent.document.getElementById('audioname').value='audiocapture.wav'; parent.document.getElementById('daudiolater').innerHTML='<audio id=thataudio controls autoplay loop><source type=audio/x-wav src=" . "data:audio/x-wav;base64," . base64_encode($output) . "></source></audio> <a style=display:inline-block;text-decoration:none;cursor:pointer; onclick=emailit(); title=Email>๐Ÿ“ง</a>';\"><p>" . strlen($output) . "</p><div>data:audio/x-wav;base64," . base64_encode($output) . "</div></body></html>";

    } else {

    //$context = stream_context_create(array('http' => array('header'=>'Connection: close\r\n')));

    //$ct=file_get_contents('HTTP://www.rjmprogramming.com.au/MarkItUp/html/audio/audio.wav',false,$context);

    //file_put_contents("x.x",strlen($ct));

    $ch = curl_init();

    curl_setopt($ch, CURLOPT_URL, 'HTTP://www.rjmprogramming.com.au/MarkItUp/html/audio/audio.wav');

    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    $output = curl_exec($ch);

    curl_close($ch);

    echo "<html><body><p>" . strlen($output) . "</p><div></div></body></html>";

    }

    // } else {

    // echo "<html><body><p>-1</p><div></div></body></html>";

    // }

    exit;

    }


    ?>
    โ€ฆ file_get_contents turning out to be so much slower than curl

Without resorting to any passwords we tighten up the interface to the PHP email helper code at the PHP email helper code end by insisting the email only be sent if the user entry into the interim textarea โ€ฆ

  • contains no โ€œ#โ€ characters
  • starts with โ€ฆ data:audio/
  • ends with the same 10 characters passed over to the PHP email helper code

โ€ฆ as per โ€ฆ

<?php


$smt="";

if (isset($_GET['sliceminusten'])) { $smt=' (' . str_replace(" ","+",urldecode($_GET['sliceminusten'])) . ')'; }

if (strlen($smt) == 13 && strpos(str_replace("+"," ",('' . urldecode($_GET['to']))),"@") !== false && str_replace("+"," ",('' . urldecode($_GET['subj']))) != '') {

echo "<html><head><script type='text/javascript'>

var smt=('" . $smt . "').substring(2).substring(0,10), smts='';

function onsm() {

if (window.opener && window.opener !== window) {

if (5 == 5) { // window.opener.document.getElementById('result')) {

document.getElementById('divplace').innerHTML='Email sent' + smts + '.';

//alert(window.opener.document.getElementById('result').slice(-10) + ' vs ' + smt);

return true;

} else {

document.getElementById('divplace').innerHTML='Other green textbox not detected.';

return false;

}

} else {

document.getElementById('divplace').innerHTML='Not a popup window.';

return false;

}

}

function fixta() {

if (document.getElementById('taready').value.indexOf('#') == -1 && (document.getElementById('taready').value.indexOf('data:audio/') == 0 || document.getElementById('taready').value == '')) {

if (document.getElementById('taready').value == '' || (' ' + document.getElementById('taready').value).slice(-10) == smt) {

if (document.getElementById('taready').value != '') {

var midbit=document.getElementById('taready').value.split('data:')[1].split(';')[0] + ' src=' + \"'\";

document.getElementById('taready').value='<body><audio id=thisaudio controls loop><source type=' + midbit + document.getElementById('taready').value.replace(/\ /g,'+') + \"'\" + '></source></audio></body>';

} else {

document.getElementById('taready').value='<body><p></p></body>';

smts=' with the subject only';

}

return true;

} else {

//document.getElementById('divplace').innerHTML='Copy failed because ' + (' ' + document.getElementById('taready').value).slice(-10) + ' paste does not match ' + smt + ' copy.';

document.getElementById('divplace').innerHTML='Copy failed because paste does not match copy.';

return false;

}

} else {

document.getElementById('divplace').innerHTML='Incorrect data';

return false;

}

}

</script></head><body onload=\"document.getElementById('taready').focus();\"><h1 id=status>Paste to lightgreen here (already copied from lightgreen there (but recopy and repaste yourself if last characters" . $smt . " do not match) and click yellow button to Email off this Audio player ...</h1>

<form target=ifplace onsubmit=\"if (fixta()) { return onsm(); } else { return false; }\" action=./emailhtml.php method=POST>

<input type=hidden name=inline value=''></input>

To: <input style=width:80%; type=text name=to value='" . str_replace("+"," ",urldecode($_GET['to'])) . "'></input><br>

Subject: <input style=width:80%; type=text name=subj value='" . str_replace("+"," ",urldecode($_GET['subj'])) . "'></input><br>

<textarea style=width:100%;background-color:lightgreen; cols=80 rows=10 name=tdhuhta id=taready></textarea><br><br>

<input id=sub type=submit style=background-color:yellow; value='Email'></input></form><br>

<iframe style=display:none; name=ifplace id=ifplace src=./emailhtml.php></iframe>

<div id=divplace></div>

</body></html>";

} else {

echo "<html><body><p>Incorrect usage.</p></body></html>";

}

exit;


?>

Previous relevant MacOS Text to Audio Share Tutorial is shown below.

MacOS Text to Audio Share Tutorial

MacOS Text to Audio Share Tutorial   ๐Ÿ”

In order to share the audio file of yesterdayโ€™s MacOS Text to Audio Internationalization Tutorial we cannot use โ€ฆ

  • client based โ€œaโ€ โ€œmailto:โ€ link approaches because โ€ฆ
    1. the size of data is too large
    2. we need to be able to use HTML within Inline HTML Email if we are not happy leaving around RJM Programming web server audio files (which we are not)

    โ€ฆ and so we need to call on โ€ฆ

  • server (public, not local) based code (ie. PHP, for us) that can email Inline HTML Email

โ€ฆ and calling on that server (public, not local) based code you can choose to โ€ฆ

  • involve CORS in an Ajax FormData call or an HTML Form method=POST โ€ฆ or โ€ฆ
  • involve window.PostMessage approach (perhaps involving web server audio files that are temporary) โ€ฆ or, as we decided upon โ€ฆ
  • involve popup web server โ€œinhouseโ€ PHP Inline HTML Email creator helper โ€ฆ that โ€ฆ
    • codes allowances for the caller situation (that situation having ensured a data-URI โ€œcopyโ€ of the audio content in in the web browser buffer ahead of the popup window appearing, all instigated via a new ๐Ÿ“ง email emoji button (&#128231;)) โ€ฆ
    • sets up the PHP code โ€ฆ
      <?php


      echo "<html><head><script type='text/javascript'> function fixta() { if (document.getElementById('taready').value.indexOf('data:') == 0) { var midbit=document.getElementById('taready').value.split('data:')[1].split(';')[0] + ' src=' + \"'\"; document.getElementById('taready').value='<body><audio id=thisaudio controls loop><source type=' + midbit + document.getElementById('taready').value.replace(/\ /g,'+') + \"'\" + '></source></audio></body>'; } } </script></head><body onload=\"document.getElementById('taready').focus();\"><h1 id=status>Paste to lightgreen here (already copied from lightgreen there) and click yellow button to Email off ...</h1>

      <form onsubmit='fixta(); return true;' action=./emailhtml.php method=POST>

      <input type=hidden name=inline value=''></input>

      <input type=hidden name=to value='" . str_replace("+"," ",urldecode($_GET['to'])) . "'></input>

      <input type=hidden name=subj value='" . str_replace("+"," ",urldecode($_GET['subj'])) . "'></input>

      <textarea style=width:100%;background-color:lightgreen; cols=80 rows=10 name=tdhuhta id=taready></textarea><br>

      <input id=sub type=submit style=background-color:yellow; value='Email to " . str_replace("+"," ",urldecode($_GET['to'])) . " ... " . str_replace("+"," ",urldecode($_GET['subj'])) . "'></input></form>

      </body></html>";

      exit;


      ?>
    • awaits the user clicking an interim HTML form submit button โ€ฆ that โ€ฆ
    • recalls itself and really sends the Inline HTML Email containing HTML that includes an audio tag with data-URI content

    โ€ฆ this whole scenario only acceptable in its entirety by iOS Mail apps (but not Gmail Webmail nor macOS Mail (at least with our testing)).

    Again, given the same local web server provisions as outlined on the day before yesterday, feel free to try out achanged macos_say_recordโšซphp macOS โ€œsayโ€ PHP helper with better email sharing functionality.

    Previous relevant MacOS Text to Audio Internationalization Tutorial is shown below.

    MacOS Text to Audio Internationalization Tutorial

    MacOS Text to Audio Internationalization Tutorial   ๐Ÿ”

    Yesterdayโ€™s MacOS Text to Audio Primer Tutorial was very โ€œEnglishโ€, at least hereabouts. We think it would be good to Internationalize the โ€œsayโ€ integration with โ€œ-vโ€ voices in other languages to choose from.

    That โ€œInternationalizationโ€ we have Apple to thank for, because โ€œsayโ€ documents โ€ฆ

    $ say -v โ€˜?โ€™
    Alex en_US # Most people recognize me by my voice.
    Alice it_IT # Salve, mi chiamo Alice e sono una voce italiana.
    Alva sv_SE # Hej, jag heter Alva. Jag รคr en svensk rรถst.
    Amelie fr_CA # Bonjour, je mโ€™appelle Amelie. Je suis une voix canadienne.
    Anna de_DE # Hallo, ich heiรŸe Anna und ich bin eine deutsche Stimme.
    Carmit he_IL # ืฉืœื•ื. ืงื•ืจืื™ื ืœื™ ื›ืจืžื™ืช, ื•ืื ื™ ืงื•ืœ ื‘ืฉืคื” ื”ืขื‘ืจื™ืช.
    Claire nl_NL # Hallo, mijn naam is Claire. Ik ben een Nederlandse stem.
    Damayanti id_ID # Halo, nama saya Damayanti. Saya berbahasa Indonesia.
    Daniel en_GB # Hello, my name is Daniel. I am a British-English voice.
    Diego es_AR # Hola, me llamo Diego y soy una voz espaรฑola.
    Ellen nl_BE # Hallo, mijn naam is Ellen. Ik ben een Belgische stem.
    Fiona en-scotland # Hello, my name is Fiona. I am a Scottish-English voice.
    Fred en_US # I sure like being inside this fancy computer
    Ioana ro_RO # Bunฤƒ, mฤƒ cheamฤƒ Ioana . Sunt o voce romรขneascฤƒ.
    Joana pt_PT # Olรก, chamo-me Joana e dou voz ao portuguรชs falado em Portugal.
    Jorge es_ES # Hola, me llamo Jorge y soy una voz espaรฑola.
    Juan es_MX # Hola, me llamo Juan y soy una voz mexicana.
    Kanya th_TH # เธชเธงเธฑเธชเธ”เธตเธ„เนˆเธฐ เธ”เธดเธ‰เธฑเธ™เธŠเธทเนˆเธญKanya
    Karen en_AU # Hello, my name is Karen. I am an Australian-English voice.
    Kate en_GB # Hello, my name is Kate. I am a British-English voice.
    Kyoko ja_JP # ใ“ใ‚“ใซใกใฏใ€็งใฎๅๅ‰ใฏKyokoใงใ™ใ€‚ๆ—ฅๆœฌ่ชžใฎ้Ÿณๅฃฐใ‚’ใŠๅฑŠใ‘ใ—ใพใ™ใ€‚
    Laura sk_SK # Ahoj. Volรกm sa Laura . Som hlas v slovenskom jazyku.
    Lekha hi_IN # เคจเคฎเคธเฅเค•เคพเคฐ, เคฎเฅ‡เคฐเคพ เคจเคพเคฎ เคฒเฅ‡เค–เคพ เคนเฅˆ. เคฎเฅˆเค‚ เคนเคฟเคจเฅเคฆเฅ€ เคฎเฅ‡เค‚ เคฌเฅ‹เคฒเคจเฅ‡ เคตเคพเคฒเฅ€ เค†เคตเคพเคœเคผ เคนเฅ‚เค.
    Luca it_IT # Salve, mi chiamo Luca e sono una voce italiana.
    Luciana pt_BR # Olรก, o meu nome รฉ Luciana e a minha voz corresponde ao portuguรชs que รฉ falado no Brasil
    Maged ar_SA # ู…ุฑุญุจู‹ุง ุงุณู…ูŠ Maged. ุฃู†ุง ุนุฑุจูŠ ู…ู† ุงู„ุณุนูˆุฏูŠุฉ.
    Mariska hu_HU # รœdvรถzlรถm! Mariska vagyok. ร‰n vagyok a magyar hang.
    Mei-Jia zh_TW # ๆ‚จๅฅฝ๏ผŒๆˆ‘ๅซ็พŽไฝณใ€‚ๆˆ‘่ชชๅœ‹่ชžใ€‚
    Melina el_GR # ฮ“ฮตฮนฮฑ ฯƒฮฑฯ‚, ฮฟฮฝฮฟฮผฮฌฮถฮฟฮผฮฑฮน Melina. ฮ•ฮฏฮผฮฑฮน ฮผฮนฮฑ ฮตฮปฮปฮทฮฝฮนฮบฮฎ ฯ†ฯ‰ฮฝฮฎ.
    Milena ru_RU # ะ—ะดั€ะฐะฒัั‚ะฒัƒะนั‚ะต, ะผะตะฝั ะทะพะฒัƒั‚ Milena. ะฏ โ€“ ั€ัƒััะบะธะน ะณะพะปะพั ัะธัั‚ะตะผั‹.
    Moira en_IE # Hello, my name is Moira. I am an Irish-English voice.
    Monica es_ES # Hola, me llamo Monica y soy una voz espaรฑola.
    Nora nb_NO # Hei, jeg heter Nora. Jeg er en norsk stemme.
    Oliver en_GB # Hello, my name is Oliver. I am a British-English voice.
    Paulina es_MX # Hola, me llamo Paulina y soy una voz mexicana.
    Samantha en_US # Hello, my name is Samantha. I am an American-English voice.
    Sara da_DK # Hej, jeg hedder Sara. Jeg er en dansk stemme.
    Satu fi_FI # Hei, minun nimeni on Satu. Olen suomalainen รครคni.
    Serena en_GB # Hello, my name is Serena. I am a British-English voice.
    Sin-ji zh_HK # ๆ‚จๅฅฝ๏ผŒๆˆ‘ๅซ Sin-jiใ€‚ๆˆ‘่ฌ›ๅปฃๆฑ่ฉฑใ€‚
    Tessa en_ZA # Hello, my name is Tessa. I am a South African-English voice.
    Thomas fr_FR # Bonjour, je mโ€™appelle Thomas. Je suis une voix franรงaise.
    Ting-Ting zh_CN # ๆ‚จๅฅฝ๏ผŒๆˆ‘ๅซTing-Tingใ€‚ๆˆ‘่ฎฒไธญๆ–‡ๆ™ฎ้€š่ฏใ€‚
    Tom en_US # Hello, my name is Tom. I am an American-English voice.
    Veena en_IN # Hello, my name is Veena. I am an Indian-English voice.
    Victoria en_US # Isnโ€™t it nice to have a computer that will talk to you?
    Xander nl_NL # Hallo, mijn naam is Xander. Ik ben een Nederlandse stem.
    Yelda tr_TR # Merhaba, benim adฤฑm Yelda. Ben Tรผrkรงe bir sesim.
    Yuna ko_KR # ์•ˆ๋…•ํ•˜์„ธ์š”. ์ œ ์ด๋ฆ„์€ Yuna์ž…๋‹ˆ๋‹ค. ์ €๋Š” ํ•œ๊ตญ์–ด ์Œ์„ฑ์ž…๋‹ˆ๋‹ค.
    Yuri ru_RU # ะ—ะดั€ะฐะฒัั‚ะฒัƒะนั‚ะต, ะผะตะฝั ะทะพะฒัƒั‚ Yuri. ะฏ โ€“ ั€ัƒััะบะธะน ะณะพะปะพั ัะธัั‚ะตะผั‹.
    Zosia pl_PL # Witaj. Mam na imiฤ™ Zosia, jestem gล‚osem kobiecym dla jฤ™zyka polskiego.
    Zuzana cs_CZ # Dobrรฝ den, jmenuji se Zuzana. Jsem ฤeskรฝ hlas.

    โ€ฆ to go on here, as a help for this level of โ€œInternationalizationโ€. Another โ€œlevelโ€ again would be to translate the webpage and menu wording, but weโ€™ve decided against that here today.

    So we add a language dropdown and a voice dropdown to help the user explore this Text to Audio functionality accessing a macOS or Mac OS X operating system.

    Also, today, weโ€™ve introduced โ€œ.m4aโ€ (audio/mp4) as the default audio file extension to use with the file created via โ€œsayโ€ โ€œ-oโ€ switch for all but Safari, as this works better for โ€œall but Safariโ€ (absolutely).

    Given the same local web server provisions as outlined yesterday feel free to try out achanged macos_say_recordโšซphp macOS โ€œsayโ€ PHP helper with better Internationalization functionality, thanks in large part to the great ideas from this useful link.

    Previous relevant MacOS Text to Audio Primer Tutorial is shown below.

    MacOS Text to Audio Primer Tutorial

    MacOS Text to Audio Primer Tutorial   ๐Ÿ”

    The previous Mac OS X Text to English Speech Primer Tutorial โ€ฆ

    • lauded the โ€ฆ

      Text to English Speech via Mac OS Xโ€™s command line say command

    • and today we write some PHP (with its very useful exec conduit to โ€œsayโ€) to make use of the same (macOS) โ€œsayโ€ and its Text to Audio talents (via its โ€œ-oโ€ switch usage)

    โ€ฆ and itโ€™s at times like this we wish that the RJM Programming domainโ€™s web server had a macOS operating system. Alas, โ€œsayโ€ is a macOS and Mac OS X application, but not a Linux one.

    None the less, we integrated โ€ฆ

    โ€ฆ so that if you had a MAMP local Apache/PHP/MySql web server going, and you โ€ฆ

    • downloaded tutorial_to_animated_gifโšซphp to same MAMP subdirectory as โ€ฆ
    • downloaded haiku_animated_gifโšซhtml to same MAMP place (which can be the same MAMP document root place as talked about below, in which case HTTP://localhost:8888/haiku_animated_gif.html is what youโ€™d type into the web browser address bar to try this for yourself on a macOS or Mac OS X system) โ€ฆ and โ€ฆ
    • downloaded macos_say_recordโšซphp to MAMP document root (for us, equating to URL HTTP://localhost:8888/macos_say_record.php)

    โ€ฆ then you would be in the position to see a Haiku creation scenario (where we used the Safari web browser) like with todayโ€™s tutorial picture, interesting, in our view, regarding the integration โ€œtacticsโ€ โ€ฆ

    • parent Haiku window opens โ€ฆ
    • child (popup) PHP โ€œsayโ€ helper web application โ€ฆ which โ€ฆ
    • passes back to parent โ€ฆ


      window.opener.document.getElementById('aurl').value=document.getElementById('result').value;

      window.opener.atab(window.opener.document.getElementById('aurl'));

    โ€ฆ achieving functionality we often ask HTML iframe elements achieve for our code. HTML iframe does have a role today, though. It uses a favoured โ€œclient pre-emptive iframeโ€ approach to determine whether we even try to open that popup window above via โ€ฆ

    • HTML โ€ฆ


      <div id=dif></div>
    • Javascript โ€ฆ


      var mampok=false, mampprefix='';



      if (document.URL.indexOf('/localhost') != -1) {

      mampprefix="//localhost" + document.URL.split('/localhost')[1].split('/')[0] + "/";

      document.getElementById('dif').innerHTML="<iframe onload='oicheck(this);' style='display:none;' src='//localhost" + document.URL.split('/localhost')[1].split('/')[0] + "/'></iframe>";

      }



      function oicheck(iois) {

      mampok=false;

      if (iois != null) {

      var aconto = (iois.contentWindow || iois.contentDocument);

      if (aconto != null) {

      if (aconto.document) { aconto = aconto.document; }

      if (aconto.body != null) {

      if (aconto.body.innerHTML.toLowerCase().indexOf('>not found<') == -1 && aconto.body.innerHTML.toLowerCase().indexOf("our home page for your perusal") == -1) { mampok=true; }

      }

      }

      }

      }



      // and then later when the textarea has text and its onblur event is triggered ...

      if (mampok) {

      if (wois) { wois.close(); wois=null; }

      wois=window.open(mampprefix + "macos_say_record.php?saythis=" + encodeURIComponent(document.getElementById('myta').value),"_blank","top=460,left=400,width=700,height=400");

      }

      • Previous relevant Mac OS X Text to English Speech Primer Tutorial is shown below.

      Mac OS X Text to English Speech Primer Tutorial

      Mac OS X Text to English Speech Primer Tutorial   ๐Ÿ”

      Weโ€™ve got a few new ideas today โ€ฆ

      1. Text to English Speech via Mac OS Xโ€™s command line say command used by PHP via exec to make sayโšซphp (which is useful as a download to a Mac OS X laptop using MAMP) which, today, does not have a live run because the web server of domain rjmprogramming.com.au is a CentOS Linux server โ€ฆ Linux equivalent of Mac OS Xโ€™s say? โ€ฆ read here
      2. Trying to present this brought up the usual movie production problem with iMovie overlaying the audio on top of the video (though you may want to try, and you could start reading with this link) versus QuickTime Player talent to catch both audio and video tracks (and that we ended up using), but not of the โ€œscreen goings onโ€, alas versus MPlayer OSX Extended which can play separately but not two tracks on top and doesnโ€™t do any reconstituting โ€ฆ so โ€ฆ
      3. Improved on our inhouse Video/Audio synchronizing efforts by allowing audio_videoโšซhtml supervisor (changed in thisway) be able to be called to press one of its preconceived synchronization buttons onload which we do with (the newly added) Macbeth Act 1 Scene 1 โ€ฆ in a small celebration of the Bard โ€ฆ who, am thinking (in that Falstaff way), would have got a huge chuckle out of โ€œanonymousโ€ instead of โ€œanonโ€ during the Three Witches scene โ€ฆ we had to do something to say Happy Birthday

      Along the way we tried filming the MacBook Pro with the iPad to a YouTube โ€ฆ

      โ€ฆ but werenโ€™t happy with the audio quality, alas (too/two).

      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.

      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.

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *