В этом руководстве мы узнаем, как интегрировать голосовой пользовательский интерфейс в наше веб-приложение.

Мы работаем с React. Чтобы включить голосовой пользовательский интерфейс (VUI), мы будем использовать Web Speech API.

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

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

Для этого мы используем Web Speech API.

Этот API обеспечивает точное управление и гибкость возможностей распознавания речи в Chrome версии 25 и более поздних.

Web Speech API предоставляет нам две функции:

  • Распознавание речи, которое преобразует speech to text.
  • Синтез речи, преобразующий text to speech.
  1. Мы начнем с установки двух пакетов npm:
// for speech recognition
npm i react-speech-recognition
// for speech synthesis
npm i react-speech-kit

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

Обнаружение поддержки браузером Web Speech API

if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
    //Render some fallback function content
}

Включение микрофона

SpeechRecognition.startListening();

Выключение микрофона

// It will first finish processing any speech in progress then stop.
SpeechRecognition.stopListening();
// It will cancel the processing of any speech in progress.
SpeechRecognition.abortListening();

Использование стенограммы микрофона

// To make the microphone transcript available in our component.
const { transcript } = useSpeechRecognition();

Сброс стенограммы микрофона

const { resetTranscript } = useSpeechRecognition();

Теперь мы готовы добавить распознавание речи (text to speech) в наше веб-приложение 🚀

2. В файле App.js проверим поддержку react-speech-recognition и добавим два компонента StartButton и Output.

На данный момент файл App.js должен выглядеть так:

3. Далее мы перейдем к файлу StartButton.js.

Здесь мы добавим кнопку-переключатель для запуска и остановки прослушивания.

4. Теперь в файле Output.js мы будем использовать хук реакции useSpeechRecognition.

useSpeechRecognition предоставляет компоненту доступ к расшифровке речи, снятой с микрофона пользователя.

5. Перед определением команд мы добавим Speech Synthesis в наше веб-приложение для преобразования outputMessage в речь.

Теперь в файле App.js мы проверим поддержку файла speech synthesis.

6. Теперь в файле Output.js мы будем использовать хук реакции useSpeechSynthesis().

Но прежде чем двигаться дальше, мы сначала рассмотрим некоторые важные функции Speech Synthesis:

  • speak(): вызывается, чтобы браузер прочитал текст.
  • cancel(): вызов, чтобы остановить чтение SpeechSynthesis.

Мы хотим вызывать функцию speak() каждый раз при изменении outputMessage.

Итак, мы добавим следующие строки кода в файл Output.js:

😃Вау!
Теперь все настроено 🔥
Осталось только определить наши команды 👩🎤

7. Теперь мы вернулись к нашему файлу Output.js, чтобы завершить наши команды.

😃Мы успешно построили voice assistant, используя Web Speech API, которые делают то, что мы говорим 🔥🔥

Примечание. По состоянию на май 2021 года браузеры поддерживают Web Speech API:

  • Chrome (настольный компьютер)
  • Хром (Андроид)
  • Сафари 14.1
  • Microsoft Edge
  • веб-просмотр Android
  • Самсунг Интернет

Для всех других браузеров вы можете интегрировать файл polyfill.

Вот демонстрация, которую я сделал с некоторыми стилями:

Я называю это Эфир.