Build a Simple React JavaScript Interactive Text-to-Speech App: A Beginner’s Guide

Written by

learnmodernjavascript

in

In today’s digital world, accessibility and user experience are paramount. Imagine a web application that can read text aloud, providing a valuable tool for users with visual impairments, those learning a new language, or anyone who simply prefers to listen. This tutorial will guide you through building a simple yet functional text-to-speech (TTS) application using React. We’ll explore the core concepts, implement the necessary features, and address common pitfalls. By the end of this guide, you’ll have a working TTS app and a solid understanding of how to leverage React for interactive, user-friendly applications.

Why Build a Text-to-Speech App?

Text-to-speech technology has numerous applications. Consider these scenarios:

  • Accessibility: Enables users with visual impairments to access and interact with digital content.
  • Learning: Aids language learners by providing pronunciation and auditory reinforcement.
  • Productivity: Allows users to listen to documents or articles while multitasking.
  • Entertainment: Creates engaging audio experiences for storytelling or content consumption.

Building a TTS app provides a hands-on learning experience in React, covering topics such as state management, event handling, and interacting with browser APIs. It’s a practical project that combines front-end development with accessibility considerations, making it both educational and impactful.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running the development server.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these technologies is crucial for understanding the code and styling the application.
  • A code editor: Choose your preferred code editor (e.g., VS Code, Sublime Text, Atom) for writing and editing the code.

Setting Up the React Project

Let’s start by creating a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app react-tts-app

This command creates a new directory named “react-tts-app” with all the necessary files and configurations for a React application. Navigate into the project directory:

cd react-tts-app

Now, start the development server:

npm start

This will open your app in your default web browser, usually at http://localhost:3000.

Project Structure and File Organization

Inside the “src” directory, you’ll find the core files for your React application. We’ll modify the following files:

  • src/App.js: This is the main component where we’ll build our text-to-speech functionality.
  • src/App.css: We’ll use this file to add styles to our application.

Building the Text-to-Speech Component

Let’s create the core component for our TTS app. Open `src/App.js` and replace the existing code with the following:

import React, { useState } from 'react';
import './App.css';

function App() {
  const [text, setText] = useState('');
  const [voice, setVoice] = useState(null);
  const [voices, setVoices] = useState([]);

  // Load voices when the component mounts
  React.useEffect(() => {
    if (typeof window !== 'undefined' && window.speechSynthesis) {
      const populateVoices = () => {
        const voices = window.speechSynthesis.getVoices();
        setVoices(voices);
        // Set a default voice
        if (voices.length > 0) {
          setVoice(voices[0]);
        }
      };

      // Ensure voices are loaded before populating
      if (window.speechSynthesis.onvoiceschanged !== null) {
        window.speechSynthesis.onvoiceschanged = populateVoices;
      }
      populateVoices();
    }
  }, []);

  const handleTextChange = (event) => {
    setText(event.target.value);
  };

  const handleVoiceChange = (event) => {
    const selectedVoice = voices.find(voice => voice.name === event.target.value);
    setVoice(selectedVoice);
  };

  const handleSpeak = () => {
    if (text && voice) {
      const utterance = new SpeechSynthesisUtterance(text);
      utterance.voice = voice;
      window.speechSynthesis.speak(utterance);
    }
  };

  return (
    <div>
      <h1>Text-to-Speech App</h1>
      <textarea />
      <div>
        <label>Select Voice:</label>
        
          {voices.map((voice) => (
            
              {voice.name} ({voice.lang})
            
          ))}
        
      </div>
      <button>Speak</button>
    </div>
  );
}

export default App;

Let’s break down this code:

  • Import Statements: We import `useState` from React to manage the component’s state and `useEffect` to handle side effects. We also import the CSS file.
  • State Variables:
    • `text`: Stores the text entered by the user.
    • `voice`: Stores the selected voice.
    • `voices`: Stores an array of available voices.
  • useEffect Hook: This hook runs once when the component mounts. It fetches the available voices using `window.speechSynthesis.getVoices()` and updates the `voices` state. It also sets a default voice. The `typeof window !== ‘undefined’` check ensures that the code runs only in the browser environment, preventing errors during server-side rendering.
  • handleTextChange: Updates the `text` state when the user types in the textarea.
  • handleVoiceChange: Updates the `voice` state when the user selects a voice from the dropdown.
  • handleSpeak: Creates a `SpeechSynthesisUtterance` object with the user’s text and selected voice, then calls `window.speechSynthesis.speak()` to start the speech.
  • JSX Structure: The component renders a heading, a textarea for text input, a dropdown for voice selection, and a button to trigger speech.

Styling the Application

Now, let’s add some basic styling to make the app visually appealing. Open `src/App.css` and add the following CSS rules:

.App {
  text-align: center;
  font-family: sans-serif;
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
}

textarea {
  width: 80%;
  height: 150px;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 16px;
}

select {
  padding: 8px;
  font-size: 16px;
  margin-bottom: 10px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #3e8e41;
}

This CSS provides a basic layout and styling for the app’s elements.

Step-by-Step Implementation

Here’s a breakdown of the implementation steps:

  1. Project Setup: Create a new React app using `create-react-app`.
  2. Component Structure: Define the structure of the `App` component, including the text input, voice selection, and speak button.
  3. State Management: Use `useState` to manage the text, selected voice, and available voices.
  4. Fetching Voices: Use the `useEffect` hook to load available voices from the browser’s `speechSynthesis` API when the component mounts.
  5. Event Handling: Implement `handleTextChange` to update the text state when the user types in the textarea, `handleVoiceChange` to update the selected voice, and `handleSpeak` to trigger the speech.
  6. Speech Synthesis: In the `handleSpeak` function, create a `SpeechSynthesisUtterance` object, set the voice, and use `window.speechSynthesis.speak()` to start the speech.
  7. Styling: Add CSS styles to enhance the app’s appearance.

Handling Voice Selection and Browser Compatibility

One of the challenges in working with the Speech Synthesis API is the variability in voice availability across different browsers and operating systems. Let’s address voice selection and browser compatibility.

Voice Selection: The `handleVoiceChange` function finds the selected voice by comparing the `voice.name` attribute with the selected option’s value. This ensures that the correct voice is chosen from the available options. The default voice selection in the `useEffect` hook, ensures that the app has a default voice selected when it loads, even if the user doesn’t immediately select one.

Browser Compatibility: The SpeechSynthesis API is supported by most modern browsers. The `typeof window !== ‘undefined’` check within the `useEffect` hook, along with the conditional checking of `window.speechSynthesis`, are crucial for preventing errors when the application runs in environments where the SpeechSynthesis API might not be available (e.g., server-side rendering).

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Not checking for `speechSynthesis` support: Always check if `window.speechSynthesis` exists before using the API. This prevents errors in browsers that don’t support it.
  • Incorrect voice selection: Ensure that you are correctly matching the voice names or identifiers when selecting a voice.
  • Not handling voice loading: The voices might not be immediately available when the component mounts. Load the voices in a `useEffect` hook and handle the `onvoiceschanged` event to ensure the voices are loaded before you try to use them.
  • Forgetting to set the voice: When creating the `SpeechSynthesisUtterance` object, make sure to set the `voice` property to the selected voice.
  • Ignoring user experience: Consider adding a loading indicator while the speech is in progress, and provide feedback to the user about the app’s status.

Enhancements and Advanced Features

Once you have a basic TTS app, you can add several enhancements:

  • Voice Customization: Allow users to adjust the speech rate and pitch.
  • Pause and Resume: Add buttons to pause and resume the speech.
  • Text Highlighting: Highlight the current word being spoken.
  • Error Handling: Implement error handling to gracefully manage situations like network issues or unsupported voices.
  • Speech SynthesisUtterance properties: Explore and implement other properties of `SpeechSynthesisUtterance`, such as `pitch`, `rate`, and `volume`, to give more control to the user.
  • Save and Load Settings: Use local storage to persist user preferences like selected voice and speech rate.

Key Takeaways

This tutorial has shown you how to build a basic text-to-speech application using React. You’ve learned how to:

  • Set up a React project.
  • Use the `useState` and `useEffect` hooks.
  • Interact with the `speechSynthesis` API.
  • Handle user input and events.
  • Style a React component.

FAQ

Q: Why is the voice not changing when I select a different voice?

A: Make sure you are correctly matching the `voice.name` attribute when selecting the voice in the `handleVoiceChange` function. Also, ensure that the selected voice is not `null` or `undefined` before passing it to the `SpeechSynthesisUtterance` object.

Q: Why is the app not working in my browser?

A: Check if your browser supports the `speechSynthesis` API. Make sure you are not running the app in an environment where the `window` object is not available. Also, ensure that you have not disabled JavaScript in your browser settings.

Q: How can I add a loading indicator while the speech is in progress?

A: You can add a state variable (e.g., `isSpeaking`) to track the speech status. Set `isSpeaking` to `true` when `speak()` is called, and set it to `false` when the speech ends (you can use the `onend` event on the `SpeechSynthesisUtterance` object). Display a loading indicator based on the value of `isSpeaking`.

Q: How can I handle errors if the speech fails?

A: You can use the `onerror` event on the `SpeechSynthesisUtterance` object to catch errors. Implement error handling to display an appropriate message to the user if the speech fails, such as “Speech failed to load” or “The selected voice is not available.”

Q: Can I use this app on mobile devices?

A: Yes, you can use this app on mobile devices, as long as the device has a browser that supports the SpeechSynthesis API. However, you might want to consider optimizing the layout and user interface for mobile screens.

Building a text-to-speech application with React is a great way to learn about web development and accessibility. The skills you’ve gained in this tutorial will be valuable for other React projects. Experiment with the code, add more features, and explore the possibilities of TTS technology. Your journey into the world of accessible and interactive web applications is just beginning.

More posts