You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
168 lines
5.9 KiB
168 lines
5.9 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>meSpeak Flash Fallback</title>
|
|
<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet" type="text/css" />
|
|
<link href="http://fonts.googleapis.com/css?family=Lato:300&subset=latin" rel="stylesheet" type="text/css" />
|
|
|
|
<script type="text/javascript" src="../mespeak.js"></script>
|
|
<script type="text/javascript" src="flashFallback.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
meSpeak.loadConfig("../mespeak_config.json");
|
|
meSpeak.loadVoice("../voices/en/en.json");
|
|
|
|
var fallbackInstalled = false;
|
|
var hasTypedArrays = Boolean(window.Int32Array && window.Float32Array
|
|
&& (window.Int32Array.prototype.subarray || window.Int32Array.subarray)
|
|
),
|
|
canSpeak = (hasTypedArrays && window.meSpeak && meSpeak.canPlay());
|
|
|
|
function checkAndInstall() {
|
|
// check typed array support (we need this) and wav-support (we fallback, if not present)
|
|
if (hasTypedArrays && window.meSpeak && !meSpeak.canPlay()) {
|
|
canSpeak = installFallback();
|
|
}
|
|
}
|
|
|
|
function installFallback() {
|
|
// install with explicit default values
|
|
// swf will be 2px x 2px (h x w), transparent
|
|
return fallbackInstalled = meSpeakFlashFallback.install(
|
|
'meSpeakFallback.swf', // url
|
|
'meSpeakFallback', // id of swf object
|
|
null // parent element to inject into
|
|
// (default: append to body)
|
|
);
|
|
}
|
|
|
|
function fallbackSpeak() {
|
|
meSpeakFlashFallback.speak('Hello world.', { 'speed': 180 } );
|
|
}
|
|
|
|
// some functions for abstracting
|
|
|
|
function speakAny( txt, options, vol ) {
|
|
if (fallbackInstalled) {
|
|
meSpeakFlashFallback.speak( txt, options );
|
|
}
|
|
else if (canSpeak) {
|
|
meSpeak.speak( txt, options, vol );
|
|
}
|
|
}
|
|
|
|
function setVolume( vol) {
|
|
if (fallbackInstalled) {
|
|
meSpeakFlashFallback.setVolume( vol );
|
|
}
|
|
else if (canSpeak) {
|
|
meSpeak.setVolume( vol );
|
|
}
|
|
}
|
|
|
|
function fallbackReady() {
|
|
// check if the swf has loaded and performed a handshake, indicating that it's available
|
|
return meSpeakFlashFallback.ready();
|
|
}
|
|
|
|
// install only, if needed
|
|
// if (document.addEventListener) document.addEventListener('DOMContentLoaded', checkAndInstall, false);
|
|
|
|
// install unconditionally (for testing purpose)
|
|
if (document.addEventListener) document.addEventListener('DOMContentLoaded', installFallback, false);
|
|
</script>
|
|
|
|
<style type="text/css">
|
|
html
|
|
{
|
|
margin: 0;
|
|
padding: 2em 1.5em 4.5em 1.5em;
|
|
background-color: #e2e3e4;
|
|
}
|
|
body
|
|
{
|
|
max-width: 900px;
|
|
padding: 2px 40px 60px 40px;
|
|
margin: 0 auto 0 auto;
|
|
background-color: #fafafb;
|
|
color: #111;
|
|
font-family: 'Open Sans',sans-serif;
|
|
font-size: 13px;
|
|
line-height: 19px;
|
|
}
|
|
h1,h2,h3,h4
|
|
{
|
|
font-family: 'Lato',sans-serif;
|
|
font-weight: 300;
|
|
}
|
|
h1 {
|
|
font-size: 46px;
|
|
line-height: 46px;
|
|
color: #2681a7;
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
padding: 0;
|
|
}
|
|
h2
|
|
{
|
|
font-size: 36px;
|
|
color: #111;
|
|
margin-top: 0;
|
|
margin-bottom: 1.5em;
|
|
clear: both;
|
|
}
|
|
h1 span.pict { font-size: 38px; color: #ccc; margin-left: 0.5em; letter-spacing: -2px; }
|
|
p.codesample,xmp
|
|
{
|
|
margin: 1em 0;
|
|
padding: 1em 0 1em 2em;
|
|
white-space: pre;
|
|
font-family: monospace;
|
|
line-height: 18px;
|
|
background-color: #f2f3f5;
|
|
color: #111;
|
|
}
|
|
a { color: #006f9e; }
|
|
a:hover,a:focus { color: #2681a7; }
|
|
a:active { color: #cd360e; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>meSpeak.js <span class="pict">(( • ))</span></h1>
|
|
<h2>Flash Fallback <small>(for IE 10)</small></h2>
|
|
|
|
<p>A fallback to play meSpeak's wav-files via Flash.<br />Since typed arrays are still a requirement, the only use-case is MS Internet Explorer 10.<br />
|
|
Please note that, since we may not send binary data to a swf-object, the data has to be copied internally to a binary object, which may take some time and memory.<br />Because of this, the status of this solution is at best "experimental" and not for everyday use.</p>
|
|
<p>The fallback "meSpeakFallback.swf" uses the <a href="http://code.google.com/p/as3wavsound/">AS3WavSound</a> library (v0.9) for wav-playback inside the SWF. (Ironically Flash doesn't support native wav-playback either.)<br />The swf-file is compiled for network use, meaning it will work only, if loaded over a network (web-server).</p>
|
|
|
|
<p>For testing, the fallback is installed for all browsers on this page:
|
|
<input type="button" value="speak: Hello world." onclick="fallbackSpeak();" /></p>
|
|
|
|
<p>See page source for API & details.</p>
|
|
<p>Download: <a href="http://www.masswerk.at/mespeak/msie_flashFallback.zip">msie_flashFallback.zip</a><br />
|
|
<em>(Installation: Put the unzipped directory inside your mespeak-directory.)</em></p>
|
|
|
|
<hr style="margin-top: 2em; margin-bottom: 2em;">
|
|
<p><strong>A Note on Usage:</strong><br />While the fallback-script strips down the coded needed to inject a swf-object to a minimum, best practice would be to include the script only, if applicable (i.e.: for MS IE 10 only), using MS-specific conditional comments:</p>
|
|
|
|
<xmp style="margin-left: 1em;">
|
|
<!--[if IE 10]>
|
|
<script type="text/javascript" src="flashFallback.js"></script>
|
|
<![endif]-->
|
|
</xmp>
|
|
<p>If doing so, you would have to check for the existence of <code>meSpeakFlashFallback</code> first, before calling it:</p>
|
|
|
|
<xmp style="margin-left: 1em;">
|
|
if (window.meSpeakFlashFallback) callbackInstalled = meSpeakFlashFallback.install();
|
|
|
|
// later, see page source for API details and usage
|
|
if (callbackInstalled) meSpeakFlashFallback.speak('Hello world.');
|
|
</xmp>
|
|
<p>This way, page- and memory-loads are reduced to a minimum for all browsers.</p>
|
|
<p>Please note that there is a delay between calling <code>install()</code> and the fallback actually being available, since the swf-file has to load and initialize first.</p>
|
|
<p> </p>
|
|
<p>Norbert Landsteiner, mass:werk – media environments, <a href="http://www.masswerk.at/" target="_top">www.masswerk.at</a><br />
|
|
Vienna, July 2013</p>
|
|
</body>
|
|
</html>
|