Голосовое управление приложениями. Знакомство с Web Speech API

Новый JavaScript Web Speech API поможет вам добавить распознавание речи на веб-страницы. Этот API хорошо настраивается и обладает хорошими возможностями распознавания речи в Chrome 25 и более поздних версиях. На примере ниже хорошо видно, как распознается текст, практически в момент речи.

Для начала нужно проверить, поддерживает ли браузер Web Speech API. Для этого нужно посмотреть, есть ли там объект webkitSpeechRecognition. Если его там нет, то вам достаточно просто обновить свой браузер. И, наконец, создаем объект webkitSpeechRecognition, который обеспечивает речевой интерфейс и устанавливаем некоторые свойства и обработчики событий.

if (!('webkitSpeechRecognition' in window)) {  
upgrade();} 
else {  
var recognition = new webkitSpeechRecognition();  
recognition.continuous = true;  
recognition.interimResults = true;  

recognition.onstart = function() { ... } 
recognition.onresult = function(event) { ... }  
recognition.onerror = function(event) { ... }  
recognition.onend = function() { ... } 
 ...

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

Значения по умолчанию для interimResults также неверны. Здесь подразумевается, что результаты работы распознавателя окончательны и не подлежат исправлению. Демо-настройки позволяют получить предварительный результат, который можно будет исправить или изменить. Внимательно посмотрите демоверсию – серый текст можно изменить, тогда как результат распознавания, написанный черным цветом, изменениям не подлежит.

Для того чтобы начать работу, нужно нажать на микрофон, что в свою очередь вызовет этот код:

function startButton(event) {
  ...
  final_transcript = '';
  recognition.lang = select_dialect.value;
  recognition.start();

Устанавливаем язык для распознавания речи “lang” к значению BCP-47, которое можно выбрать в выпадающем списке. Например, “en-US” для англо-американского языка. Если язык не установлен, будет использоваться значение по умолчанию. Chrome распознает большое количество языков (посмотрите раздел “langs” в демо версии), там есть языки, которые не включены в эту демо версию, например, he-IL и ar-EG.

После того, как установили язык, выбираем recognition.start() для активации работы распознавателя. Как только начинается запись звука, вызывается обработчик событий onstart, и далее для каждого нового результата вызывается обработчик событий onresult.

recognition.onresult = function(event) {
    var interim_transcript = '';

    for (var i = event.resultIndex; i &lt; event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    final_transcript = capitalize(final_transcript);
    final_span.innerHTML = linebreak(final_transcript);
    interim_span.innerHTML = linebreak(interim_transcript);
  };
}

Этот обработчик связывает все полученные результаты в две последовательности final_transcript и interim_transcript. Получившиеся последовательности могут включать “\n”, такой же, что выходит, когда пользователь произносит команду «новый абзац». Таким образом, мы используем функцию linebreak, чтобы преобразовать их в HTML-тэги <br> или <p>. И наконец, последовательности устанавливаются как innerHTML из соответствующих <span>-элементов: final_span, который оформляется черным текстом и interim_span, который оформляется серым.

interim_transcript – это локальная переменная, и она полностью восстанавливается каждый раз, когда вызывается событие, потому что возможно, что все промежуточные результаты изменены с момента последнего события onresult. Мы могли бы сделать тоже самое, для final_transcript просто начав цепь с 0. Однако, из-за того, что заключительный текст нельзя изменить, мы создали немного более эффективный код, сделав final_transcript общим. Таким образом, это событие может начаться в цепи event.resultIndex и только приложит новый заключительный текст.

Готово! Остается только сделать так, чтобы выглядело красиво. Это поддерживает конфигурацию, демонстрирует пользователю некоторые информативные сообщения и меняет изображение GIF на кнопке микрофона со стационарным микрофоном, изображением mic-slash и mic-animate с мигающей красной точкой .

Изображение mic-slash выходит когда вызывается recognition.start() , и затем заменяется mic-animate, когда горит onstart. Как правило, все происходит так быстро, что slash не замечается, но когда вы используете распознаватель речи в первый раз, Chrome запрашивает разрешение на использование микрофона. Страницы HTTPS не запрашивают разрешение постоянно, тогда как страницы HTTP делают это.

Помогите своим веб-страницам ожить, позволив им слышать ваших пользователей.

Высоких конверсий!

31-03-2016