0.0.4 • Published 2 years ago
webspeech-synth-react v0.0.4
React Web Speech API Speech Synthesis
React wrapper Hooks and components that wrap the Web Speech API's Speech Synthesis interface.
- Uses an internal queue to manage speech utterances.
- Segments large text into chunks to avoid abrupt voice cutoff on some browsers after ~15 seconds.
- Uses different voices, when available in the browser, for text labeled with different ids.
HOW TO USE
Add to your project from npm
npm i webspeech-synth-react
Add the queue component with a json Array input, that has at least one object with string id and text properties
function App() {
const jsonData = [{id:"42", "text":"The quick brown fox jumped over the lazy dog."}]
return (
<SpeechSynthQueue corpus={jsonData}/>
);
}
EXAMPLE
To run the included example:
sh example/run.sh
DEPENDENCIES
react >= 18.2.0
TODO
- Create basic, opinionted, lite versions of the UI widget
- Display, track the current utterance that is voiced out by the web browser on the UI
- Remove short-uuid dependency
ATTRIBUTION
The code layout was inspired by react-speech-synth and react-say