Text to Speech JavaScript with Source Code

by

The JavaScript text to speech is a simple project designed in JavaScript language using HTML and CSS platform. It’s a simple mini-project. This project allows you to transform your text to speech form automatically. You can only click on the words in the picture to get their speech form or simply type any word you want to hear.

This text to speech using javascript is a desktop web application. Basically, tutorials and guides for creating code are included in the project. Also, the project provides code creation tutorials and guides. The project is also open source, where users can download and edit zips as required.

I have here a suggested list of Best JavaScript Projects with Source Code Free to download and I’m sure this can help you to improve your skills in JavaScript programming and web development as a whole.

Anyway if you want level up your knowledge in programming especially JavaScript Programming, try this new article I’ve made for you Best JavaScript Projects With Source Code For Beginners 2021.

To start creating a Speech Text Reader in JavaScript with Source Code, make sure that you have any platform in creating a JavaScript, bootstrap, and HTML installed in your computer, in my case I will use Sublime Text.

Speech to Text in JavaScript with Source Code Steps on How to Create a Project

Time needed: 5 minutes.

Here’s the Steps on how to create a JavaScript speech to text with Source Code

  • Step 1: Open Sublime Text.

    First, after installing sublime text IDE, click “open” to start.

  • Step 2: Create a HTML file.

    Next, click “file” and select “save as” and named it “index.html“.

  • Step 3: Create a JavaScript file.

    Then, click “file” and select “save as” and named it “script.js“.

  • Step 4: Create a CSS file.

    Last, click “file” and select “save as” and named it “style.css“.
    Create style.css for Speech Text Reader in JavaScript with Source Code

  • Step 5: The actual code.

    Finally, You are free to copy the code given below and paste to your different file created.

Code for the index.html in Speech Text Reader in JavaScript

In the code given below, which is the code contains the interface of the application. This code will show the form that will be use in html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Itsourcecode Speech Text Reader</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
   
    <div class="container">
      <h1>Itsourcecode Speech Text Reader</h1>
      <button id="toggle" class="btn btn-toggle">Toggle text box</button>
      <div id="text-box" class="text-box">
        <div id="close" class="close">X</div>
        <h3>Choose Choice</h3>
        <select name="" id="voice"></select>
        <textarea id="text" placeholder="Enter text to read..."></textarea>
        <button id="read" class="btn">Read text</button>
      </div>
      <main></main>
    </div>
    <script src="script.js" async defer></script>
  </body>
</html>

Code for the style.css in Speech Text Reader in JavaScript

In the code given below, which is the code contains the interface design of the application. This code will show the form that will be use for designing.

@import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap");
* {
  box-sizing: border-box;
}
body {
  font-family: "Righteous", cursive;
  background-color: #e8e8e8;
  color: #222831;
  min-height: 100vh;
  margin: 0;
}
h1 {
  text-align: center;
  color: white;
}
.container {
  margin: auto;
  padding: 20px;
  background-color: black;
}
.btn {
  cursor: pointer;
  background-color: blue;
  color: white;
  border: 0;
  border-radius: 5px;
  padding: 10px 15px;
}
.btn:active {
  transform: scale(0.9);
}
.btn:focus,
select:focus {
  outline: 0;
}
.btn-toggle {
  display: block;
  margin: auto;
  margin-bottom: 20px;
}
.text-box {
  width: 70%;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -800px);
  background-color: #00cc00;
  color: #e8e8e8;
  padding: 20px;
  border-radius: 5px;
  transition: all 1s ease-in-out;
}
.text-box.show {
  transform: translate(-50%, 0);
}
.text-box select {
  background-color: #0033cc;
  border: 0;
  color: #e8e8e8;
  font-size: 12px;
  height: 30px;
  width: 100%;
}
.text-box textarea {
  border: 1px solid #30475e;
  border-radius: 5px;
  font-size: 16px;
  padding: 8px;
  margin: 15px 0;
  width: 100%;
  height: 150px;
}
.text-box .btn {
  position: absolute;
  right: 30px;
  bottom: 50px;
}
.text-box .close {
  float: right;
  text-align: right;
  cursor: pointer;
}
main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.box {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.2s ease-out;
}
.box.active {
  box-shadow: 0 0 10px 5px #f05454;
}
.box img {
  width: 100%;
  object-fit: cover;
  height: 200px;
}
.box .info {
  background-color: blue;
  color: white;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
  padding: 10px;
  text-align: center;
  height: 100%;
}
@media (max-width: 1100px) {
  main {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 760px) {
  main {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  main {
    grid-template-columns: 1fr;
  }
}

Code for the script.js in Speech Text Reader in JavaScript

In the code given below, which is the code contains the interface function of the application. This code will show the function of the form that will be use in html.

const main = document.querySelector("main");
const voiceSelect = document.getElementById("voice");
const textarea = document.getElementById("text");
const readBtn = document.getElementById("read");
const toggleBtn = document.getElementById("toggle");
const closeBtn = document.getElementById("close");

const data = [
  {
    image: "./images/australia.png",
    text: "Australia",
  },
  {
    image: "./images/china.jpg",
    text: "China",
  },
  {
    image: "./images/india.jpg",
    text: "india",
  },
  {
    image: "./images/japan.png",
    text: "Japan",
  },
  {
    image: "./images/philippines.png",
    text: "philippines",
  },
  {
    image: "./images/russia.jpg",
    text: "Russia",
  },
  {
    image: "./images/southkorea.png",
    text: "South Korea",
  },
  {
    image: "./images/usa.png",
    text: "United States of America",
  },
 
];

data.forEach(createBox);

//create box
function createBox(item) {
  const box = document.createElement("div");
  const { image, text } = item;
  box.classList.add("box");
  box.innerHTML = `
        <img src="${image}" alt="${text}" />
        <p class="info">${text}</p>
    `;
  box.addEventListener("click", () => {
    setTextMessage(text);
    speakText();
   
    box.classList.add("active");
    setTimeout(() => box.classList.remove("active"), 800);
  });
  main.appendChild(box);
}

const message = new SpeechSynthesisUtterance();


function setTextMessage(text) {
  message.text = text;
}


function speakText() {
  speechSynthesis.speak(message);
}


let voices = [];
function getVoice() {
  voices = speechSynthesis.getVoices();
  voices.forEach((voice) => {
    const option = document.createElement("option");
    option.value = voice.name;
    option.innerText = `${voice.name} ${voice.lang}`;
    voiceSelect.appendChild(option);
  });
}

speechSynthesis.addEventListener("voiceschanged", getVoice);
getVoice();



toggleBtn.addEventListener("click", () =>
  document.getElementById("text-box").classList.toggle("show")
);

closeBtn.addEventListener("click", () =>
  document.getElementById("text-box").classList.remove("show")
);

function setVoice(e) {
    message.voice = voices.find((voice) => voice.name === e.target.value);
  }

voiceSelect.addEventListener("change", setVoice);

readBtn.addEventListener("click", () => {
  setTextMessage(textarea.value);
  speakText();
});

Downloadable Source Code

Download Now

Summary

In summary, this 2021 Speech Text Reader in JavaScript with Source Code can be useful to students or professional who wants to learn web development using technologies like HTML, CSS and JavaScript. This project can also be modified to fit your personal requirements. Hope this project will help you to improve your skills. Happy coding!

Inquiries

If you have any questions or suggestions about Speech Text Reader in JavaScript with Source Code, please feel free to leave a comment below.

2 thoughts on “Text to Speech JavaScript with Source Code”

Leave a Comment