Text To Speech Converter with JavaScript

Converting text to speech using HTML, CSS, and JavaScript can be done using the SpeechSynthesis API.

The SpeechSynthesis API is a built-in JavaScript API that allows you to convert text to speech directly in the browser without the need for any external libraries.

Here is an example of how to use the SpeechSynthesis API to convert text to speech in HTML, CSS, and JavaScript:

HTML Code

<div id="text-to-speech">
  <textarea id="text"></textarea>
  <button id="speak-button">Speak</button>
</div>

CSS Code

#text-to-speech {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#text {
  width: 300px;
  height: 100px;
  padding: 10px;
  margin-bottom: 10px;
}

#speak-button {
  padding: 10px;
  font-size: 18px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

JavaScript Code

// Get the text area and speak button elements
let textArea = document.getElementById("text");
let speakButton = document.getElementById("speak-button");

// Add an event listener to the speak button
speakButton.addEventListener("click", function() {
  // Get the text from the text area
  let text = textArea.value;

  // Create a new SpeechSynthesisUtterance object
  let utterance = new SpeechSynthesisUtterance();

  // Set the text and voice of the utterance
  utterance.text = text;
  utterance.voice = window.speechSynthesis.getVoices()[0];

  // Speak the utterance
  window.speechSynthesis.speak(utterance);
});

This example creates a text area and a button in the HTML, styles them using CSS, and then uses JavaScript to add an event listener to the button that converts the text in the text area to speech when the button is clicked.

Related Post:

1. Responsive Footer HTML CSS
2. IB Schools in Bangalore
3. Simple Stopwatch using JavaScript
4. Preschools in Whitefield
5. javaScript Password Generator
6. Best International Schools in Hyderabad
7. Sidebar Menu Using HTML CSS

This is just a basic example and you can customize it further according to your needs by, for example, adding more options to the speech synthesis and also you can use libraries such as responsivevoice.js, meSpeak.js or annyang.js to add more functionalities and features.

Comments

[Alicia Sykes]

Nice post :) And nicely explained, thanks for sharing.

There's loads of project ideas you could make with this!

I made one a while back, that shows real-time analytics based on your speech

Lissy93 / realtime-speech-analytics

🗣️ Real-time visual analytics and entity extraction of live speech

🗣️ Real-Time Speach Analytics

Calculates and renders live speach insights, to help you understand the meaning and tone behind spoken language
Useful for generating meeting notes, inteligent subtitles, practicing speaches, language translation, etc

Intro

This is a simple node app, which listens for speach (of any type), and in realtime calculates insightful stats from it, then generates a series of visual analytics in D3.js, which are updated live, as speach comes in.

This includes, current sentiment, most commonly used words, pace of speach, key entities that are being mentioned, and more The technology developed can be put into use in areas, such as speach coaching, meeting notes, inteligent subtitles, learning languages, live news analysis, gauging consumer feedback on review videos, sports commentry etc...

Initially developed as a prototype, by myself (Alicia Sykes), and Oliver Poole (in 24 hours!) during AngelHack London 2016.

Demo

There is a live demo running here…

View on GitHub

[Clay Ferguson]

The Fediverse platform I wrote, Quanta, does TTS too. I love it. It's using the javascript API...

Quanta TTS

Here's the Code

[Michelle Bower]

This can be useful for people with reading disabilities, as well as for those who want to listen to text instead of reading. You can do anything with a Java script. I find informative speech topics so far, use gradesfixer.com/blog/150-sports-in... for that. Using libraries such as SpeechSynthesis, you can create a script that will convert text to speech and speak it. It just sounds unrealistic, but this future has already arrived and we are living it.

[Therful74]

nice!

[Spandan Sehgal]

Small and easy yet amazing project! Thanks for sharing 🙃

[Shantanu Jana]

Welcome

[O.T.A]

A great project idea! :)

[Shantanu Jana]

Thank You

[Anik K Dev]

Beautifully explained with simple plain words.
Loved that.

[Shantanu Jana]

Thank You

[maadah]

Nice share, can download the voice

[jasicarose75]

thanks