Convert Text to Speech in Your Browser Convert text to spoken audio using the Web Speech API.

The tool utilizes the Web Speech API's SpeechSynthesis interface to convert written text into spoken audio. It loads voices asynchronously via speechSynthesis.getVoices() with an onvoiceschanged event listener for browsers that load voices lazily, ensuring voice availability is checked and updated dynamically. A new SpeechSynthesisUtterance object is created with the input text, selected voice, rate, and pitch, allowing for customization of the speech synthesis output. The utterance object's properties are set using values from the React state variables, such as rate and pitch, which are adjusted through user input via HTML range inputs.

Event handlers track the speaking state by attaching callbacks to the onstart, onend, and onerror events of the SpeechSynthesisUtterance object. These event handlers update the component's state accordingly, toggling flags like isSpeaking and isPaused to reflect the current playback status. Playback control uses methods from the speechSynthesis interface, including pause(), resume(), and cancel(), which are called in response to user interactions with buttons in the component. The React useEffect hook ensures cleanup by canceling any active speech on unmount, preventing memory leaks or lingering audio playback.

The tool's implementation relies on React hooks like useState and useEffect to manage state and side effects, while Framer Motion is used for animating button interactions. The code also uses TypeScript type annotations to ensure correctness and maintainability of the component. By leveraging these technologies, the tool provides a seamless text-to-speech experience with customizable voice selection, rate, and pitch adjustment, all within a self-contained browser-based implementation that eliminates the need for external APIs or libraries.