Разработка сайтов в Счастье, ЛНР. Добавление голосового поиска в приложение React

Голосовые команды предназначены не только для таких помощников, как Google или Alexa. Они также могут быть добавлены в ваши мобильные и настольные приложения, предлагая дополнительные функциональные возможности и даже развлечение для ваших конечных пользователей. А добавление голосовых команд или голосового поиска в ваши приложения может быть очень простым. В этой статье мы будем использовать API Web Speech для создания приложения для поиска книг с голосовым управлением.

Полный код того, что мы будем строить, доступен на GitHub. А для нетерпеливых в конце статьи есть рабочая демонстрация того, что мы создадим.

Введение в API веб-речи

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

Данные о поддержке функции mdn-api__SpeechRecognition в основных браузерах.

Во-первых, давайте посмотрим, насколько просто настроить и запустить Web Speech API. (Вы также можете прочитать введение SitePoint в Web Speech API и ознакомиться с некоторыми другими экспериментами с Web Speech API.) Чтобы начать использовать Speech API, нам просто нужно создать экземпляр нового SpeechRecognitionкласса, чтобы мы могли прослушивать речь пользователя. голос:

const SpeechRecognition = webkitSpeechRecognition;

const speech = new SpeechRecognition () ;

speech.onresult = event => {

console.log (event) ;

};

speech.start () ;

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

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

Событию onresultпередается SpeechRecognitionEventобъект, состоящий из SpeechRecognitionResultListмассива результатов. Объект SpeechRecognitionResultListсодержит SpeechRecognitionResultобъекты. Первый элемент массива возвращает SpeechRecognitionResultобъект, который содержит следующий массив. Первый элемент в этом массиве содержит расшифровку того, что сказал пользователь.

Приведенный выше код можно запустить из Chrome DevTools или обычного файла JavaScript. Теперь, когда мы поняли основы, давайте посмотрим, как встроить это в приложение React. Мы можем увидеть результаты ниже при запуске через консоль Chrome DevTools.

Инструменты разработки браузера, показывающие SpeechRecognitionResultList

Использование веб-речи в React

Используя то, что мы уже узнали, добавить Web Speech API в приложение React очень просто. Единственная проблема, с которой нам приходится иметь дело, — это жизненный цикл компонента React. Во-первых, давайте создадим новый проект с помощью Create React App, следуя его руководству по началу работы. Это предполагает, что Node установлен на вашем компьютере:

npx create-react-appbook-voice-search

cd book-voice-search

npm start

Затем мы заменяем Appфайл приведенным ниже кодом, чтобы определить базовый компонент React. Затем мы можем добавить к нему немного речевой логики:

// App.js

import React from 'react’;

const App = () => {

return (

 

 

) ;

};

export default App;

Этот простой компонент отображает div с текстом внутри. Теперь мы можем начать добавлять нашу речевую логику в компонент. Мы хотим создать компонент, который создает экземпляр речи, а затем использует его в жизненном цикле React. Когда компонент React отображается в первый раз, мы хотим создать экземпляр речи, начать прослушивание результатов и предоставить пользователю способ начать распознавание речи. Сначала нам нужно импортировать некоторые хуки React (вы можете узнать больше об основных хуках React здесь), некоторые стили CSS и изображение микрофона, чтобы наш пользователь мог щелкнуть:

// App.js

import { useState, useEffect } from «react»;

import «. /index.css»;

import Mic from «. /microphone-black-shape.svg»;

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

Затем мы меняем continuousнастройку на true. Это настраивает API распознавания речи для продолжения прослушивания. В нашем самом первом примере это было по умолчанию равно false и означало, что когда пользователь перестанет говорить, onresultсработает обработчик события. Но поскольку мы позволяем пользователю контролировать, когда он хочет, чтобы сайт перестал слушать, мы используем, continuousчтобы позволить пользователю говорить столько, сколько он хочет:

// App.js

let speech;

if (window.webkitSpeechRecognition) {

// eslint-disable-next-line

const SpeechRecognition = webkitSpeechRecognition;

speech = new SpeechRecognition () ;

speech.continuous = true;

} else {

speech = null;

}

const App = () => {... };

Теперь, когда мы настроили код распознавания речи, мы можем начать использовать его внутри компонента React. Как мы видели ранее, мы импортировали два хука React — хуки useStateи useEffect. Это позволит нам добавить onresultпрослушиватель событий и сохранить стенограмму пользователя в состоянии, чтобы мы могли отобразить ее в пользовательском интерфейсе:

// App.js

const App = () => {

const [isListening, setIsListening] = useState (false) ;

const

= useState («») ;

const listen = () => {

setIsListening (! isListening) ;

if (isListening) {

speech.stop () ;

} else {

speech.start () ;

}

};

useEffect (() => {

//handle if the browser does not support the Speech API

if (! speech) {

return;

}

speech.onresult = event => {

setText (event.results[event.results.length — 1][0].transcript) ;

};

}, []) ;

return (

<>

 

 

</>

) ;

}

export default App;

В нашем компоненте мы сначала объявляем две переменные состояния — одну для хранения расшифровки текста речи пользователя, а другую для определения того, слушает ли наше приложение пользователя. Мы вызываем useStateхук React, передавая значение по умолчанию falseдляisListening по умолчанию и пустую строку для текста. Эти значения будут обновлены позже в компоненте в зависимости от действий пользователя.

После того, как мы настроили наше состояние, мы создаем функцию, которая будет запускаться, когда пользователь щелкает изображение микрофона. Это проверяет, прослушивает ли приложение в данный момент. Если это так, мы останавливаем распознавание речи; в противном случае мы начинаем его. Позже эта функция была добавлена ​​к onclickизображению микрофона.

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

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

Пользовательский многоразовый голосовой хук React

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

Во-первых, давайте создадим новый файл JavaScript с именем useVoice.js. Для любого пользовательского хука React лучше всего следовать шаблону имени файла useHookName.js. Это выделяет их при просмотре файлов проекта. Затем мы можем начать с импорта всех необходимых встроенных хуков React, которые мы использовали ранее в нашем примере компонента:

// useVoice.js

import { useState, useEffect } from 'react’;

let speech;

if (window.webkitSpeechRecognition) {

// eslint-disable-next-line

const SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;

speech = new SpeechRecognition () ;

speech.continuous = true;

} else {

speech = null;

}

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

// useVoice.js

const useVoice = () => {

const

= useState ('') ;

const [isListening, setIsListening] = useState (false) ;

const listen = () => {

setIsListening (! isListening) ;

if (isListening) {

speech.stop () ;

} else {

speech.start () ;

}

};

useEffect (() => {

if (! speech) {

return;

}

speech.onresult = event => {

setText (event.results[event.results.length — 1][0].transcript) ;

setIsListening (false) ;

speech.stop () ;

};

}, [])

return {

text,

isListening,

listen,

voiceSupported: speech≠= null

};

}

export {

useVoice,

};

Внутри useVoiceфункции мы выполняем несколько задач. Как и в примере с нашим компонентом, мы создаем два элемента состояния — isListeningфлаг и текстовое состояние. Затем мы снова создаем listenфункцию с той же логикой, что и раньше, используя ловушку эффекта для настройки onresultпрослушивателя событий.

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

Давайте теперь вернемся к нашему App.jsфайлу и начнем использовать наш пользовательский хук. Мы можем начать с удаления следующего:

SpeechRecognitionэкземпляры класса

импорт дляuseState

переменные состояния для isListeningиtext

listenфункция _

для useEffectдобавления onresultпрослушивателя событий

Затем мы можем импортировать наш пользовательский useVoiceхук React:

// App.js

import { useVoice } from '. /useVoice’;

Мы начинаем использовать его, как встроенный хук React. Вызываем useVoiceфункцию и деконструируем полученный объект:

// App.js

const {

text,

isListening,

listen,

voiceSupported,

} = useVoice () ;

После импорта этого пользовательского хука нам не нужно вносить какие-либо изменения в компонент, поскольку мы повторно использовали все имена переменных состояния и вызовы функций. В результате App.js должен выглядеть следующим образом:

// App.js

import React from 'react’;

import { useVoice } from '. /useVoice’;

import Mic from '. /microphone-black-shape.svg’;

const App = () => {

const {

text,

isListening,

listen,

voiceSupported,

} = useVoice () ;

if (! voiceSupported) {

return (

 

 

) ;

}

return (

<>

 

 

</>

) ;

}

export default App;

Теперь мы построили наше приложение таким образом, что мы можем совместно использовать логику Web Speech API между компонентами или приложениями. Мы также можем определить, поддерживает ли браузер Web Speech API, и вернуть сообщение вместо неработающего приложения.

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

Забронировать Голосовой поиск

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

Для начала нам нужно создать второй пользовательский хук, который позволит нам искать библиотечный API. Начнем с создания нового файла с именем useBookFetch.js. В этом файле мы будем следовать той же схеме, начиная с useVoiceкрючка. Мы импортируем наши хуки React для состояния и эффекта. Затем мы можем приступить к созданию нашего пользовательского хука:

// useBookFetch.js

import { useEffect, useState } from 'react’;

const useBookFetch = () => {

const [authorBooks, setAuthorBooks] = useState ([]) ;

const [isFetchingBooks, setIsFetchingBooks] = useState (false) ;

const fetchBooksByAuthor = author => {

setIsFetchingBooks (true) ;

fetch (`https: //openlibrary.org/search.json? author=${author}`)

.then (res => res.json ())

.then (res => {

setAuthorBooks (res.docs.map (book => {

return {

title: book.title

}

}))

setIsFetchingBooks (false) ;

}) ;

}

return {

authorBooks,

fetchBooksByAuthor,

isFetchingBooks,

};

};

export {

useBookFetch,

}

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

Затем мы объявляем функцию, которую мы можем вызвать с именем автора, и она выполнит вызов открытой библиотеки, чтобы получить все книги для указанного автора. (Если вы новичок в этом, ознакомьтесь с введением SitePoint в Fetch API.) В финале thenвыборки мы сопоставляем каждый результат и получаем название книги. Затем мы, наконец, возвращаем объект с authorBooksсостоянием, флагом, указывающим, что мы получаем книги, и fetchBooksByAuthorфункцией.

Давайте вернемся к нашему App.jsфайлу и импортируем useBookFetchхук так же, как мы импортировали useVoiceхук. Мы можем вызвать этот хук и деконструировать значения и начать использовать их в нашем компоненте:

// App.js

const {

authorBooks,

isFetchingBooks,

fetchBooksByAuthor

} = useBookFetch () ;

useEffect (() => {

if (text≠= «») {

fetchBooksByAuthor (text) ;

}

},

) ;

Мы можем использовать useEffectхук, чтобы следить textза изменением переменной. Это автоматически извлечет книги автора при изменении голосового текста пользователя. Если текст пуст, мы не пытаемся выполнить действие выборки. Это предотвращает ненужную выборку при первом рендеринге компонента. Последнее изменение в App.jsкомпоненте — добавление логики для отображения книг авторов или отображения сообщения о загрузке:

// App.js

{

isFetchingBooks?

'fetching books...':

{

authorBooks.map ((book, index) => {

return (

 

) ;

})

}

•  

   

  {book.title}

   

}

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

// App.js

import React, { useEffect } from «react»;

import «. /index.css»;

import Mic from «. /microphone-black-shape.svg»;

import { useVoice } from «. /useVoice»;

import { useBookFetch } from «. /useBookFetch»;

const App = () => {

const { text, isListening, listen, voiceSupported } = useVoice () ;

const { authorBooks, isFetchingBooks, fetchBooksByAuthor } = useBookFetch () ;

useEffect (() => {

if (text≠= «») {

fetchBooksByAuthor (text) ;

}

},

) ;

if (! voiceSupported) {

return (

 

 

) ;

}

return (

<>

 

 

 

 

</>

) ;

};

export default App;

Демо

Вот рабочая демонстрация того, что мы построили. Попробуйте поискать любимого автора.

Заключение

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