it Новости Давайте создавать веб-приложения, которые могут слушать!
Давайте создавать веб-приложения, которые могут слушать!

Давайте создавать веб-приложения, которые могут слушать!

464
02 ноября 2020 в 18:28

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

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


Google, Amazon и другие технические гиганты уже успели обзавестись виртуальными помощниками: их продукты умеют не только слушать, но и слышать, понимать, а потом отвечать на запрос пользователя. Архитектура таких приложений очень сложная, но в ее основе всегда лежит один принцип – преобразование человеческой речи в текст.



Итак, как же научить свое веб-приложение слышать пользователей? Давайте разбираться.

.

Принцип работы

Google Chrome сам по себе не наделен функцией распознавания человеческой речи. Расшифровка происходит на серверах компании, куда браузер отправляет аудио-файлы, а потом получает обратно результат. Подробнее об этом можно узнать здесь.


Из-за использования API на серверной части, пользователи SpeechRecognition должны быть в онлайне. Это ограничение, к сожалению, не исчезнет до тех пор, пока в Google не будет реализовано локальное распознавание.


Приступаем к созданию

Давайте поставим перед собой такую задачу - создать HTML-код с полем для ввода информации и кнопкой для распознавания речи пользователей. Обратите внимание, что прослушивание не должно начинаться сразу после того, как страница загрузится: сперва нужно получить согласие пользователя на использование такой возможности.


Вид конечного результата довольно простой:



Нам нужно добавить фрагмент JS-кода, который отвечает за распознавание речи, а затем мы сами же его протестируем! Находиться следующие строки должны в теге script элемента body.


Для прослушивания и дальнейшего преобразования человеческой речи в текстовый вид нам больше ничего не нужно. А сейчас начнем разбираться с JavaScript-кодом.


Переходим на строку 2 и создаем API-экземпляр webkitSpeechRecognition. Далее прописываем булевую переменную, которая принимает одно из двух значений: «прослушивать» или «не прослушивать».


Следующим шагом определяем три функции: 

  1. start,
  2. stop, 
  3. onResult.


Они меняют текст нашей кнопки в зависимости от правильного состояния и начинают либо же останавливают процесс распознавания. Третья функция также формирует итог распознавания и демонстрирует его пользователю.


После запуска кода и нажатия кнопки для начала прослушивания вам нужно будет подтвердить согласие на использование микрофона – только после этого Chrome начнет слушать, что вы говорите.


По завершении в консоли разработчика появится SpeechRecognitionEvent. Давайте проанализируем это событие.


 

Важнейшим свойством здесь является results – список объектов-результатов (SpeechRecognitionResult). В нашем случае он будет всего один, поскольку мы сказали только 1 фразу до остановки прослушивания.


В объекте результата находится перечень объектов SpeechRecognitionAlternative. Первый включает расшифровку сказанного, а также степень уверенности, которая может принимать значения в диапазоне 0-1. Эта цифра позволяет определить наиболее правильную расшифровку среди имеющихся вариантов.


Можно получать и сразу несколько объектов в SpeechRecognitionAlternative. К примеру, если вам хочется, чтобы пользователи сами определяли лучший вариант.


Теперь разберем, за что отвечает recognition.continuous:

  1. recognition.continuous = true, результаты идут друг за другом;
  2. recognition.continuous=false, есть только один-единственный результат.


Какие результаты должна возвращать система – промежуточные или окончательные – определяется recognition.interimResults.


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


Браузерная поддержка

Пока распознавание речи с помощью Web Speech API поддерживается только Chrome для PC и ОС Android (заметьте, что мы применяем webkitSpeechRecognition).

Больше интересных новостей

Комментарии для сайта Cackle