First let’s decompose the steps required. The universal translator needs to do three things:
- Recognise what the user is saying.
- Translate the spoken phrase.
- Speak the result.
As I mentioned before Google Chrome has a built in speech recognition engine. Using this engine is pretty simple.
It is important to properly set recognition.lang to the language the user is speaking. In the full source code this is driven from the spoken language select. Now we have the spoken input from the user. This is all we need to complete step one.
We will use Google’s Translation API to translate our text.
The Web Speech API also includes a speech synthesis engine. It only takes a few lines to get the browser to speak any line of text.
Here is the full speech synthesis part of our universal translator. It takes input from the user translates it to the target language and speaks the result.