Build a Text to Speech Converter using HTML, CSS & Javascript

JavaScript
Written by Rick Bowen (JavaScript)

I’m thrilled to announce the completion of my Text-to-Voice Converter project using javascript! This project enables users to convert any typed text into speech in real time. The tool is designed with accessibility and user experience in mind, featuring voice selection and a responsive design for seamless usability across devices.

Features of the Text-to-Voice Converter

  1. Real-Time Text-to-Speech: Converts the user’s input text into audio at the click of a button.
  2. Voice Selection: Allows users to choose from multiple voices (e.g., Microsoft Zira, male or female voices).
  3. Responsive Design: Works flawlessly on desktops, tablets, and mobile devices.
  4. Accessibility-Focused: Built to assist individuals who benefit from auditory content rather than visual text.

How It Works

  1. Type Text: Users can input text into a large text area.
  2. Select Voice: A dropdown menu allows users to select their preferred voice or language accent.
  3. Click Listen: The tool generates and plays the audio of the text using the browser’s text-to-speech API.
  4. Real-Time Feedback: Audio is played instantly, with a responsive loading animation to enhance user interaction.

Output Result Explanation

In the screenshot provided, the user entered the text “convert your…” into the text area. After selecting a voice (e.g., Microsoft Zira in English), the “Listen” button is clicked. The application processes the text in real time and plays the corresponding audio. The loading animation ensures the user knows the conversion is happening.

The Code Behind the Project

HTML:

code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text-to-Voice Converter</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Convert Text to <span>Voice</span></h1>
        <textarea id="textInput" placeholder="Type your text here..."></textarea>
        <div class="controls">
            <select id="voiceSelect"></select>
            <button id="listenButton">Listen</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS: Styling the Interface

codebody {
    font-family: Arial, sans-serif;
    background: linear-gradient(120deg, #0f4c75, #3282b8);
    color: #fff;
    text-align: center;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: #1b262c;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

h1 {
    font-size: 2rem;
    margin-bottom: 20px;
}

h1 span {
    color: #00ffcc;
}

textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 20px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

select, button {
    padding: 10px 15px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button {
    background-color: #00ffcc;
    color: #000;
}

button:hover {
    background-color: #00e6b8;
}

JavaScript: Adding Functionality

code// Grab elements
const textInput = document.getElementById('textInput');
const voiceSelect = document.getElementById('voiceSelect');
const listenButton = document.getElementById('listenButton');

// Populate voice options
function populateVoiceList() {
    const voices = speechSynthesis.getVoices();
    voiceSelect.innerHTML = ''; // Clear previous options
    voices.forEach((voice, index) => {
        const option = document.createElement('option');
        option.value = index;
        option.textContent = `${voice.name} (${voice.lang})`;
        voiceSelect.appendChild(option);
    });
}

// Trigger voice list update when voices are loaded
speechSynthesis.onvoiceschanged = populateVoiceList;

// Play the input text
listenButton.addEventListener('click', () => {
    const text = textInput.value;
    if (!text) {
        alert('Please enter some text!');
        return;
    }
    const utterance = new SpeechSynthesisUtterance(text);
    const selectedVoice = speechSynthesis.getVoices()[voiceSelect.value];
    if (selectedVoice) utterance.voice = selectedVoice;
    speechSynthesis.speak(utterance);
});

Solving Common Issues

  1. No Available Voices:
    • Solution: Ensure the browser supports the Web Speech API (e.g., Google Chrome, Edge). The speechSynthesis.onvoiceschanged event updates the voice list.
  2. Audio Not Playing:
    • Solution: Some browsers require user interaction before playing audio. Ensure the “Listen” button is clicked.
  3. Responsive Design:
    • Solution: The tool is designed to adapt to various screen sizes using a flexible layout.

Future Improvements

  • Text Uploads: Allow users to upload text files for conversion.
  • Save as Audio File: Add an option to download the generated speech as an MP3 file.
  • Language Detection: Automatically select the appropriate voice based on the text language.
  • Accessibility Enhancements: Include a dark mode and keyboard navigation for improved usability.

Conclusion

This Text-to-Voice Converter project is a step toward improving accessibility and providing a fun, interactive tool for text-to-speech functionality. I’m incredibly proud of how it turned out, and I hope it inspires others to create tools that make technology more inclusive and engaging.

Related blog posts

Load more
Know More About FSIBLOG
Useful Pages

2024 © FSIBLOG. All Rights Reserved.