Merge pull request #3 from watson-developer-cloud/development

Merge development into master

app.js

@@ -26,7 +26,7 @@ let username = process.env.TEXT_TO_SPEECH_USERNAME;
 let password = process.env.TEXT_TO_SPEECH_PASSWORD;
 
 // On Cloud Foundry, we'll have a VCAP_SERVICES environment variable with credentials.
-let vcapCredentials = vcapServices.getCredentials('speech_to_text');
+let vcapCredentials = vcapServices.getCredentials('text_to_speech');
 
 // Create appropriate token manager and client.
 let client;

src/components/ControlContainer/ControlContainer.js

@@ -10,12 +10,15 @@ import {
   Tile,
 } from 'carbon-components-react';
 import useDataApi from 'use-data-api';
+import { sampleText } from '../../data/sampleText';
 
 const VOICES_ENDPOINT = '/api/voices';
 
 const mapVoicesToDropdownItems = voices =>
   voices
-    .sort((voiceA, voiceB) => voiceA.description > voiceB.description)
+    .sort((voiceA, voiceB) =>
+      voiceA.description.localeCompare(voiceB.description),
+    )
     .map(voice => {
       const colonIndex = voice.description.indexOf(':');
       const voicePersonName = voice.description.substring(0, colonIndex);
@@ -44,11 +47,18 @@ export const ControlContainer = ({ onSynthesize }) => {
 
   // Default to initial voice once all voices are loaded.
   useEffect(() => {
-    if (voices[0]) {
-      setSelectedVoice(mapVoicesToDropdownItems(voices)[0]);
+    if (voices[1]) {
+      onSelectVoice(mapVoicesToDropdownItems(voices)[1]);
     }
   }, [voices]);
 
+  const onSelectVoice = voice => {
+    setSelectedVoice(voice);
+
+    const text = sampleText[voice.id];
+    setText(text);
+  };
+
   return (
     <Tile className="control-container">
       <h3 className="container-title">Input</h3>
@@ -60,7 +70,7 @@ export const ControlContainer = ({ onSynthesize }) => {
             id="voice-model-dropdown"
             label="Select a voice model"
             onChange={newModel => {
-              setSelectedVoice(newModel.selectedItem);
+              onSelectVoice(newModel.selectedItem);
             }}
             items={mapVoicesToDropdownItems(voices)}
             selectedItem={selectedVoice && selectedVoice.label}

src/components/ServiceContainer/ServiceContainer.js

@@ -24,16 +24,17 @@ export const ServiceContainer = () => {
       setError(createError(TOKEN_ERROR_TITLE, authJson));
     }
 
-    try {
-      synthesize({
-        accessToken: authJson.accessToken,
-        element: audioElementRef.current,
-        text,
-        voice: voice.id,
-      });
-    } catch (error) {
-      setError(createError(SYNTHESIZE_ERROR_TITLE, error));
-    }
+    const audio = await synthesize({
+      accessToken: authJson.accessToken,
+      autoPlay: false,
+      element: audioElementRef.current,
+      text,
+      voice: voice.id,
+    });
+    audio.play().catch(error => {
+      console.log('ERROR', error);
+      setError(createError(SYNTHESIZE_ERROR_TITLE, error.message));
+    });
   };
 
   return (