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

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

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

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


Тестирование новых возможностей – нажмите на кнопки

Сказать «Привет» Распознать голос


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

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

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

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

Чтение речи

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

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

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

Тарас Сереванн, эксперт в области IT магии