FAQs

This happens because Children.map does not traverse the children of React elements.

React elements and their children aren't rendered or traversed.

To resolve this, pass the text directly as a prop or as a child of the <Speech> component (or when using the useSpeech hook).

The SpeechSynthesisUtterance boundary event may provide inaccurate word boundaries for certain combinations of text, lang, or voice. This causes the highlight to mismatch the spoken word.

To fix this, try different voices or languages to find the most compatible option for your text.

Chrome on Android and Linux lacks support for the boundary event when using network-based voices. This is a known limitation documented by the Chromium team, and they have no plans to fix it.

Consider using a different browser or operating system where boundary events are supported.

The SpeechSynthesis.pause() function does not work as expected on mobile devices. On these platforms, calling pause() ends the current utterance, behaving like cancel().

If you're using the <Speech> component, set the useStopOverPause prop to true for mobile devices. For custom controls with the useSpeech hook, avoid exposing a pause option and provide only stop functionality instead.

No, this library is not compatible with React Native because it relies on the WebSpeechAPI, which is only available in browsers.

For React Native applications, explore alternative TTS libraries available on npm to find one that fits your requirements.