Распознавание речи на JavaScript: Web Speech API

В современном мире технологии распознавания и синтеза речи широко используются в Google, Apple и других крупных компаниях. Удобство сайтов, понимающих голосовые команды, например, «Перейти на главную», очевидно. Рассмотрим Web Speech API и Speech Synthesis API – экспериментальные, но перспективные JavaScript-технологии, реализующие подобный функционал.

Web Speech API: распознавание речи

Web Speech API определяет, что говорит пользователь. На данный момент поддерживается Opera и Google Chrome; поддержка в Mozilla, Safari, Internet Explorer и других браузерах отсутствует. Ссылки на документацию и примеры кода приведены в конце статьи.

Разбор кода распознавания

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

  1. Создаётся объект SpeechRecognition для прослушивания речи.
  2. Устанавливаются опции: continuous (непрерывное распознавание) и lang (язык, например, «ru-RU»).
  3. Callback-функция обрабатывает результаты, выводя промежуточные (отдельные слова) в консоль, а окончательный результат – во всплывающем окне.
  4. recognition.start() запускает прослушивание микрофона.

Важно: Для работы Web Speech API необходим доступ к микрофону. При локальном запуске страницы может потребоваться запуск на сервере для корректной работы API.

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

Запуск распознавания по кнопке

Для удобства добавим кнопку «Слушать», запускающую распознавание при нажатии:

<button onclick="speech()">Слушать</button>
<script>
function speech() {
  // Код распознавания из предыдущего примера
}
</script>

Теперь распознавание запускается только по нажатию кнопки.

Speech Synthesis API: синтез речи

Speech Synthesis API проговаривает текст. Документация доступна по ссылке (в конце статьи). Для воспроизведения текста достаточно одной строки кода, но для русского языка следует учитывать особенности: API может проговаривать буквы по отдельности, а не слова.

let synth = window.speechSynthesis;
let utterThis = new SpeechSynthesisUtterance('Java Script');
synth.speak(utterThis);

Управление синтезом речи с помощью кнопок

Аналогично распознаванию, добавим кнопки «Проговорить» и «Остановить»:

<button onclick="talk()">Проговорить</button>
<button onclick="stop()">Остановить</button>

talk() запускает, а stop() останавливает синтез речи (учитывая особенности работы с SpeechSynthesisUtterance, см. документацию).

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

Web Speech API и Speech Synthesis API – мощные инструменты для добавления голосового взаимодействия на веб-сайты. Несмотря на экспериментальный статус и ограничения в поддержке браузерами, они позволяют создавать интересные приложения. Изучение документации поможет раскрыть потенциал этих API.

Ссылки:

  • [Ссылка на документацию Web Speech API]
  • [Ссылка на пример кода Web Speech API]
  • [Ссылка на документацию Speech Synthesis API]
  • [Ссылка на пример кода Speech Synthesis API]

Что будем искать? Например,программа