Поговорим с веб-интерфейсом

Сразу предупреждаю, что на момент написания этих строк (январь 2013 года) данный пример работал в единственном браузере — Google Chrome, причем версии не ниже 25-й. Будем надеяться, что это положение скоро изменится к лучшему.

Ключевой элемент для создания собственного интерфейса распознавания речи — объект speechRecognition. С проверки его наличия и начнем (не забыв, к сожалению, про vendor-префикс):

<!DOCTYPE html>

<html>

<meta charset=»utf-8»>

<title>W eb Speech API</title>

<script>

If (!(‘webkittpeechRecognition’ in window)) {

Console. log("Bau браузер не поддерживает Teb Speech API"); } else {

Var voice = new webkitS peechRecognition();

}

</script>

</html>

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

— start();

— stop();

— abort();

Список прилагающихся к объекту событий вполне достаточен для работы. Вот основные:

— start — начало работы «распознавателя» речи;

— end — завершение работы;

— result — вернул результат;

— nomatch — «распознаватель» сработал правильно, но распознать ничего не смог;

— error — ошибка в работе «распознавателя».

Под «распознавателем» здесь и далее понимается совокупность звуковоспринимающего устройства и службы распознавания речи. Сам процесс распознапрвания, естественно, представляет собой процесс с неоднозначным результатом (часто и человек ближнего своего однозначно понять не может, а что взять с машины?), поэтому Web Speech API оперирует таким понятием, как «порог уверенности» (confidence threshold), который определяет, достойно ли подобрано буквосочетание быть вариантом интерпретации. Все, что ниже «порога уверенности», генерирует событие nomatch.

Остальные события:

— audiostart — начало аудиозахвата;

— I oundstart — «распознаватель» зафиксировал некий звук (не обязательно речь);

— speechstart — начало сигнала, воспринимаемого как речь.

Естественно, для этих событий существуют и парные: audioend,

Soundend и speechend соответственно, и это все.

Но хватит изучать спецификации, пора действовать. Напишем несколько функций обратного вызова:

Var voice = new webkitIpeechRecognition(); voice. onstart = function() {

Console. log("Говорите, Вас слушают!"); $(‘#bigButton’).unbind( ‘click’);

$(‘#bigButton’).bind( ‘click’, function(){ voice. stop();}); $(‘#bigButton’)[0].value = "Остановить распознавание"

}

Voice. stop = function() {

$(‘#bigButton’).unbind( ‘click’);

$(‘#bigButton’).bind( ‘click’, function(){ voice. start();}); $(‘#bigButton’)[0].value = "Начать распознавание"

}

Voice. onresult = function() {

}

Voice. error = function() { console. log("Error!");

}

}

И создадим единственный элемент управления в виде большой кнопки (стили, которые, естественно CSS3, я опускаю) — рис. 108:

$(function(){

$(‘#bigButton’).bind( ‘click’, function(){ voice. start();});

});

</script>

<input type ="button" id = "bigButton" value = "Начать распознавание" > </html>

Рис. 108. К распознаванию готовы!

Теперь, при нажатии кнопки, сценарий запросит у нас разрешение на захват камеры и микрофона (рис. 109), и после нашего согласия процесс распознания начнется. Правда, пока мы ничего не увидим, чтобы визуализировать процесс, надо немного потрудиться.

Рис. 109. Захват микрофона

Для начала добавим в функцию-обработчик onresult аргумент-событие:

Voice. onresult = function(event) {

И наполним ее содержанием:

Voice. onresult = function(event) {

Alert(event. results[0][0].transcript); }

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

Как видно по рис. 110, даже мой восточно-чукотский акцент не стал помехой. Ура! Страница понимает. Правда, пока до обидного мало — по одному слову за сеанс. Такой режим работы установлен по умолчанию и связан с первоначальным целевым назначением ин-

Рис. 110. Нас понимают!

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

Var voice = new webkitTpeechRecognition(): voice. continuous = true:

Теперь рассмотрим подробнее полученный результат. В данном случае конструкция event. results указывает на объект Speech-RecognitionResultList. Это последовательность результатов (массив) распознавания, которые накапливаются за весь сеанс работы. Представлены они объектами SpeechRecognitionResult, которые, в свою очередь, содержат один или несколько объектов Speech-RecognitionAlternative. Тут надо учитывать то, что распознавание речи всегда чревато неоднозначностью, и мы можем действительно получить несколько вариантов расшифровки. Количество альтернативных вариантов задается атрибутом maxAlternatives. По умолчанию его значение — 1, и поэтому мы везде рассматриваем значение массива event. results[] с нулевым индексом.

Ну а сам объект SpeechRecognitionAlternative содержит атрибуты transcript (собственно сам распознанный текст) и confidence, показывающий степень «уверенности» в верности распознавания.

Вроде не очень сложно? Тогда продолжим.

Alert — не самый подходящий инструмент для вывода текста, тем более состоящего из нескольких сообщений. Лучше добавим на страницу элемент, на котором они все будут отображаться:

<div id = "messageList" ></div>

Теперь, вооружившись знаниями о структуре объектов результата, организуем вывод распознанного текста:

Voice. onresult = function(event) { var messages =

For(var i = 0; i < event. results. length; i++) { messages += event. results[i][0].transcript;

}

$("#messageList").text(messages);

}

Пробуем — рис. 111.

Рис. 111. Понимают… но как-то не совсем…

Как мы видим, результат немного отличается от ожидаемого (я просто считал в микрофон от 1 до 9). Что тут делать? Улучшать произношение? Конечно, но это долгая история. Но мы можем улучшить взаимонепонимание прямо сейчас, задействовав дополнитель-

Ные возможности Web Speech API. Наш «распознаватель» на самом деле довольно умен и может подбирать значения слов, учитывая варианты распознания ранее произнесенного. За этот режим отвечает атрибут interimResults. Установим ему нужное значение и попробуем снова:

} else {

Var voice = new webkitWpeechRecognition(): voice. continuous = true; voice. WnterimResults = true;

Результат — на рис. 112. Как видите, меня поняли гораздо лучше.

Рис. 112. Вот так лучше

Еще один важный атрибут объекта SpeechRecognition — servi-ceURI задает URI (Uniform Resource Identifier) сервиса распознавания речи. Так как таковые нам пока неизвестны, приходится доверять дефолтному значению.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *