HTML5 API распознавания речи

Автор Кай Ведекинд

«Я не вижу причин, по которым мы (не) использовали бы API распознавания речи,
мы могли бы использовать и другие API, существует множество API». - Д.Т.

Вы когда-нибудь задумывались, можно ли использовать и перемещаться по веб-сайту только с помощью голосовых команд? - Нет? - Это возможно? - Да!

В 2012 году сообщество W3C представило Спецификацию Web Speech API. Целью было включить распознавание и синтез речи в современных браузерах. На дворе июль 2018 года, а WebSpeech API все еще находится в стадии разработки и доступен только в Chrome и Firefox (не поддерживается по умолчанию, но может быть включен).

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

Как веб-разработчик, я был в восторге от спецификации, поскольку она открывает совершенно новый мир возможностей для веб-приложений и новых функций взаимодействия в существующих приложениях. А поскольку Google открыл собственный механизм распознавания речи для поддержки этого API, мы можем использовать одну из лучших технологий распознавания речи. На данный момент API является бесплатным вместе с Google, но нет никаких гарантий, что он будет оставаться таковым в будущем.

API распознавания речи HTML5 позволяет JavaScript иметь доступ к аудиопотоку браузера и преобразовывать его в текст. Я собираюсь показать вам, как использовать API веб-речи, чтобы вы могли пригласить своих пользователей поговорить с вашим текущим или будущим веб-приложением.

Основное использование

Интерфейс распознавания речи находится в объекте window браузера как SpeechRecognition в Firefox и как webkitSpeechRecognition в Chrome.

Начните с установки интерфейса распознавания на SpeechRecognition (независимо от браузера), используя:

window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;

После этого убедитесь, что ваш браузер поддерживает API распознавания речи.

if ('SpeechRecognition' in window) {
  // speech recognition API supported
} else {
  // speech recognition API not supported
}

Следующим шагом будет создание нового объекта распознавания речи.

const recognition = new window.SpeechRecognition();

Этот объект распознавания имеет множество свойств, методов и обработчиков событий.

Характеристики:

• Признание. Грамматики
• Признание.язык
• Признание. Непрерывный
• Распознавание.interimResults (по умолчанию: false)
• Распознавание.maxAlternatives (по умолчанию: 1)
• Признание.serviceURI

Методы:

• Распознавание.abort ()
• Признание.старт ()
• Признание.стоп ()

Обработчики событий:

• Признание.onaudiostart
• Признание.onaudioend
• Признание. Конец
• Признание.Ошибка
• Признание.онноматч
• Признание.он результат
• Признание.onsoundstart
• Признание.onsoundend
• Признание.onspeechstart
• Признание.onspeechend
• Признание.на старт

Имея это в виду, мы можем создать наш первый пример распознавания речи:

const recognition = new window.SpeechRecognition();
recognition.onresult = (event) => {
  const speechToText = event.results[0][0].transcript;
}
recognition.start();

Это попросит пользователя разрешить странице доступ к микрофону. Если вы разрешите доступ, вы можете начать говорить, а когда вы остановитесь, будет запущен дескриптор события onresult, что сделает результаты захвата речи доступными в виде объекта JavaScript.

Обработчик события onresult возвращает SpeechRecognitionEvent со свойством results, которое является двумерным массивом. Я взял первый объект этой матрицы, который содержит свойство transcript. Это свойство содержит распознанную речь в текстовом формате. Если вы не установили свойства interimResults или maxAlternatives, то вы получите только один результат и только одну альтернативу обратно.

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

Потоковая передача результатов

У вас есть два варианта получения результатов; вы можете либо подождать, пока пользователь перестанет говорить, либо получить результаты, когда они будут готовы. Если вы установите recognition.interimResults = true, тогда ваш обработчик событий будет возвращать вам поток результатов, пока вы не перестанете говорить.

Это означает, что вы можете начать визуализацию результатов до того, как пользователь перестанет говорить. С тем же предложением, что и выше: «Добро пожаловать на встречу разработчиков Frontend», я получил следующие промежуточные результаты.

Последний промежуточный результат потоковой передачи имеет флаг isFinal = true, означающий, что распознавание текста завершено.

Другой флаг - maxAlternatives (по умолчанию: 1), который возвращает количество альтернатив распознавания речи.

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

Если вы пробовали приведенные выше примеры, вы, вероятно, заметили, что когда вы перестали говорить, механизм распознавания перестал распознавать. Это потому, что есть флаг recognition.continuous, для которого по умолчанию установлено значение false. Если вы установите recognition.continuous = true, механизм распознавания будет рассматривать каждую часть вашей речи как промежуточный результат.

Из-за этого я изменил обработчик события onresult, чтобы он читал элементы массива результатов каждый раз, когда я что-то говорю. В результате обработчик события onresult будет вызываться каждый раз, когда я заканчиваю предложение.

Работа с акцентами и языками

Если ваши пользователи говорят не на английском языке, вы можете улучшить их результаты, указав языковой параметр withrecognition.lang. Чтобы узнать немецкий, вы должны использовать recognition.lang = "de-DE" или британский акцент recognize.lang = "en-GB". Язык по умолчанию --en-US.

Доступность

Что делать, если вы хотите добавить на свой сайт голосовые команды? Иногда проще сказать, что ты хочешь сделать. Таким образом, распознавание речи может помочь вам в поиске в Интернете, диктовке электронных писем и управлении навигацией в вашем приложении. Многие люди с ограниченными физическими возможностями, которые не могут пользоваться клавиатурой или мышью, полагаются на распознавание речи при использовании компьютера. Чтобы это стало возможным, необходимо надлежащим образом разрабатывать веб-сайты и приложения. Контент должен быть правильно разработан и закодирован, чтобы им можно было управлять с помощью голоса. Ярлыки и идентификаторы элементов управления в коде должны соответствовать их визуальному представлению, чтобы было понятно, какая голосовая команда активирует элемент управления. Распознавание речи может также помочь многим людям с временными ограничениями, например, с травмой руки.

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

Это непростая задача, но не невозможная. Вы должны управлять всеми обратными вызовами, запуском и остановкой распознавания речи, а также обработкой ошибок в случае, если что-то пойдет не так.

Чтобы обрабатывать все речевые команды и действия, я решил написать библиотеку с названием AnyControl. AnyControl - это небольшая библиотека JavaScript SpeechRecognition, которая позволяет вам управлять своим сайтом с помощью голосовых команд. Он построен на основе Webkit Speech API.

AnyControl не имеет зависимостей, его размер составляет всего 3 КБ, и его можно использовать и изменять.

Безопасность

Если вы используете API распознавания речи, скорее всего, ваш браузер запросит у вас разрешение на использование вашего микрофона. На страницах, размещенных на https, вас спрашивают только один раз; вам не нужно повторно предоставлять доступ. Когда вы используете протокол http, браузер будет спрашивать вас каждый раз, когда он хочет записать звук.

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

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

Заключение

API распознавания речи очень полезен для ввода данных, навигации по сайту и команд. Интересно видеть, что можно записать разговор, чтобы получить что-то вроде мгновенной расшифровки стенограммы. У этого API определенно есть некоторые проблемы с безопасностью, когда веб-приложение HTTPS может начать прослушивание в любое время после того, как вы одобрили доступ. Поэтому, если вы используете API распознавания речи, используйте его с осторожностью.

Если вы хотите увидеть больше, посетите мой сайт www.kaiwedekind.com

использованная литература

✉️ Подпишитесь на рассылку еженедельно Email Blast 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ План развития веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .