mespeak/multipartExample.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8" />
   5         <title>meSpeak.js &mdash; Multipart Example</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
  11 <script type="text/javascript">
  12
  13 meSpeak.loadConfig("mespeak_config.json");
  14 meSpeak.loadVoice("voices/en/en-us.json");
  15 meSpeak.loadVoice("voices/fr.json");
  16
  17
  18 var parts = [
  19   { text: "Travel to",      voice: "en/en-us", variant: "m3" },
  20   { text: "Paris",          voice: "fr",       variant: "f5" },
  21   { text: "at light speed", voice: "en/en-us", variant: "m3" }
  22 ];
  23
  24 function speakIt() {
  25   // called by button
  26   meSpeak.speakMultipart(parts);
  27 }
  28
  29 function speakItWithDefaults() {
  30   // called by button
  31   meSpeak.speakMultipart(parts, {pitch: 35, speed: 160});
  32 }
  33
  34 </script>
  35 <style type="text/css">
  36         html
  37         {
  38                 margin: 0;
  39                 padding: 2em 1.5em 4.5em 1.5em;
  40                 background-color: #e2e3e4;
  41         }
  42         body
  43         {
  44                 max-width: 900px;
  45                 padding: 2px 40px 60px 40px;
  46                 margin: 0 auto 0 auto;
  47                 background-color: #fafafb;
  48                 color: #111;
  49                 font-family: 'Open Sans',sans-serif;
  50                 font-size: 13px;
  51                 line-height: 19px;
  52         }
  53         h1,h2,h3
  54         {
  55                 font-family: 'Lato',sans-serif;
  56                 font-weight: 300;
  57         }
  58         h1 {
  59                 font-size: 46px;
  60                 line-height: 46px;
  61                 color: #2681a7;
  62                 margin-top: 0.5em;
  63                 margin-bottom: 0.5em;
  64                 padding: 0;
  65         }
  66         h2
  67         {
  68                 font-size: 36px;
  69                 color: #111;
  70                 margin-top: 0;
  71                 margin-bottom: 1.5em;
  72                 clear: both;
  73         }
  74         h3
  75         {
  76                 font-size: 24px;
  77                 color: #111;
  78                 margin-top: 2em;
  79         }
  80         h1 span.pict { font-size: 38px; color: #ccc; margin-left: 0.5em; letter-spacing: -2px; }
  81         form p
  82         {
  83                 margin-top: 0.5em;
  84                 margin-bottom: 0.5em;
  85         }
  86         p.codesample
  87         {
  88                 margin: 1em 0;
  89                 padding: 1em 0 1em 2em;
  90                 white-space: pre;
  91                 font-family: monospace;
  92                 line-height: 18px;
  93                 background-color: #f2f3f5;
  94                 color: #111;
  95         }
  96         p.codesample strong { color: #222; }
  97         a { color: #006f9e; }
  98         a:hover,a:focus { color: #2681a7; }
  99         a:active { color: #cd360e; }
 100         p.action { margin: 1em 0 1em 1.5em; }
 101 </style>
 102 </head>
 103 <body>
 104
 105 <h1>meSpeak.js  <span class="pict">(( &bull; ))</span></h1>
 106 <h2>Multipart Example</h2>
 107
 108 <p>This is an example for mixing multiple parts into a single utterance using <tt>meSpeak.speakMultipart()</tt>.</p>
 109
 110 <p>We will speak the text <em>&quot;Travel to Paris at light speed.&quot;</em> using a female French voice for the word &quot;Paris&quot;.</p>
 111 <p>For this, we break up the sentence in multiple parts, each part representing a continous text to be spoken by a voice. Each part is an object, containing the text to be spoken and any options to be applied.</p>
 112
 113 <p class="action">Try it: <button onclick="speakIt();">Speak It</button></p>
 114
 115 <p class="codesample">
 116 meSpeak.loadConfig(&quot;mespeak_config.json&quot;);
 117 meSpeak.loadVoice(&quot;voices/en/en-us.json&quot;);
 118 meSpeak.loadVoice(&quot;voices/fr.json&quot;);
 119
 120
 121 var parts = [
 122   { text: &quot;Travel to&quot;,      voice: &quot;en/en-us&quot;, variant: &quot;m3&quot; },
 123   { text: &quot;Paris&quot;,          voice: &quot;fr&quot;,       variant: &quot;f5&quot; },
 124   { text: &quot;at light speed&quot;, voice: &quot;en/en-us&quot;, variant: &quot;m3&quot; }
 125 ];
 126
 127 function speakIt() {
 128   // called by button
 129   meSpeak.speakMultipart(parts);
 130 }
 131 </p>
 132
 133 <p>We even may provide any options to be applied as defaults to the individual parts.<br />
 134 (You may apply any options valid for <tt>meSpeak.speak()</tt>.)</p>
 135
 136 <p class="codesample">
 137 function speakItWithDefaults() {
 138   // called by button
 139   meSpeak.speakMultipart(parts, {pitch: 35, speed: 160});
 140 }
 141 </p>
 142 <p class="action">Try it: <button onclick="speakItWithDefaults();">Speak It</button></p>
 143
 144 <p>&nbsp;</p>
 145 <h3>Syntax</h3>
 146 <p>The general form of <tt>meSpeak.speakMultipart()</tt> is analogous to <tt>meSpeak.speak()</tt>, but with an array of objects (the parts to be spoken) as the first argument (rather than a single text):</p>
 147
 148 <p class="codesample">
 149 <strong>meSpeak.speakMultipart(</strong> &lt;parts-array&gt; [, &lt;options-object&gt; [, &lt;callback-function&gt; ]] <strong>)</strong>;
 150
 151 <strong>meSpeak.speakMultipart(</strong>
 152   [
 153     { text: &quot;text-1&quot;, &lt;other options&gt; ] },
 154     { text: &quot;text-2&quot;, &lt;other options&gt; ] },
 155     ...
 156     { text: &quot;text-n&quot;, &lt;other options&gt; ] },
 157   ],
 158   { option1: value1, option2: value2 .. },
 159   callback
 160 <strong>)</strong>;
 161 </p>
 162 <p>Only the the first argument is mandatory, any further arguments are optional.<br />
 163 The <em>parts-array</em> must contain a single element (of type object) at least.<br />
 164 For any other options refer to <tt>meSpeak.speak()</tt>.<br />
 165 The method returns &mdash; like <tt>meSpeak.speak()</tt> &mdash; either an ID, or, if called with the <tt>&quot;rawdata&quot;</tt> option (in the general options / second argument), a stream-buffer representing the generated wav-file.</p>
 166
 167
 168 <p>&nbsp;</p>
 169 <p>N. Landsteiner, 2014</p>
 170
 171 </body>
 172 </html>