react-web-voice
v1.0.0
Published
web speech and recognition as react hook
Downloads
10
Readme
React Web Voice
Overview
react-web-voice
is a library created to ease the integration of Web Speech Api (including speech synthesis and speech recognition) to your React web application.
Install
npm install react-web-voice
Web Speech Api Support
At the moment, not all browsers support Web Speech Api
. The library has been developed and tested on Google Chrome, which is the only browser fully support Web Speech Api
at the moment.
In the future, as other browsers adopt this feature, the library will be updated accordingly to support them.
More information on this topic can be found here: https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
React Version
The library provide two separated react hooks, namely useSpeech
and useRecognition
to support voice speaking and voice recognizing respectively.
As React
hook is currently an alpha feature, using of the next
version of react is required.
useSpeech
Usage
useSpeech
can be used in your functional component to access to the speaking functions.
The hook return a list of messages
that has already been spoken and a speak
function that allow you to order the browser to speak.
const SpeechComponent = () => {
const { messages, speak } = useSpeech();
const speakButtonHandler = async () => {
const utterance = await speak({
text: 'Hello',
volume: 0.5,
rate: 1,
pitch: 1
});
};
return <button onClick={speakButtonHandler}>Click to speak</button>;
};
Speak function
As shown in the example above the speak
function accept a message
object which can be used to define the content of the message, the volume, rate and pitch and a callback function after the browser finish speaking.
Configure
By default, useSpeech
use the Google Us English
, you can require it to use other voice by passing in a config object:
// To get the full list of voices available: window.speechSynthesis.getVoices()
const { messages, speak } = useSpeech({ voice: 'Karen' });
useRecognition
Usage
useRecognition
can be used in your functional component to access to the voice recognition functions.
const RecognitionComponent = () => {
const { transcripts, listen } = useRecognition();
const listenButtonHandler = async () => {
const transcript = await listen();
};
return <button onClick={listenButtonHandler}>Start speaking</button>;
};
Listen function
As shown in the example above the listen
function accept a callback function as its parameter, the callback function will be triggered with the message that the browser detects and recognizes.
Typescript
This project is written in typescript and fully support it.
Demo
An example of how to use these two hooks can found inside the demo folder.
Version 1.0 Breaking Changes
With version 1.0, we decided to get rid of the callback function on both speak
and listen
function but replacing them with a promise.