JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset><legend>Input</legend>
<select id="in">
  <option value="en" selected>en</option> 
  <option value="de">de</option> 
  <option value="fr">fr</option> 
  <option value="cs">cs</option> 
  <option value="sk">sk</option> 
</select>
<button type="button" disabled>Go</button>
</fieldset>

<fieldset><legend>Output</legend>
  <label><input type="checkbox" /> Translate</label><br/>
  <select id="out"></select>
</fieldset>

<pre></pre>

JavaScript

const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
const button = document.querySelector("button");
const out = document.querySelector("#out");
let voices = [];

speechSynthesis.onvoiceschanged = e => {
  if (voices.length) { return; }
  voices = speechSynthesis.getVoices();
  if (!voices.length) { return; }
  
  button.disabled = false;
  voices.forEach((v, i) => {
    let option = document.createElement("option");
    option.innerHTML = v.name;
    option.value = i;
    out.appendChild(option);
  });
}

button.onclick = e => {
  let r = new SR();
  let lang = document.querySelector("#in").value;
  log(`Ready to receive a command in ${lang}.`);
  r.lang = lang;
  r.interimResults = false;
  r.maxAlternatives = 1;
  r.start();

  r.onspeechend = e => {
  	log("--");
    r.stop();
  }

  r.onnomatch = e => log("No match");
  r.onerror = e => log(e.error);
  
  r.onresult = e => {
    let results = event.results;
    let alt = results[results.length-1][0];
    let text = alt.transcript;
    
    log(`Got '${text}' with confidence ${alt.confidence}`);
    let p;
    
    if (document.querySelector("[type=checkbox]").checked) {
      let from = lang.split("-")[0];
      let to = voices[out.value].lang.split("-")[0];
      p = translate(text, from, to);
    } else {
      p = Promise.resolve(text);
    }
    
    p.then(say);
  }
}

function say(text) {
    let u = new SpeechSynthesisUtterance(text);
    u.voice = voices[out.value];
    speechSynthesis.speak(u);
}

function log(x) {
  document.querySelector("pre").innerHTML += `${x}\n`;
}

function translate(text, from, to) {
  log(`Translating '${text}' from ${from} to ${to}`);
  let euc = encodeURIComponent;
  return fetch(`https://translate.yandex.net/api/v1.5/tr.json/translate?text=${euc(text)}&lang=${euc(from)}-${euc(to)}&key=trnsl.1.1.20161125T152027Z.65e73e18a60f3051.7764a7a11754995544ad557501df9e14abbfb6e0`).then(r => r.json()).then(data => {
    let text = data.text[0];
    log(`Received...