DEV Community

Cover image for Text To Speech Converter with JavaScript
Shantanu Jana
Shantanu Jana

Posted on • Updated on

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>

Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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);
});

Enter fullscreen mode Exit fullscreen mode

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.

Top comments (12)

Collapse
 
lissy93 profile image
Alicia Sykes • Edited

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

GitHub logo 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

Collapse
 
clay profile image
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

Collapse
 
michellebowerhz4 profile image
Michelle Bower • Edited

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.

Collapse
 
therful74 profile image
Therful74

nice!

Collapse
 
sehgalspandan profile image
Spandan Sehgal

Small and easy yet amazing project! Thanks for sharing 🙃

Collapse
 
shantanu_jana profile image
Shantanu Jana

Welcome

Collapse
 
ota200 profile image
O.T.A

A great project idea! :)

Collapse
 
shantanu_jana profile image
Shantanu Jana

Thank You

Collapse
 
anikkdev profile image
Anik K Dev

Beautifully explained with simple plain words.
Loved that.

Collapse
 
shantanu_jana profile image
Shantanu Jana

Thank You

Collapse
 
maadah profile image
maadah

Nice share, can download the voice

Collapse
 
jasicarose75 profile image
jasicarose75

thanks