Skip to content

Commit b7d04ed

Browse files
shrey141102shrey141102
authored
Merge pull request #94 from Gaurav0203Shetty/text-speech
text to speech
2 parents 23e7a46 + 674c31d commit b7d04ed

File tree

8 files changed

+132
-0
lines changed

8 files changed

+132
-0
lines changed

‎Text-to-speech/.DS_Store

6 KB
Binary file not shown.

‎Text-to-speech/Images/.DS_Store

6 KB
Binary file not shown.

‎Text-to-speech/Images/dropdown.png

10.8 KB
Loading

‎Text-to-speech/Images/play.png

5 KB
Loading

‎Text-to-speech/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Text to speech-
2+
3+
A basic text to speech converter made using HTML, CSS and JS which features different voices!
4+
5+
Feel free to make any changes by pull request.}

‎Text-to-speech/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Text-to-speech</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="hero">
11+
<h1>Text to speech <span>converter</span></h1>
12+
<textarea placeholder="Write text here..."></textarea>
13+
<div class="row">
14+
<select></select>
15+
<button><img src="./Images/play.png" alt="Error">Listen</button>
16+
</div>
17+
</div>
18+
<script src="script.js"></script>
19+
</body>
20+
</html>

‎Text-to-speech/script.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
let speech = new SpeechSynthesisUtterance();
2+
let voices = [];
3+
let voiceSelect = document.querySelector("select");
4+
5+
window.speechSynthesis.onvoiceschanged = () => {
6+
voices = window.speechSynthesis.getVoices();
7+
speech.voice = voices[0];
8+
voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)));
9+
};
10+
11+
voiceSelect.addEventListener("change", () => {
12+
speech.voice = voices[voiceSelect.value];
13+
});
14+
15+
document.querySelector("button").addEventListener("click", () => {
16+
speech.text = document.querySelector("textarea").value;
17+
window.speechSynthesis.speak(speech);
18+
});

‎Text-to-speech/style.css

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
font-family: 'Poppins', sans-serif;
5+
box-sizing: border-box;
6+
}
7+
8+
.hero{
9+
width: 100%;
10+
min-height: 100vh;
11+
background: linear-gradient(270deg, #b8e663, #4831D4);
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
flex-direction: column;
16+
color: #fff;
17+
}
18+
19+
.hero h1{
20+
font-size: 45px;
21+
font-weight: 500;
22+
margin-top: -50px;
23+
margin-bottom: 50px;
24+
}
25+
26+
.hero h1 span{
27+
color: #b8e663;
28+
}
29+
30+
textarea{
31+
width: 600px;
32+
height: 250px;
33+
background: #403d84;
34+
color: #fff;
35+
font-size: 15px;
36+
border: 0;
37+
outline: 0;
38+
padding: 20px;
39+
border-radius: 10px;
40+
resize: none;
41+
margin-bottom: 30px;
42+
}
43+
44+
textarea::placeholder{
45+
font-size: 16px;
46+
color: #ddd;
47+
}
48+
49+
.row{
50+
width: 600px;
51+
display: flex;
52+
align-items: center;
53+
gap: 20px;
54+
}
55+
56+
button{
57+
background: #90dd02;
58+
color: black;
59+
font-size: 16px;
60+
padding: 10px 30px;
61+
border-radius: 35px;
62+
border: 0;
63+
outline: 0;
64+
cursor: pointer;
65+
display: flex;
66+
align-items: center;
67+
}
68+
69+
button img{
70+
width: 25px;
71+
margin-right: 10px;
72+
}
73+
74+
select{
75+
flex: 1;
76+
color: black;
77+
background: #90dd02;
78+
height: 50px;
79+
padding: 0 20px;
80+
outline: 0;
81+
border: 0;
82+
border-radius: 35px;
83+
appearance: none;
84+
background-image: url(./Images/dropdown.png);
85+
background-repeat: no-repeat;
86+
background-size: 15px;
87+
background-position-x:calc(100% - 20px);
88+
background-position-y:20px;
89+
}

0 commit comments

Comments
 (0)