|
|
- <!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>
|
