TTS error logging, browser support notes and example

nfriedly · nfriedly · commit 332ee78d47d9 · 2017-02-22T15:36:14.000-05:00
diff --git a/README.md b/README.md
@@ -76,6 +76,7 @@ Options:
 * voice - the desired playback voice's name - see .getVoices(). Note that the voices are language-specific.
 * autoPlay - set to false to prevent the audio from automatically playing
 
+Relies on browser audio support: should work reliably in Chrome and Firefox on desktop and Android. Edge works with a little help. Safari and all iOS browsers do not seem to work yet.
 
 ## [`WatsonSpeech.SpeechToText`](http://watson-developer-cloud.github.io/speech-javascript-sdk/master/module-watson-speech_speech-to-text.html)
 
diff --git a/examples/static/index.html b/examples/static/index.html
@@ -43,7 +43,8 @@ <h3>File Input</h3>
 
   <h2>Text to Speech</h2>
   <ul>
-    <li><a href="text-to-speech.html">Synthesize text, with pre-loaded token (compatible with Mobile Safari)</a></li>
+    <li><a href="text-to-speech.html">Synthesize text</a></li>
+    <li><a href="text-to-speech-preload.html">Synthesize text, with pre-loaded wav audio (works in Edge)</a></li>
     <li><a href="text-to-speech-custom-voice.html">Synthesize text w/ custom voice</a></li>
   </ul>
 
diff --git a/examples/static/text-to-speech-custom-voice.html b/examples/static/text-to-speech-custom-voice.html
@@ -57,6 +57,8 @@ <h2>Code for this demo:</h2>
       text: document.querySelector('#text').value,
       voice: document.querySelector('#voice').value,
       token: token
+    }).on('error', function(err) {
+      console.log('audio error: ', err);
     });
 
   });
diff --git a/examples/static/text-to-speech-preload.html b/examples/static/text-to-speech-preload.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Basic Example - Watson Text to Speech</title>
+  <link rel="stylesheet" href="style.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+</head>
+<body>
+<div class="container">
+<a href="/">&laquo; Examples</a>
+
+<section>
+    <h2>Basic Text to Speech Example</h2>
+    <p><button id="button">Play Synthesized Text</button></p>
+</section>
+
+<script src="bower_components/watson-speech/dist/watson-speech.js"></script>
+<!-- window.fetch pollyfill for IE/Edge & Older Chrome/FireFox -->
+<script src="bower_components/fetch/fetch.js"></script>
+
+<h2>Code for this demo:</h2>
+<pre><code><script style="display: block;">
+// fetch the toke and create the audio element ahead of time
+var audio;
+fetch('/api/text-to-speech/token')
+  .then(function(response) {
+    return response.text();
+  }).then(function (token) {
+    audio = WatsonSpeech.TextToSpeech.synthesize({
+      text: 'Hello from IBM Watson',
+      token: token,
+      autoPlay: false,
+      accept: 'audio/wav'
+    });
+
+    audio.on('error', function(err) {
+      console.log('audio error: ', err);
+    });
+  });
+document.querySelector('#button').onclick = function () {
+  audio.play();
+};
+</script></code></pre>
+</div>
+</body>
+</html>
diff --git a/examples/static/text-to-speech.html b/examples/static/text-to-speech.html
@@ -32,6 +32,8 @@ <h2>Code for this demo:</h2>
       WatsonSpeech.TextToSpeech.synthesize({
         text: document.querySelector('#text').value,
         token: token
+      }).on('error', function(err) {
+        console.log('audio error: ', err);
       });
     });
 };
