Building a Universal Translator

It’s absolutely amazing how fast technology is advancing. Unbeknownst to most users, Google Chrome has the built in capabilities to create a universal translator using nothing but HTML and Javascript.

Chrome implements the Web Speech API which allows you to use speech synthesis and speech recognition from Javascript. In this post I’ll outline how we created https://universal-translator.dotsub.com.

universal translator

First let’s decompose the steps required. The universal translator needs to do three things:

  1. Recognise what the user is saying.
  2. Translate the spoken phrase.
  3. Speak the result.

Speech Recognition

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.  

Machine Translation

We will use Google’s Translation API to translate our text.

Speech Synthesis

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.

Conclusion

There you have it, less than 150 lines of Javascript that makes a universal translator. The finished demo here: https://universal-translator.dotsub.com/. You can look over the code here: https://github.com/dotsub/universal-translator