Package Exports

webspeech-synth-react
webspeech-synth-react/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (webspeech-synth-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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