В этом руководстве мы узнаем, как интегрировать голосовой пользовательский интерфейс в наше веб-приложение.
Мы работаем с React
. Чтобы включить голосовой пользовательский интерфейс (VUI
), мы будем использовать Web Speech API
.
Для простоты мы не будем сосредотачиваться на дизайне.
Наша цель — создать голосового помощника, который будет распознавать наши слова и отвечать соответствующим образом.
Для этого мы используем Web Speech API.
Этот API обеспечивает точное управление и гибкость возможностей распознавания речи в Chrome версии 25 и более поздних.
Web Speech API
предоставляет нам две функции:
- Распознавание речи, которое преобразует
speech to text
. - Синтез речи, преобразующий
text to speech
.
- Мы начнем с установки двух пакетов 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
.
Вот демонстрация, которую я сделал с некоторыми стилями:
Я называю это Эфир.