Use Watson Speech to Text, Language Translator, and Text to Speech in a web app with React components
This repository will not be updated. The repository will be kept available in read-only mode.
In this code pattern, we will create a language translator web app. Built with React components and a Node.js server, the app will capture audio input and stream it to a Watson Speech to Text service. As the input speech is transcribed, it will also be sent to a Watson Language Translator service to be translated into the language you select. Both the transcribed and translated text will be displayed by the app in real time. Each completed phrase will be sent to Watson Text to Speech to be spoken in your choice of locale-specific voices.
The best way to understand what is real-time transcription/translation vs. "completed phrase" vocalization is to try it out. You'll notice that the text is updated as words and phrases are completed and become better understood in context. To avoid backtracking or overlapping audio, only completed phrases are vocalized. These are typically short sentences or utterances where a pause indicates a break.
For the best live experience, wear headphones to listen to the translated version of what your microphone is listening to. Alternatively, you can use the toggle buttons to record and transcribe first without translating. When ready, select a language and voice and then enable translation (and speech).
When you have completed this code pattern, you will understand how to:
NOTE: This code pattern includes instructions for running Watson services on IBM Cloud or with the Watson API Kit on IBM Cloud Pak for Data. Click here for more information about IBM Cloud Pak for Data.
Note: You can skip this step if you will be using the
Deploy to Cloud Foundry on IBM Cloud
button below. That option automatically creates the services and binds them (providing their credentials) to the application.
Provision the following services:
The instructions will depend on whether you are provisioning services using IBM Cloud Pak for Data or on IBM Cloud.
Click to expand one:
Use the following instructions for each of the three services.
The services are not available by default. An administrator must install them on the IBM Cloud Pak for Data platform, and you must be given access to the service. To determine whether the service is installed, Click the Services icon () and check whether the service is enabled.
Click on one of the options below for instructions on deploying the Node.js server.
NOTE: The app was developed using Chrome on macOS. Browser compatibility issues are still being worked out.
Browse to your app URL
Select a speech recognition model
Select an output language and voice
Use the Speech to Text toggle
Speech to Text
button (which becomes Stop Listening
) to begin recording audio
and streaming it to Speech to Text. Press the button again to stop listening/streaming.Use the Language Translation toggle
Language Translation
button (which becomes Stop Translating
) is also a toggle.
You can leave it enabled to translate while transcribing, or use it after you see the
transcribed text that you'd like to translate and say.Disable Text to Speech
Changing the language and voice
Resetting the transcribed text
The transcribed text will be cleared when you do any of the following:
Speech to Text
to restart listeningThis code pattern is licensed under the Apache License, Version 2. Separate third-party code objects invoked within this code pattern are licensed by their respective providers pursuant to their own separate licenses. Contributions are subject to the Developer Certificate of Origin, Version 1.1 and the Apache License, Version 2.