Речевой input в формах HTML5

Дата публикации: 2014-02-19

От автора: Способ нашего взаимодействия с компьютерами за прошедшее десятилетие разительно изменился. Устройства с сенсорными экранами и лэптопы породили более интуитивный вид взаимодействия, чем достигаемый с помощью традиционной мыши. Эти изменения не ограничились одним аппаратным обеспечением. Жесты, интеллектуальный ввод текста и распознавание речи – вот примеры программных инноваций, усовершенствовавших способ нашего взаимодействия с устройствами.

Распознавание речи десятилетиями ускользало от инноваторов. Многие организации пытались (с разной степенью успешности) создать надежные технологии распознавания речи. Однако, похоже, всего одна компания справилась с этой проблемой – Google.

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

Включаем речевой input

Включить поддержку речевого input-a так же просто, как добавить атрибут в элементы input. Атрибут x-webkit-speech обозначит браузеру, что пользователю нужно предоставить опцию заполнения этого поля формы с помощью речевого input.

<input type="text" x-webkit-speech>

1	<input type="text" x-webkit-speech>

При включенном речевом input-е у элемента справа от input -а отобразится маленькая иконка-микрофон. Щелчок по этой иконке запустит маленькую подсказку-тултип, показывающую, что ваш голос в данный момент записывается. Также можно начать речевой ввод с помощью фокусирования на элементе и нажатия Ctrl +Shift + . в Windows или Command + Shift + . в Mac.

СМОТРЕТЬ ДЕМО-ПРИМЕР | СМОТРЕТЬ НА CODEPEN

С помощью JavaScript’а можно протестировать, включен ли речевой ввод элемента, проверив его свойство webkitSpeech. Оно булево и, следовательно, будет установлено на true или false. Для включения или отключения речевого ввода элемента это свойство можно аннулировать.

// Включить
element.webkitSpeech = true;

// Отключить
element.webkitSpeech = false;

// Включить

element.webkitSpeech = true;

// Отключить

element.webkitSpeech = false;

ПРЕДОСТЕРЕЖЕНИЕ ПО ПОВОДУ ТИПОВ ВВОДА

Речевой input доступен не для всех типов input HTML5. При тестировании я обнаружил, что типы text, number и tel поддерживают речевой ввод, тогда как типы email, url, date и month – нет.

Если применить атрибут x-webkit-speech к элементу input с помощью неподдерживаемого типа ввода, свойство webkitSpeech этого элемента все еще окажется установленным на true. Поэтому нельзя полагаться на это свойство, если нужно узнать, отображает ли браузер элементы управления речевым вводом, а можно лишь посмотреть, поддерживает ли вообще этот браузер речевой input.

Обнаружение браузерной поддержки

Простой способ проверить, поддерживает ли браузер пользователя речевой input – взглянуть на свойство webkitSpeech элемента input. Ниже приведен пример того, как это сделать.

if (document.createElement('input').webkitSpeech === undefined) {
    // Не поддерживается
} else {
    // Поддерживается!
}

if (document.createElement('input').webkitSpeech === undefined) {

// Не поддерживается

} else {

// Поддерживается!

}

Единственный браузер в настоящее время, поддерживающий речевой input – это Google Chrome. Причины этого мы рассмотрим в следующем разделе.

Как работает распознавание речи

Для выполнения превращения речи в текст браузер полагается на внешний сервис. Запись вашего голоса посылается на этот сервис, который впоследствии анализирует звук и конструирует его текстовую версию. Затем текст посылается обратно браузеру и тот заполняет элемент input для завершения процесса. Многие сервисы перевода речи в текст объединяют алгоритмы машинного самообучения, позволяющие со временем становиться все более точными.

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

Браузер Chrome при обеспечении функциональности полагается на собственную технологию распознавания речи Google’а помимо x-webkit-speech. Команда Google долго работала над распознаванием речи и обработкой текстов на естественном языке. Именно она несет ответственность за разработку сложных систем, необходимых для обеспечения надежного сервиса перевода речи в текст, для таких продуктов, как Google Translate и Voice Search.

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

Совершенствование сервисов перевода речи в текст невероятно трудно и требует значительного количества инвестиций. Вероятно, это основная причина того, почему ни один браузерный вендор больше не внедрил распознавание речи. Однако теперь, когда Apple обзавелся Siri, мне интересно видеть, появится ли когда-нибудь распознавание речи в Safari.

Резюме

Из этого поста вы узнали об атрибуте x-webkit-speech и том, как можно применять его для добавления в свои веб-формы возможности речевого ввода. Здесь не описывается более продвинутый Web Speech API. Этот программный интерфейс приложения дает возможность разработчикам добавлять функциональность распознавания речи в большее количество аспектов своих приложений, и даже синтезировать речь из текста.

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