Skip to content

Commit 70783f5

Browse files
nisha331nisha331
authored
Added text to speech converter
1 parent 6b8d6a5 commit 70783f5

File tree

3 files changed

+98
-0
lines changed

3 files changed

+98
-0
lines changed

‎text to speech/README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Welcome 🖐 to Text to Speech converter
2+
It a simple text to speech converter where you can write can listen to it..
3+
4+
5+
## 💻Tech Stack
6+
<br>
7+
8+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
9+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
10+
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
11+
12+
<br>
13+
14+
### How to get the game on your local machine:
15+
16+
---
17+
18+
- Download or clone the repository
19+
20+
```
21+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
22+
```
23+
24+
- Go to the directory
25+
- Run the index.html file
26+
- Write the text and then click on submit to listen to the audio.
27+
28+
<br>
29+
30+
### How to use
31+
1. Write the text which you want to listen in audio.
32+
33+
2. Click submit.
34+
35+
36+
## Happy Coding!

‎text to speech/index.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
body{
2+
background-color: rgb(212, 247, 235);
3+
}
4+
h1{
5+
font-weight: 900;
6+
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
7+
margin: 7% 36% 3%;
8+
}
9+
#txt{
10+
margin: 0% 27%;
11+
width: 600px;
12+
height: 350px;
13+
border: black;
14+
border-width: 6px;
15+
border-radius: 4px;
16+
}
17+
p{
18+
color: red;
19+
font-size: x-small;
20+
margin-left: 40%;
21+
margin-top: 1%;
22+
}
23+
.btn{
24+
background-color: #4CAF50; /* Green */
25+
border: none;
26+
border-radius: 10px;
27+
color: white;
28+
padding: 15px 32px;
29+
margin-top: 1%;
30+
margin-left: 43%;
31+
text-align: center;
32+
text-decoration: none;
33+
display: inline-block;
34+
font-size: 16px;
35+
36+
}

‎text to speech/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="index.css">
8+
<title>Text to speech</title>
9+
</head>
10+
<body>
11+
<script type="text/javascript" src="https://code.responsivevoice.org/responsivevoice.js"></script>
12+
<h1>
13+
Text to speech converter
14+
</h1>
15+
<textarea id="txt" name="text"></textarea>
16+
<br>
17+
<p>*Takes few second to process. Have patience</p>
18+
<input class="btn" type="button" onclick="textSpeak()" value="submit">
19+
<script>
20+
function textSpeak(){
21+
var text = document.getElementById("txt").value;
22+
responsiveVoice.speak(text);
23+
}
24+
</script>
25+
</body>
26+
</html>

0 commit comments

Comments
 (0)