{
  "$type": "site.standard.document",
  "path": "/building-a-universal-transaltor/",
  "publishedAt": "2016-01-01T14:02:00.000Z",
  "site": "at://did:plc:6gssgguzeecdttuw4gpdshg2/site.standard.publication/self",
  "tags": [
    "javascript",
    "translation",
    "coding"
  ],
  "textContent": "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.\n\nWhen 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.\n\nThis 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.\n\nTL;DR:Demo [Chrome only]: https://universal-translator.dotsub.com/ Code: https://github.com/dotsub/universal-translator\n\nFirst let's decompose the steps required. The universal translator needs to do three things:\n\nRecognise what the user is saying.\n\nTranslate the spoken phrase.\n\nSpeak the result.\n\nSpeech Recognition\n\nGoogle 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.\n\n[Embedded code (GitHub Gist)]\n\nIt 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.\n\nMachine Translation\n\nWe 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.\n\n[Embedded code (GitHub Gist)]\n\nSpeech Synthesis\n\nThe 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.\n\n[Code block]\n\nHere is the full synthesis part of my universal translator. It takes input from the user translates it and speaks the result.\n\n[Embedded code (GitHub Gist)]\n\nConclusion\n\nThere 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\n\nRead the original post with all embeds and interactive content at https://rants.broonix.ca/building-a-universal-transaltor/",
  "title": "Building a Universal Translator"
}