React-text-to-speech is a React.js component for converting text to speech using the WebSpeech API. It allows easy integration into React apps, offers full customization options, and provides the feature to highlight words as they are read aloud.
Features
Text-to-speech conversion
Converts text input to speech output using the WebSpeech API.
Fully Customizable
Designed for easy import and use in React.js apps with full customization options available.
Word Highlighting
Provides an option to highlight words as they are read out in speech.
Web Speech API Integration
Converts text to speech using the Web Speech API.
Text Highlighting
Highlights words as they are read aloud, both with the useSpeech hook and the Speech component.
Event Handling API
Provides an API for handling errors and events using the useSpeech hook and Speech component.
Multiple Instances
Supports multiple speech instances with the useSpeech hook and Speech component.
Customization
Allows customization for different use cases with the useSpeech hook and the Speech component.
Text Length Limit Overcome
Overcomes the Web Speech API's text length limit to enable infinite text input.
Automatic Speech Stop
Automatically stops speech instances when the component unmounts.
Highlight Text
Highlight specific text elements during speech playback, making it clear which text is currently being read. Useful for applications that require visual feedback of spoken text.
Handling Errors and Events
Enables users to manage errors and events such as start, end, and error events during speech synthesis, providing a robust solution for managing speech integration within applications.
Multiple Instance Usage
Allows multiple instances of speech synthesis to be used simultaneously, enabling complex interactions in applications where multiple speech synthesizers may be needed at once.
Usage with Markdown
Integrate the speech synthesis features directly within Markdown content, enabling easy usage of speech features in environments where Markdown is the primary format.
Text-to-Speech Compatibility
Provides information on handling child components not being spoken, addressing common issues in text-to-speech setups.
Highlighting Issues
Addresses why the highlightText function sometimes highlights the wrong word, offering troubleshooting assistance for accurate text highlighting.
Platform-Specific Functionality
Explains functionality issues on Chrome for Android or Linux, helping ensure cross-platform compatibility.
Audio Control on Mobile
Discusses limitations in pausing audio on Android/mobile devices, which is important for mobile user experience.
React Native Compatibility
Clarifies the use of this library with React Native, expanding usability across different frameworks.
Text Input
Allows you to enter the text you want to convert to speech.
Pitch Control
Adjusts the pitch of the speech from lower to higher.
Rate Control
Controls the speed at which the text is spoken.
Volume Control
Adjusts the volume of the speech output.
Language Selection
Lets you choose from different languages for speech synthesis.
Voice Selection
Allows you to select different voice options for the speech output.
Auto Play
Enables the text to be spoken automatically once it is entered.
Text Highlighting
Highlights the spoken text as it is being read out.
Markdown Support
Supports text formatted with Markdown syntax.
Speech Component
Embeds a speech synthesis capability within components easily by using the <Speech> tag from 'react-text-to-speech'. You can simply pass the text as a child to this component and it will read it aloud.
Highlight Text Feature
Allows you to highlight text while it's being read by wrapping the text in a <HighlightText> component, providing visual feedback to the user.
Multiple Instance Usage
Enables handling multiple instances of the Speech component simultaneously, which is useful in scenarios where multiple independent text blocks need to be read aloud.
Full Customization
Provides full control over the speech synthesis parameters such as pitch, rate, and voice using the component's properties, allowing developers to tailor the speech output to the specific needs of their application.
Usage with Markdown
Integrates with Markdown, allowing the speech component to read content from markdown files, making it flexible for use in content-heavy applications.