Building a Universal Translator

Earlier this year, some of us around the office were rather impressed with Skype Translator. It's a very cool feature that shows just how far realtime translation has come in the last few years.

When I first saw this cool feature, I told my co-workers: "I'm pretty sure we could build something similar to that in a few hours". I didn't want to look like I was just bullshitting them, so I set aside a few hours and built it.

This post outlines how you can build your own universal translator with nothing but Javascript. It's not nearly as feature rich as what Skype is doing. It goes give you an idea of what can be done with existing Javascript API's in Chrome.

TL;DR:
Demo [Chrome only]: https://universal-translator.dotsub.com/ Code: https://github.com/dotsub/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

Google Chrome has a built in speech recognition engine. Their implementation is based on the w3 speech-api community group specification. Using this engine is very simple.

It is important to properly set recognition.lang. To the language the user is speaking. 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. The code is a bit ugly, I stole it out of one of my old projects.

Speech Synthesis

The w3 speech-api also includes a speech synthesis engine. It only takes a few lines to get the browser to speak any line of text.

var msg = new SpeechSynthesisUtterance();
msg.text = "Hello World";
window.speechSynthesis.speak(msg);

Here is the full synthesis part of my universal translator. It takes input from the user translates it 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