morganney/tts-react

Convert text to speech using React.

tts-react

Repository for tts-react, a React component and hook that uses the SpeechSynthesis and SpeechSynthesisUtterance API's to convert text to speech. You can fallback to the HTMLAudioElement API by providing a fetchAudioData prop to the hook or component.

Install

npm i react react-dom tts-react

Table of Contents

• tts-react
• storybook
• examples

Demo (Storybook)

morganney.github.io/tts-react

Progress

• Helped fix a SpeechSynthesisUtterance default volume Chrome bug.

tts-react's Issues

export error while building

Export error is coming while building for production in a nextjs project

Import and Typo Issues in Code Example: useTts from 'tts-react' and Missing useEffect

https://github.com/morganney/tts-react/blob/main/docs/examples.md

SyntaxError: Unexpected token 'export'

Thank you for creating this package!

I ran into this error whenever I refresh/re-render the webpage:

The error leads to this:

My code:

I'm using Next js & the latest tts-react.

It works again when I hide/unhide my TextToSpeech code, but throws the same error when I refresh the page.

Thank you!

I have similar research

I also write the problems and challenging engineering tasks, So the package can run across many platforms.

https://github.com/albirrkarim/react-speech-highlight-demo

Remove use of Children.map in favor of an alternative approach

https://react.dev/reference/react/Children#alternatives

MarkTextAsSpoken Issues

I am trying to get my text to be marked as spoken however even in the demo it doesn't always mark it. Could this be my device (Alienware x17 R2)? In the demo, on this device only the EN-US voice works with MarkTextAsSpoken.
Below is the code that I am using. I am using JS.

     <TextToSpeech
                    markTextAsSpoken
                    rate={".9"}
                    lang="en-GB"
                    autoPlay>
                    <p>How old are you?</p>
                </TextToSpeech>

Why text inside component is not getting read ?

Thanks for the awesome package.
I wanted to know the reason the text inside a component is not getting read by the package or I am doing wrong.
Sample is here https://codesandbox.io/s/eloquent-newton-7l2re2?file=/src/App.js.

Kindly guide me.

Does not work after 255 characters

Steps to reproduce:

Pass 500 characters paragraph as children to tts.

How to config voice?

How to config voice?
any enum?

const CustomTTSComponent = ({ children, highlight = false }: CustomProps) => {
  const { ttsChildren, state, play, stop, pause } = useTts({
    children,
    markTextAsSpoken: highlight,
    lang: "zh-CN",
    autoPlay: true,
void: ?????
  });

  return (
    <div>
      <>
        <button disabled={state.isPlaying} onClick={play}>
          Play
        </button>
        <button disabled={!state.isPlaying} onClick={pause}>
          Pause
        </button>
        <button onClick={stop}>Stop</button>
      </>
      {ttsChildren}
    </div>
  );
};

How to combine with Microsoft Azure speech API?

The Microsoft AI voices are the best in the industry. They are natural sounding and have better cadence than the native WebSpeech Api. However, I am not able to highlight the currently playing word with microsoft-cognitiveservices-speech-sdk. How can I merge microsoft-cognitiveservices-speech-sdk with your package?