codemediaweb.com

Code Media

hire me

Create Text to Speech Converter in JavaScript (Free Code)

by

Here you will learn how to convert Text to Speech using JavaScript. Any text can be easily converted to voice using the Web Speech API. 

This type of JavaScript Text to Speech Converter is used in many places. For example, we see the option of reading and listening to articles on many websites.

This text to speech javascript example was created by me with javascript only. In this case, no external JavaScript library was used. 

Text to Speech Converter in JavaScript
Demo
Download

The most amazing thing is that I only used three lines of JavaScript here. Yes, that’s right. Although some HTML and CSS have been used to add design and basic information.

Text to speech and speech-to-text are completely different, but both are created by the Web Speech API. In this case, I have used SpeechSynthesis.

In the case of a text-to-speech project, basically when you input something into the computer and the computer converts that text into voice.

This type of javascript text to speech can be made in a much more advanced way. There will be different types of control buttons and volume up and down.

Since this is for beginners I have definitely tried to create this Text-to-Speech using the simplest code.

I know some browsers do not support Speech Synthesis. Since I made it in a very simple way, I did not add so many conditions here. You can use this design to create Text to Speech Converter in an advanced way.

Step 1: 

HTML code of Text to Speech Converter

Below are the HTML codes required for this text-to-speech technology. HTML is used here to add basic information. 

First, a box was created on the webpage. Then there is a heading. Then there is a text area where you will input text. Then there are select options where you can select different options.

<div id=”outerContainer”>
  <div id=”innerContainer”>
<!– heading –>
    <h1>Text-to-Speech</h1>
<!– text input box –>
    <textarea id=”txtInput” placeHolder=”Enter text to be spoken” cols=”40″ rows=”5″ ></textarea>
    <br />
<!– voice select dropdown –>
    <select id=”voice”>
      <option value=”0″>US English</option>
      <option value=”1″>UK English Male</option>
      <option value=”2″>UK English Female</option>
      <option value=”3″>Spanish</option>
      <option value=”4″>French</option>
      <option value=”5″>Italian</option>
      <option value=”6″>German</option>
      <option value=”7″>Japanese</option>
      <option value=”8″>Korean</option>
      <option value=”9″>Chinese</option>
    </select>
    <br />
<!– Submit button –>
    <input type=”button” value=”Say it” id=”sayitBtn”></input>
  </div>
</div>

Step 2: 

Design the Text to Speech Converter

Some CSS is needed to design the information of the Text to Speech Converter added above. Width of basic structure: 400px, background-color white has been used.

/* Basic webpage design */
body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: sans-serif;
  background: #188cfa;
}
/* heading */
#innerContainer h1{
text-align: center;
margin-top: 10px;
color: #0d64c8;
}
/* text input box */
textarea{
  min-height: 200px;
  box-shadow: 0 0 20px rgba(0,139,253,0.35);
  border: 5px solid rgba(77, 158, 220, 0.643);
  width: 125%;
  margin-left: -14%;
  font-size: 18px;
  font-family: sans-serif;
  margin-top: 15px;
}
/* basic design of Text to Speech */
#outerContainer {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  background: white;
  margin: 100px auto;
  box-shadow: 0 20px 25px rgba(60,60,100,0.15);
  width: 400px;
  padding: 10px;
  border-radius: 3px;
}
/* select dropdown */
select{
  width: 70%;
  margin-left: 15%;
  margin-top: 30px;
  height: 50px;
  font-size: 18px;
  border: 3px solid #68a7eb;
  background: #deedf3;
}
/* submit button */
#sayitBtn{
  width: 150px;
  height: 50px;
  margin: 35px auto;
  margin-left: 30%;
  background: #087cca;
  border: none;
  color: white;
  font-size: 20px;
}

Step 3: 

Activate JavaScript Text to Speech Converter

Now you need to activate the text-to-speech javascript example. As I said before, only three lines of JavaScript have been used here. 

First three lines I have determined the global constants of some HTML elements. Because I can’t use any HTML function directly in JavaScript.

Here all the information has been added using onclick and that is attached to the button. This means that all of these JavaScript will work when you click on the button. And your input text will be converted to speech.

var voice = document.getElementById(“voice”);
var txtInput = document.getElementById(“txtInput”);
var sayitBtn = document.getElementById(“sayitBtn”);
//onclick event generally occurs when the user clicks on an element
sayitBtn.onclick = function() {
//SpeechSynthesisUtterance interface of the Web Speech API represents a speech request.
  speech = new SpeechSynthesisUtterance(txtInput.value);
  //console.log(“Saying: ” + txtInput.value);
//speechSynthesis read-only property of the Window object
  speech.voice = speechSynthesis.getVoices()[parseInt(voice.value)];
  speechSynthesis.speak(speech);
}

Have you been able to create this project?🤔 Hopefully, you have made it.

If there is any problem, you can let us know by commenting. You can use this Text to Speech Converter directly on any of your projects or websites.

Use the download button below if you want the source code. Then I’m going to build another JavaScript Text to Speech Converter with a control button.

Leave a comment