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.
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.
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.
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.
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.