Статьи

Представляем API веб-речи

Сентябрь 18, 2018

После получения степени бакалавра я начал работать в группе под названием НЛП. Как следует из названия, мы сосредоточились на технологиях обработки естественного языка (NLP). В то время двумя наиболее популярными технологиями для работы были стандарт VoiceXML и апплеты Java. У них обоих были проблемы. Первый был поддержан только Opera. Второй, используемый для отправки данных на сервер и выполнения действия, основанного на произнесенной пользователем команде, требовал большого количества кода и времени. Сегодня все по-другому. Благодаря внедрению специального API-интерфейса JavaScript работа с распознаванием речи стала еще проще. Эта статья познакомит вас с этим API, известным как Web Speech API.

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

Что такое API веб-речи?

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

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

Спецификация утверждает, что сам API не зависит от базовой реализации распознавания и синтеза речи и может поддерживать как серверное, так и клиентское / встроенное распознавание и синтез. Это позволяет два типа распознавания: одноразовый и непрерывный. В первом типе распознавание заканчивается, как только пользователь прекращает разговор, а во втором — когда вызывается метод stop() Во втором случае мы все еще можем позволить нашим пользователям завершить распознавание, подключив обработчик, который вызывает метод stop() Результаты распознавания предоставляются нашему коду в виде списка гипотез вместе с другой соответствующей информацией для каждой гипотезы.

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

Этот API может вас не удивить из-за уже реализованного атрибута x-webkit-speech Вы можете узнать больше об этом атрибуте, ознакомившись с разделом Как использовать поля ввода речи HTML5 .

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

Методы и свойства

Чтобы создать экземпляр распознавателя речи, используйте функцию speechRecognition() 

 var recognizer = new speechRecognition();

Этот объект предоставляет следующие методы:

  • onstart
  • onresult Событие должно использовать интерфейс SpeechRecognitionEvent .
  • onerror Событие должно использовать интерфейс SpeechRecognitionError .
  • onend Событие всегда должно генерироваться по окончании сеанса независимо от причины.

В дополнение к этим методам мы можем настроить объект распознавания речи, используя следующие свойства:

  • continuous Если его значение установлено в true По умолчанию установлено значение false
  • lang По умолчанию это соответствует языку браузера.
  • interimResults Если его значение установлено в true Если значение равно false По умолчанию установлено значение false

В качестве аргумента обработчику события resultSpeechRecognitionEvent Последний содержит следующие данные:

  • results[i] Каждый элемент массива соответствует распознанному слову.
  • resultIndex
  • results[i].isFinal
  • results[i][j] Первый элемент — наиболее вероятное узнаваемое слово.
  • results[i][j].transcript
  • results[i][j].confidence Значение варьируется от 0 до 1.

Совместимость браузера

В предыдущем разделе указывалось, что предложение по API веб-речи было сделано в конце 2012 года. Пока единственным браузером, поддерживающим этот API, является Chrome, начиная с версии 25 с очень ограниченным подмножеством спецификации. Кроме того, Chrome поддерживает этот API с помощью префикса webkit. Поэтому создание объекта распознавания речи в Chrome выглядит следующим образом: 

 var recognizer = new webkitSpeechRecognition();

демонстрация

В этом разделе представлена ​​демонстрация API Web Speech в действии. Демонстрационная страница содержит одно поле только для чтения и три кнопки. Поле необходимо для отображения транскрипции распознанной речи. Первые две кнопки запускают и останавливают процесс распознавания, а третья очищает журнал действий и сообщений об ошибках. Демонстрация также позволяет выбирать между одноразовым и непрерывным режимами с помощью двух переключателей.

Поскольку только Chrome поддерживает этот API, мы выполняем проверку, а в случае неудачи мы отображаем сообщение об ошибке. После подтверждения поддержки мы инициализируем объект распознавания речи, чтобы нам не приходилось выполнять это действие каждый раз, когда пользователь нажимает кнопку «Воспроизвести демонстрацию». Мы также прикрепляем обработчик для запуска процесса распознавания. Обратите внимание, что внутри обработчика мы также устанавливаем режим распознавания. Нам нужно выбрать режим внутри обработчика, чтобы он отражал выбор пользователя (его нужно обновлять каждый раз, когда начинается новое распознавание).

Демонстрационная версия кода доступна здесь . Ох, и просто для удовольствия, попробуйте сказать грязное слово. 

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Web Speech API Demo</title>
    <style>
      body
      {
        max-width: 500px;
        margin: 2em auto;
        font-size: 20px;
      }

      h1
      {
        text-align: center;
      }

      .buttons-wrapper
      {
        text-align: center;
      }

      .hidden
      {
        display: none;
      }

      #transcription,
      #log
      {
        display: block;
        width: 100%;
        height: 5em;
        overflow-y: scroll;
        border: 1px solid #333333;
        line-height: 1.3em;
      }

      .button-demo
      {
        padding: 0.5em;
        display: inline-block;
        margin: 1em auto;
      }
    </style>
  </head>
  <body>
    <h1>Web Speech API</h1>
    <h2>Transcription</h2>
    <textarea id="transcription" readonly="readonly"></textarea>

    <span>Results:</span>
    <label><input type="radio" name="recognition-type" value="final" checked="checked" /> Final only</label>
    <label><input type="radio" name="recognition-type" value="interim" /> Interim</label>

    <h3>Log</h3>
    <div id="log"></div>

    <div class="buttons-wrapper">
      <button id="button-play-ws" class="button-demo">Play demo</button>
      <button id="button-stop-ws" class="button-demo">Stop demo</button>
      <button id="clear-all" class="button-demo">Clear all</button>
    </div>
    <span id="ws-unsupported" class="hidden">API not supported</span>

    <script>
      // Test browser support
      window.SpeechRecognition = window.SpeechRecognition       ||
                                 window.webkitSpeechRecognition ||
                                 null;

      if (window.SpeechRecognition === null) {
        document.getElementById('ws-unsupported').classList.remove('hidden');
        document.getElementById('button-play-ws').setAttribute('disabled', 'disabled');
        document.getElementById('button-stop-ws').setAttribute('disabled', 'disabled');
      } else {
        var recognizer = new window.SpeechRecognition();
        var transcription = document.getElementById('transcription');
        var log = document.getElementById('log');

        // Recogniser doesn't stop listening even if the user pauses
        recognizer.continuous = true;

        // Start recognising
        recognizer.onresult = function(event) {
          transcription.textContent = '';

          for (var i = event.resultIndex; i < event.results.length; i++) {
            if (event.results[i].isFinal) {
              transcription.textContent = event.results[i][0].transcript + ' (Confidence: ' + event.results[i][0].confidence + ')';
            } else {
              transcription.textContent += event.results[i][0].transcript;
            }
          }
        };

        // Listen for errors
        recognizer.onerror = function(event) {
          log.innerHTML = 'Recognition error: ' + event.message + '<br />' + log.innerHTML;
        };

        document.getElementById('button-play-ws').addEventListener('click', function() {
          // Set if we need interim results
          recognizer.interimResults = document.querySelector('input[name="recognition-type"][value="interim"]').checked;

          try {
            recognizer.start();
            log.innerHTML = 'Recognition started' + '<br />' + log.innerHTML;
          } catch(ex) {
            log.innerHTML = 'Recognition error: ' + ex.message + '<br />' + log.innerHTML;
          }
        });

        document.getElementById('button-stop-ws').addEventListener('click', function() {
          recognizer.stop();
          log.innerHTML = 'Recognition stopped' + '<br />' + log.innerHTML;
        });

        document.getElementById('clear-all').addEventListener('click', function() {
          transcription.textContent = '';
          log.textContent = '';
        });
      }
    </script>
  </body>
</html>

Вывод

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

38
Share: