Распознавание голоса и чтение текста в браузере в 3 строки на JavaScript: демонстрация и примеры кода

Распознавание речи — одна из символизирующих современный мир возможностей, которой мы привыкли пользоваться благодаря Siri и Google Now.

Но она присутствует не только в мобильных ассистентах: вы замечали иконку микрофона справа от поля поиска Google?

Распознавание голоса в браузере доступно благодаря мощности нового экспериментального JavaScript API — webkitSpeechRecognition. Другое API под названием speechSynthesis позволяет озвучивать человеческим голосом любой текст.

Распознавание голоса

С точки зрения клиента схема работы Webkit Speech Recognition довольно проста — это «черная коробка», которая автоматически обрабатывает произнесенные слова и на выходе дает обычную строку, с которой вы сможете работать в дальнейшем:

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

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

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

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

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

Подробную документацию можно найти на Mozilla Developer Network. Впрочем, поддержка в браузерах не радует: по состоянию на 2016 год распознавание голоса поддерживает только Opera и Chrome.

Подробную документацию можно найти на Mozilla Developer Network.

Чтение речи

Другое API — speechSynthesis — имеет намного лучшую поддержку: код с его использованием можно запустить не только в Chrome или Opera, но и в Safari, со специальным флагом в Firefox и даже в последнем Microsoft Edge.

Использование сводится к тем самым трем строчкам на чистом JavaScript, о которых говорится в заголовке статьи:

			speechSynthesis.speak(
  new SpeechSynthesisUtterance('Сап, Двач. Я ламповый V8 JavaScript Engine')
);
		

Можно также выбрать голос и настроить ещё кучу других параметров, о которых подробно написано на MDN:

			var voices = speechSynthesis.getVoices();
var utterance = new SpeechSynthesisUtterance('Пацан, который говорил всё на JS');
utterance.voice = voices[1];
speechSynthesis.speak(utterance);