Ниже речь пойдет о технологиях работы с голосом в вебе, таких как распознавание и синтез речи. В статье не будет примеров кода или сложного технического описания, моя цель — показать вам возможности этих технологий и уровень их зрелости на примере простого приложения, которое было разработано в рамках изучения данной темы. Ознакомиться с кодом этого приложения вы можете на GitHub.

Что нам дает Web Speech API

Многие согласятся со мной, что адрес на картах и длинные поисковые запросы в телефоне проще вводить голосом. Часто на наши запросы отвечает голосовой помощник. Эти технологии используют многие мобильные приложения, но часто ли вы встречаете подобное на сайтах?
Выгода для пользователей мобильных девайсов очевидна, но не только для них. Web Speech API повышает доступность веб-приложения для людей с ограниченными возможностями и детей. В некоторых случаях технология может быть полезна также пользователям десктопов, например, в веб-чатах.

Попробуйте открыть ссылку на пример работы Web Speech API в вашем Google Chrome (о причинах, по которым я рекомендую именно этот браузер, расскажу позже). Страница, которую вы открыли, разделена на две части:

Генерация речи – попробуйте ввести фразу на выбранном языке и нажать PLAY.
Распознавание речи – нажмите START, разрешите доступ к микрофону и начните говорить.

Ниже вы увидите, как страница преобразует вашу речь в текст.

Проверили? Отлично, переходим к мыслям о том, где это все можно применить в наших веб-приложениях.

Поиск идеального пациента

Внедрить поддержку Speech API можно по всему приложению, но будут ли этим пользоваться? Для распознавания речи, например, хороший вариант — поля для ввода большого количества текста.

В Северстали, несмотря на большое количество сервисов, мы смогли выделить лишь несколько из них, где распознавание речи было бы действительно полезно:

Поиск на внутреннем портале
Страница заявки в техническую поддержку
Чат-боты

К сожалению, мы не нашли вариантов применения генерации речи, поэтому я буду очень благодарен за ваши идеи в комментариях.

Сложности внедрения

Выше, давая ссылку на страницу с примером, я рекомендовал открывать ее в Google Chrome. Дело в том, что данный пример отлично работает в Chrome на десктопах и сносно в мобильной версии, но другие браузеры не отличаются хорошей поддержкой этого API. Если генерация речи работает в основных браузерах, то поддержка распознавания речи крайне ограничена.

Подробнее о поддержке браузерами

Так как демо сделано на коленке, оно не будет идеально работать (а может быть, и вообще не будет работать) с теми браузерами, которые поддерживают Web Speech API лишь частично или требуют для этого написания дополнительного кода. Попробовав запустить его в Firefox, Edge или Safari, вы поймете, что технология очень сырая, и использовать её как есть — не самая хорошая идея.

Обходные пути

Окей, мы решили внедрять технологию, но столкнулись с проблемами ее поддержки, как быть?
Для начала стоить понять, будете ли вы использовать Web Speech API в тех браузерах, где это работает, или полностью откажетесь от него. Для себя мы решили, что внедрять API, которое имеет слабую поддержку и может измениться — не лучшая идея, поэтому начали поиски альтернатив.

Pocketsphinx и Tensorflow. Если вы хотите, чтобы распознавание речи работало в ваших PWA (Progressive Web Application) приложениях оффлайн — это отличный выбор, но могут возникнуть проблемы с распознаванием некоторых языков.

Облачные сервисы. API для работы с речью есть у многих облачных сервисов. При выборе этого варианта мы получаем прекрасное распознавание речи и абонентскую плату впридачу =)

Собственный API. Самый сложный и долгий путь, который требует дополнительных знаний и железа для развертывания быстрого и качественного сервиса.

Что и когда использовать — решать вам, я бы рекомендовал начать с облачных сервисов для быстрого старта ваших прекрасных веб-приложений. Также, если вы захотите поиграть с Web Speech API, вы можете использовать мой код в любых целях.
Спасибо.

Ссылки:
Web Speech API
Демо приложение

Немного Web Speech API для современных веб-приложений