How to Create Text To Speech Converter in HTML & JavaScript

CSSHow To !HTMLJavaScriptProgramming
Hey Everyone, today in this tutorial, you’ll learn how to create a Text To Speech Converter in HTML CSS & JavaScript. In the earlier blog, I have shared How to Build A Currency Converter App in HTML CSS & JavaScript and now it’s time to create a Text To Speech Converter Web Application. Text To Speech (TTS) is a technology that enables your text to be converted into speech sounds. In this project (Text To Speech Converter App), you can convert your text into speech on different voices. A pause and resume option is also available if your text character length is more than 80.

Text To Speech Converter using JavaScript [Source Codes]

To create this Text To Speech Converter App (TTS). First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files just paste the given codes into your file. You can also download the source code files of this Text To Speech App from the given download button.

HTML

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. 

<!DOCTYPE html>
<!-- Coding By Codegyan - codegyan.in ---->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">  
    <title>Text To Speech in JavaScript | Codegyan</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="wrapper">
      <header>Text To Speech</header>
      <form action="#">
        <div class="row">
          <label>Enter Text</label>
          <textarea></textarea>
        </div>
        <div class="row">
          <label>Select Voice</label>
          <div class="outer">
            <select></select>
          </div>
        </div>
        <button>Convert To Speech</button>
      </form>
    </div>

    <script src="script.js"></script>

  </body>
</html>

CSS

Secondly, You have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension. 

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #5256AD;
}
::selection{
  color: #fff;
  background: #5256AD;
}
.wrapper{
  width: 370px;
  padding: 25px 30px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 7px 7px 20px rgba(0,0,0,0.05);
}
.wrapper header{
  font-size: 28px;
  font-weight: 500;
  text-align: center;
}
.wrapper form{
  margin: 35px 0 20px;
}
form .row{
  display: flex;
  margin-bottom: 20px;
  flex-direction: column;
}
form .row label{
  font-size: 18px;
  margin-bottom: 5px;
}
form .row:nth-child(2) label{
  font-size: 17px;
}
form :where(textarea, select, button){
  outline: none;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 5px;
}
form .row textarea{
  resize: none;
  height: 110px;
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid #999;
}
form .row textarea::-webkit-scrollbar{
  width: 0px;
}
form .row .outer{
  height: 47px;
  display: flex;
  padding: 0 10px;
  align-items: center;
  border-radius: 5px;
  justify-content: center;
  border: 1px solid #999;
}
form .row select{
  font-size: 14px;
  background: none;
}
form .row select::-webkit-scrollbar{
  width: 8px;
}
form .row select::-webkit-scrollbar-track{
  background: #fff;
}
form .row select::-webkit-scrollbar-thumb{
  background: #888;
  border-radius: 8px;
  border-right: 2px solid #ffffff;
}
form button{
  height: 52px;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  margin-top: 10px;
  background: #675AFE;
  transition: 0.3s ease;
}
form button:hover{
  background: #4534fe;
}

@media(max-width: 400px){
  .wrapper{
    max-width: 345px;
    width: 100%;
  }
}

JavaScript

Lastly, you have to create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension. 

const textarea = document.querySelector("textarea"),
voiceList = document.querySelector("select"),
speechBtn = document.querySelector("button");

let synth = speechSynthesis,
isSpeaking = true;

voices();

function voices(){
    for(let voice of synth.getVoices()){
        let selected = voice.name === "Google US English" ? "selected" : "";
        let option = `<option value="${voice.name}" ${selected}>${voice.name} (${voice.lang})</option>`;
        voiceList.insertAdjacentHTML("beforeend", option);
    }
}

synth.addEventListener("voiceschanged", voices);

function textToSpeech(text){
    let utterance = new SpeechSynthesisUtterance(text);
    for(let voice of synth.getVoices()){
        if(voice.name === voiceList.value){
            utterance.voice = voice;
        }
    }
    synth.speak(utterance);
}

speechBtn.addEventListener("click", e =>{
    e.preventDefault();
    if(textarea.value !== ""){
        if(!synth.speaking){
            textToSpeech(textarea.value);
        }
        if(textarea.value.length > 80){
            setInterval(()=>{
                if(!synth.speaking && !isSpeaking){
                    isSpeaking = true;
                    speechBtn.innerText = "Convert To Speech";
                }else{
                }
            }, 500);
            if(isSpeaking){
                synth.resume();
                isSpeaking = false;
                speechBtn.innerText = "Pause Speech";
            }else{
                synth.pause();
                isSpeaking = true;
                speechBtn.innerText = "Resume Speech";
            }
        }else{
            speechBtn.innerText = "Convert To Speech";
        }
    }
});
Also Read : How To Create Minion Eyes That Follows Mouse Cursor
If you wann to check the demo of this code, then you can check using below demo button.
Click on the following download button to download all source code files of converter tools directly on your computer.

Final Word

In this way, we can create text to speech converter tool using html, css & JavaScript. I hope you all like this tutorial. Keep with us for next tutorial. if you wann the source code of this code you can get this on our github account. If you have any query please free to contact us Or comment below
       
Updated on 05-Jan-2022 0:03:58

482 Views

Previous Page Next Page  
Advertisements

ads