Text-to-Speech Converter

Table of Contents

Live Demo
Technologies used -
HTML
CSS
JavaScript
Description

This Text-to-Speech Converter app lets you type any text and listen to it spoken aloud with different voices. Simply type into the text area, select a voice from the dropdown menu, and click ‘Listen’ to hear the text in real-time. This app is ideal for anyone who wants to transform written content into spoken words quickly.

This snippet explains the core functions:

Fetch Available Voices: Retrieves and loads all available voices from the system, populating the dropdown for user selection.
Change Voice: Updates the voice based on the user’s selection from the dropdown.
Trigger Speech: Converts the text input into spoken words using the selected voice.

Highlighted Source Code
				
					let speech = new SpeechSynthesisUtterance();
let voices = [];
let voiceSelect = document.querySelector("select");

window.speechSynthesis.onvoiceschanged = () => {
    voices = window.speechSynthesis.getVoices();
    speech.voice = voices[0];  // Sets the initial voice

    // Populates the dropdown with available voices
    voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)));
}

// Changes the voice based on user selection
voiceSelect.addEventListener("change", () => {
    speech.voice = voices[voiceSelect.value];
});

// Triggers the text-to-speech functionality
document.querySelector("button").addEventListener("click", () => {
    speech.text = document.querySelector("textarea").value;
    window.speechSynthesis.speak(speech);
});

Recent Projects

Follow me

Github Linkedin Instagram

Related Projects
Fun Project

Tic Tac Toe Game

The Interactive Tic Tac Toe Game is a classic two-player game implemented using HTML, CSS, and JavaScript. This engaging application

Read More »
Type to search