DEV Community

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

Posted 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:


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

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

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.

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 (10)

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


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.


There is a live demo running here

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

spandan profile image

Small and easy yet amazing project! Thanks for sharing 🙃

shantanu_jana profile image
Shantanu Jana


anikkdev profile image
Anik K Dev

Beautifully explained with simple plain words.
Loved that.

shantanu_jana profile image
Shantanu Jana

Thank You

ota200 profile image

A great project idea! :)

shantanu_jana profile image
Shantanu Jana

Thank You

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 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.