mespeak/msie_flashFallback/index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8" />
   5         <title>meSpeak Flash Fallback</title>
   6         <link href="http://fonts.googleapis.com/css?family=Open+Sans&amp;subset=latin" rel="stylesheet" type="text/css" />
   7         <link href="http://fonts.googleapis.com/css?family=Lato:300&amp;subset=latin" rel="stylesheet" type="text/css" />
   8
   9         <script type="text/javascript" src="../mespeak.js"></script>
  10         <script type="text/javascript" src="flashFallback.js"></script>
  11
  12         <script type="text/javascript">
  13                 meSpeak.loadConfig("../mespeak_config.json");
  14                 meSpeak.loadVoice("../voices/en/en.json");
  15
  16                 var fallbackInstalled = false;
  17                 var hasTypedArrays = Boolean(window.Int32Array && window.Float32Array
  18                         && (window.Int32Array.prototype.subarray || window.Int32Array.subarray)
  19                         ),
  20                         canSpeak = (hasTypedArrays && window.meSpeak && meSpeak.canPlay());
  21
  22                 function checkAndInstall() {
  23                         // check typed array support (we need this) and wav-support (we fallback, if not present)
  24                         if (hasTypedArrays && window.meSpeak && !meSpeak.canPlay()) {
  25                                 canSpeak = installFallback();
  26                         }
  27                 }
  28
  29                 function installFallback() {
  30                         // install with explicit default values
  31                         // swf will be 2px x 2px (h x w), transparent
  32                         return fallbackInstalled = meSpeakFlashFallback.install(
  33                                 'meSpeakFallback.swf', // url
  34                                 'meSpeakFallback',     // id of swf object
  35                                 null                   // parent element to inject into
  36                                                        // (default: append to body)
  37                         );
  38                 }
  39
  40                 function fallbackSpeak() {
  41                         meSpeakFlashFallback.speak('Hello world.', { 'speed': 180 } );
  42                 }
  43
  44                 // some functions for abstracting
  45
  46                 function speakAny( txt, options, vol ) {
  47                         if (fallbackInstalled) {
  48                                 meSpeakFlashFallback.speak( txt, options );
  49                         }
  50                         else if (canSpeak) {
  51                                 meSpeak.speak( txt, options, vol );
  52                         }
  53                 }
  54
  55                 function setVolume( vol) {
  56                         if (fallbackInstalled) {
  57                                 meSpeakFlashFallback.setVolume( vol );
  58                         }
  59                         else if (canSpeak) {
  60                                 meSpeak.setVolume( vol );
  61                         }
  62                 }
  63
  64                 function fallbackReady() {
  65                         // check if the swf has loaded and performed a handshake, indicating that it's available
  66                         return meSpeakFlashFallback.ready();
  67                 }
  68
  69                 // install only, if needed
  70                 // if (document.addEventListener) document.addEventListener('DOMContentLoaded', checkAndInstall, false);
  71
  72                 // install unconditionally (for testing purpose)
  73                 if (document.addEventListener) document.addEventListener('DOMContentLoaded', installFallback, false);
  74         </script>
  75
  76 <style type="text/css">
  77         html
  78         {
  79                 margin: 0;
  80                 padding: 2em 1.5em 4.5em 1.5em;
  81                 background-color: #e2e3e4;
  82         }
  83         body
  84         {
  85                 max-width: 900px;
  86                 padding: 2px 40px 60px 40px;
  87                 margin: 0 auto 0 auto;
  88                 background-color: #fafafb;
  89                 color: #111;
  90                 font-family: 'Open Sans',sans-serif;
  91                 font-size: 13px;
  92                 line-height: 19px;
  93         }
  94         h1,h2,h3,h4
  95         {
  96                 font-family: 'Lato',sans-serif;
  97                 font-weight: 300;
  98         }
  99         h1 {
 100                 font-size: 46px;
 101                 line-height: 46px;
 102                 color: #2681a7;
 103                 margin-top: 0.5em;
 104                 margin-bottom: 0.5em;
 105                 padding: 0;
 106         }
 107         h2
 108         {
 109                 font-size: 36px;
 110                 color: #111;
 111                 margin-top: 0;
 112                 margin-bottom: 1.5em;
 113                 clear: both;
 114         }
 115         h1 span.pict { font-size: 38px; color: #ccc; margin-left: 0.5em; letter-spacing: -2px; }
 116         p.codesample,xmp
 117         {
 118                 margin: 1em 0;
 119                 padding: 1em 0 1em 2em;
 120                 white-space: pre;
 121                 font-family: monospace;
 122                 line-height: 18px;
 123                 background-color: #f2f3f5;
 124                 color: #111;
 125         }
 126         a { color: #006f9e; }
 127         a:hover,a:focus { color: #2681a7; }
 128         a:active { color: #cd360e; }
 129 </style>
 130 </head>
 131 <body>
 132         <h1>meSpeak.js <span class="pict">(( &bull; ))</span></h1>
 133         <h2>Flash Fallback <small>(for IE 10)</small></h2>
 134
 135         <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 />
 136         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 &quot;experimental&quot; and not for everyday use.</p>
 137         <p>The fallback &quot;meSpeakFallback.swf&quot; 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>
 138
 139         <p>For testing, the fallback is installed for all browsers on this page:
 140         <input type="button" value="speak: Hello world." onclick="fallbackSpeak();" /></p>
 141
 142         <p>See page source for API &amp; details.</p>
 143         <p>Download: <a href="http://www.masswerk.at/mespeak/msie_flashFallback.zip">msie_flashFallback.zip</a><br />
 144         <em>(Installation: Put the unzipped directory inside your mespeak-directory.)</em></p>
 145
 146         <hr style="margin-top: 2em; margin-bottom: 2em;">
 147         <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>
 148
 149         <xmp style="margin-left: 1em;">
 150 <!--[if IE 10]>
 151   <script type="text/javascript" src="flashFallback.js"></script>
 152 <![endif]-->
 153         </xmp>
 154         <p>If doing so, you would have to check for the existence of <code>meSpeakFlashFallback</code> first, before calling it:</p>
 155
 156         <xmp style="margin-left: 1em;">
 157 if (window.meSpeakFlashFallback) callbackInstalled = meSpeakFlashFallback.install();
 158
 159 // later, see page source for API details and usage
 160 if (callbackInstalled) meSpeakFlashFallback.speak('Hello world.');
 161         </xmp>
 162         <p>This way, page- and memory-loads are reduced to a minimum for all browsers.</p>
 163         <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>
 164         <p>&nbsp;</p>
 165         <p>Norbert Landsteiner, mass:werk &ndash; media environments, <a href="http://www.masswerk.at/" target="_top">www.masswerk.at</a><br />
 166         Vienna, July 2013</p>
 167 </body>
 168 </html>