0.0.4 • Published 2 years ago

webspeech-synth-react v0.0.4

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

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