JSFiddle - React, Tailwind, and code Playground

by Konstantin Cryman

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Распознавание голоса и чтение текста</title>
</head>
<body>

  <button onclick="speech ()">Слушать</button>
  <button onclick="talk ()">Проговорить</button>
  <button onclick="stop ()">Остановить</button>

  <script>
  // Создаем распознаватель
  var recognizer = new webkitSpeechRecognition();

  // Ставим опцию, чтобы распознавание началось ещё до того, как пользователь закончит говорить
  recognizer.interimResults = true;

  // Какой язык будем распознавать?
  recognizer.lang = 'uk_Ua';

  // Используем колбек для обработки результатов
  recognizer.onresult = function (event) {
    var result = event.results[event.resultIndex];
    if (result.isFinal) {
      alert('Вы сказали: ' + result[0].transcript);
    } else {
      console.log('Промежуточный результат: ', result[0].transcript);
    }
  };

  function speech () {
    // Начинаем слушать микрофон и распознавать голос
    recognizer.start();
  }

  var synth = window.speechSynthesis;
  var utterance = new SpeechSynthesisUtterance('Чого не зробиш заради РІЗАТИ РУСНЮ!');

  function talk () {
  	synth.lang = 'uk-Ua';
    synth.speak (utterance);
  }

  function stop () {
    synth.pause();
  }
  </script>

</body>
</html>