In the digital age, the ability to convert text into speech is a valuable skill. From accessibility tools to creative applications, text-to-speech (TTS) technology bridges the gap between written and spoken words. This tutorial will guide you through building a simple, interactive web-based Text-to-Speech application using ReactJS. This project is perfect for beginners and intermediate developers looking to expand their React knowledge and create something practical.
Why Build a Text-to-Speech App?
Creating a text-to-speech app allows you to:
- Enhance Accessibility: Make content accessible to individuals with visual impairments or reading difficulties.
- Improve User Experience: Provide an alternative way to consume information, especially in situations where reading is inconvenient (e.g., while driving or multitasking).
- Explore Web APIs: Learn how to utilize the Web Speech API, a powerful tool for speech synthesis and recognition.
- Develop Practical Skills: Practice ReactJS fundamentals, including component creation, state management, and event handling.
This project is an excellent opportunity to learn and apply these skills while creating a useful tool.
Prerequisites
Before you start, make sure you have the following:
- Basic knowledge of HTML, CSS, and JavaScript.
- Node.js and npm (or yarn) installed on your system.
- A code editor (e.g., VS Code, Sublime Text).
Step-by-Step Guide
1. Setting Up the React Project
First, let’s create a new React app using Create React App. Open your terminal and run the following commands:
npx create-react-app text-to-speech-app
cd text-to-speech-app
This will set up a new React project with all the necessary dependencies. Once the installation is complete, navigate into your project directory.
2. Project Structure and Initial Files
Your project directory should look something like this:
text-to-speech-app/
├── node_modules/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── ...
├── .gitignore
├── package-lock.json
├── package.json
└── README.md
We’ll primarily be working within the src directory. Let’s start by cleaning up the default files to prepare for our application. Open src/App.js and replace the content with the following:
import React from 'react';
import './App.css';
function App() {
return (
<div>
{/* Your content will go here */}
</div>
);
}
export default App;
Also, clear the contents of src/App.css. We will add our styles later.
3. Building the User Interface (UI)
Now, let’s design the UI. We’ll need a text area for input, a button to trigger the speech, and potentially some options for voice and pitch. Modify your src/App.js file to include the following UI elements within the <div className="App">:
import React, { useState } from 'react';
import './App.css';
function App() {
const [text, setText] = useState('');
const [voice, setVoice] = useState(null);
const [voices, setVoices] = useState([]);
const [pitch, setPitch] = useState(1);
const [rate, setRate] = useState(1);
return (
<div>
<h1>Text-to-Speech App</h1>
<textarea> setText(e.target.value)}
placeholder="Enter text here..."
rows="10"
cols="50"
/>
<br />
<div>
<label>Voice:</label>
setVoice(e.target.value)}>
{voices.map((voice, index) => (
{voice.name}
))}
</div>
<br />
<div>
<label>Pitch:</label>
setPitch(parseFloat(e.target.value))}
/>
</div>
<br />
<div>
<label>Rate:</label>
setRate(parseFloat(e.target.value))}
/>
</div>
<br />
<button>Speak</button>
</div>
);
}
export default App;
This code creates:
- A text area for the user to input text.
- A select element for choosing a voice.
- Pitch and Rate input fields for controlling the speech output.
- A button to initiate the text-to-speech conversion.
Next, let’s add some basic styling to src/App.css. This is optional but improves the application’s appearance. Here’s an example:
.App {
text-align: center;
padding: 20px;
font-family: sans-serif;
}
textarea {
width: 80%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
label {
margin-right: 10px;
}
input[type="number"] {
width: 50px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
4. Implementing Text-to-Speech Functionality
Now, let’s add the core functionality using the Web Speech API. We’ll need to:
- Initialize the speech synthesis.
- Get available voices.
- Speak the text when the button is clicked.
Add the following JavaScript code inside the App component, just above the return statement:
const synth = window.speechSynthesis;
const populateVoiceList = () => {
if (typeof synth !== 'undefined') {
const voices = synth.getVoices();
setVoices(voices);
if (voices.length > 0 && voice === null) {
setVoice(voices[0].name); // Set a default voice
}
}
};
React.useEffect(() => {
populateVoiceList();
if (typeof synth !== 'undefined' && synth.onvoiceschanged !== null) {
synth.onvoiceschanged = populateVoiceList;
}
}, []);
const handleSpeak = () => {
if (synth.speaking) {
console.error('speechSynthesis.speaking');
return;
}
if (text !== '') {
const utterThis = new SpeechSynthesisUtterance(text);
const selectedVoice = voices.find(v => v.name === voice);
utterThis.voice = selectedVoice;
utterThis.pitch = pitch;
utterThis.rate = rate;
synth.speak(utterThis);
}
};
Let’s break down this code:
synth = window.speechSynthesis;: This line gets the speech synthesis object from the browser.populateVoiceList(): This function retrieves the available voices from the speech synthesis API and updates the state. It also sets a default voice if none is selected.React.useEffect(): This hook is used to initialize the voices when the component mounts and also updates the voices if the user adds or removes a voice. We usesynth.onvoiceschangedto listen for changes.handleSpeak(): This function is triggered when the