Web Speech API имеет две функции: синтез речи, иначе известный как преобразование текста в речь, и распознавание речи или преобразование речи в текст. Мы ранее исследовали преобразование текста в речь, поэтому давайте посмотрим, как браузеры обрабатывают распознавание и расшифровку речи с помощью SpeechRecognition API.

Возможность принимать голосовые команды от пользователей означает, что вы можете создавать более захватывающие интерфейсы, а пользователям нравится использовать свой голос. В 2018 году Google сообщил, что 27% мирового онлайн-населения используют голосовой поиск на мобильных устройствах. С помощью распознавания речи в браузере вы можете позволить пользователям общаться с вашим сайтом во всем, от голосового поиска до создания интерактивного бота как части приложения.

Давайте посмотрим, как работает API и что с его помощью можно построить.

Что вам понадобится

Мы собираемся создать пример приложения для работы с API. Если вы хотите продолжить работу, вам понадобятся:

  • "Гугл Хром"
  • Текстовый редактор

Вот и все, мы можем сделать это с помощью простого HTML, CSS и JavaScript. Как только вы их подготовите, создайте новый каталог для работы и сохраните этот начальный HTML и CSS в этом каталоге. Убедитесь, что файлы находятся в одном каталоге, а затем откройте HTML-файл в браузере. Должно получиться так:

Теперь давайте посмотрим, как заставить браузер нас слушать и понимать.

SpeechRecognition API

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

speechRecognition = new webkitSpeechRecognition();
speechRecognition.onresult = console.log;
speechRecognition.start();

Когда вы запустите этот код, Chrome запросит разрешение на использование вашего микрофона, а затем, если ваша страница обслуживается на веб-сервере, запомните свой выбор. Запустите код и, получив разрешение, скажите что-нибудь в микрофон. Как только вы перестанете говорить, вы должны увидеть SpeechRecognitionEvent в консоли.

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

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

Давайте углубимся в объект SpeechRecognitionEvent. Наиболее важным свойством является results, который представляет собой список SpeechRecognitionResult объектов. Что ж, есть один объект результата, поскольку мы сказали только одно, прежде чем он перестал слушать. При проверке этого результата отображается список из SpeechRecognitionAlternative объектов, и первый из них включает расшифровку того, что вы сказали, и значение достоверности от 0 до 1. По умолчанию возвращается только одна альтернатива, но вы можете выбрать получение большего количества альтернатив от службы распознавания , что может быть полезно, если вы позволяете пользователям выбирать вариант, наиболее близкий к тому, что они сказали.

Как это работает

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

Mozilla встроила поддержку распознавания речи в Firefox, она скрывается за флагом в Firefox Nightly, пока они договариваются также об использовании Google Cloud Speech API. Mozilla работает над собственным движком DeepSpeech, но хочет получить поддержку браузеров раньше, поэтому также решила использовать сервис Google.

Итак, поскольку SpeechRecognition использует API на стороне сервера, ваши пользователи должны быть в сети, чтобы использовать его. Надеюсь, в будущем мы увидим локальные возможности распознавания речи в автономном режиме, но пока это ограничение.

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

Распознавание речи в веб-приложении

Откройте HTML-код, который вы скачали ранее, и между тегами <script> внизу мы начнем с прослушивания события DOMContentLoaded, а затем получим ссылки на некоторые элементы, которые мы будем использовать.

<script>
window.addEventListener("DOMContentLoaded", () => {
  const button = document.getElementById("button");
  const result = document.getElementById("result");
  const main = document.getElementsByTagName("main")[0];
});
</script>

Мы проверим, поддерживает ли браузер объект SpeechRecognition или webkitSpeechRecognition, а если нет, мы покажем сообщение, так как мы не можем продолжить. Если вы создавали приложение с использованием этого API, вам необходимо учитывать возможности пользователей, использующих браузеры, не поддерживающие API.

<script>
window.addEventListener("DOMContentLoaded", () => {
  const button = document.getElementById("button");
  const result = document.getElementById("result");
  const main = document.getElementsByTagName("main")[0];
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
  if (typeof SpeechRecognition === "undefined") {
    button.remove();
    const message = document.getElementById("message");
    message.removeAttribute("hidden");
    message.setAttribute("aria-hidden", "false");
  } else {
    // good stuff to come here
  }
});
</script>

Если у нас есть доступ к SpeechRecognition, мы можем подготовиться к его использованию. Мы определим переменную, чтобы показать, слушаем ли мы в данный момент речь, создадим экземпляр объекта распознавания речи и три функции для запуска, остановки и ответа на новые результаты от распознавателя:

  } else {
    let listening = false;
    const recognition = new SpeechRecognition();
    const start = () => {};
    const stop = () => {};
    const onResult = event => {};
  }

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

    const start = () => {
      recognition.start();
      button.textContent = "Stop listening";
      main.classList.add("speaking");
    };
    const stop = () => {
      recognition.stop();
      button.textContent = "Start listening";
      main.classList.remove("speaking");
    };

Когда мы получим результат, мы будем использовать его для отображения всех результатов на странице. В этом примере мы сделаем это с помощью прямых манипуляций с DOM. Мы возьмем SpeechRecognitionResult объекты, которые мы видели ранее, и добавим их как абзацы в результат <div>. Чтобы показать разницу между окончательными и промежуточными результатами, мы добавим класс к любым результатам, отмеченным как окончательные.

    const onResult = event => {
      result.innerHTML = "";
      for (const res of event.results) {
        const text = document.createTextNode(res[0].transcript);
        const p = document.createElement("p");
        if (res.isFinal) {
          p.classList.add("final");
        }
        p.appendChild(text);
        result.appendChild(p);
      }
    };

Прежде чем запускать распознаватель речи, нам нужно подготовить его с настройками, которые мы будем использовать в этом приложении. В этой версии мы будем постоянно записывать результаты вместо завершения после того, как она обнаружит конец речи, таким образом, мы можем продолжать транскрибировать их на страницу, пока не нажмем кнопку остановки. Мы также запросим промежуточные результаты, которые покажут нам, что обнаруживает распознаватель, когда мы говорим (так же, как вы можете делать с преобразованием речи в текст во время телефонного звонка Twilio с <Gather> и partialResultCallback). Мы также добавим слушателя результата:

        const onResult = event => {
            // onResult code
          }
          recognition.continuous = true;
          recognition.interimResults = true;
          recognition.addEventListener("result", onResult);
        }

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

        const onResult = event => {
            // onResult code
          }
          recognition.continuous = true;
          recognition.interimResults = true;
          recognition.addEventListener("result", onResult);
          button.addEventListener("click", () => {
            listening ? stop() : start();
            listening = !listening;
          });
        }

Перезагрузите браузер и попробуйте.

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

Теперь мы можем поговорить с браузером

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

Если вы хотите поиграть с примером из этого поста, вы можете проверить это на Glitch здесь. А если вам нужен исходный код, он доступен в моем репозитории веб-помощника на GitHub.

Есть всевозможные возможности для интересных пользовательских интерфейсов с использованием речи. Недавно я увидел отличный пример голосовой игры в браузере. Сообщите мне, если вы работаете над чем-то интересным с распознаванием речи в браузерах, в комментариях ниже или в Twitter на @philnash.

Первоначально опубликовано на https://www.twilio.com.