Speech Text Reader in JavaScript with Source Code

September 7, 2021February 17, 2021 by adones evangelista

Speech Text Reader in JavaScript with Source Code

The Speech Text Reader in JavaScript 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 JavaScript Speech Text Reader 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.

Watch the video here to see the full running Speech Text Reader In JavaScript With Source Code

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 Text Reader 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 Speech Text Reader in JavaScript 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“.
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.

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!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&amp;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;
  }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

@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 = &#91;
  {
    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 = `
        &lt;img src="${image}" alt="${text}" /&gt;
        &lt;p class="info"&gt;${text}&lt;/p&gt;
    `;
  box.addEventListener("click", () =&gt; {
    setTextMessage(text);
    speakText();
   
    box.classList.add("active");
    setTimeout(() =&gt; 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 = &#91;];
function getVoice() {
  voices = speechSynthesis.getVoices();
  voices.forEach((voice) =&gt; {
    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", () =&gt;
  document.getElementById("text-box").classList.toggle("show")
);

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

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

voiceSelect.addEventListener("change", setVoice);

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

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

});

Run Quick Virus Scan for secure Download

Run Quick Scan for safe Download

Downloadable Source Code

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.

Leave a Comment Cancel reply