Best way to create text to speech convertor using JavaScript

In this blog we want to show you how to convert text to voice using JavaScript.

Video tutorial of text to speech convertor using JavaScript

This tutorial video can help you to create text to speech convertor using JavaScript

text to speech convertor using JavaScript [Source Codes]

This source code can help you to create text to speech convertor using JavaScript.

HTML Code

Copy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Text to Speach</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  
  <div class="container">
    <div class="box">
      <input name="text" type="text" id="inputText">
      <span id="voiceIco">🔈</span>
    </div>
    <button id="convert">Text to Speech</button>
  </div>


<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
body{
  font-family: arial;
  font-size: 16px;
  margin: 0;
  color: #000;
  
  background-color: #228c97;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;;
}

.container{
  width: 680px;;
  text-align: center;
  padding: 30px;
  background: #fff;
  border-radius: 15px;
}

#inputText{
  width: 400px;
  height: 200px;
  padding: 20px;
  resize: none;
  font-size: 20px;
  font-family: arial;
  box-shadow: 0 0 5px #8c8c8c ;
  border: 3px solid #8c8c8c;
  border-radius: 10px;
  outline: 0;
}
.box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  
}
#voiceIco{
  font-size: 150px;
  width: 210px;
  text-align:left;
}
#convert{
  padding: 15px 35px;
  border-radius: 5px;
  border: 0;
  font-size: 20px;
  background: #05737f;
  color: #fff;
}

JavaScript Code

Copy

var convert = document.getElementById('convert'),
voiceIco = document.getElementById('voiceIco'),
speech  = document.getElementById('inputText'),
count = 1;

speech.addEventListener('change',function(){
  speechText = this.value;
  speechSynthesis.cancel();
  convert.innerHTML = "Text to Speech";
  voiceIco.innerHTML="🔈";
});
convert.addEventListener('click',function(){
  if(!speechSynthesis.speaking || speechSynthesis.pause()){
    speechText = speech.value;
    var speechVoice = new SpeechSynthesisUtterance();
    var voices = speechSynthesis.getVoices();
    speechVoice.voice = voices[2];
    speechVoice.text = speechText;
    speechVoice.lang = 'en-US';
    speechSynthesis.speak(speechVoice);  
  }

if(count == 1){
  convert.innerHTML = "Play";
  voiceIco.innerHTML="🔊";
  speechSynthesis.resume()
  setTimeout(() => {
    count = 2;
  }, 300);
  
}else{
  speechSynthesis.paused
  convert.innerHTML = "Pause";
  voiceIco.innerHTML="🔈";
  count = 1;

}
setInterval(() => {
  if(!speechSynthesis.speaking && count == 2){
    convert.innerHTML = "Text to Speech";
    voiceIco.innerHTML="🔈";
    count = 1;
    console.log(count)
  }
},100);


})


/*for(xx in new SpeechSynthesisUtterance()){
  console.log(xx)
}*/