Skip to content

Commit ca15d7e

Browse files
harshita2216harshita2216
authored
Merge pull request #257 from nisha331/conflict-in-index
Text to speech converter
2 parents f077b2e + f2e3a49 commit ca15d7e

File tree

4 files changed

+103
-0
lines changed

4 files changed

+103
-0
lines changed

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@
9494
| [Weight Converter](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Weight%20Converter) | A simple web page where user can convert weight from kilograms to grams, ounces or pounds.
9595
| [Live Clock](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Live%20Clock) | A simple web page made in react native which shows live time.
9696
| [DRUM(darkmode)](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/DRUM(darkmode) |This web app allows you to make your own music with all the beats that are present in the app. You can click on the alphabets or the images that are present on the screen and enjoy the beats. You can also use your keyboard keys to make the music.|
97+
| [Text to speech converter](https://github.com/nisha331/Web-dev-mini-projects/tree/main/text%20to%20speech) | A simple webapp that converts text to speech
9798
| [Basic portfolio website](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Basic%20Portfolio%20Website)| This is a basic Portfolio website which you can use to showcase your own projects and experience.|
9899
| [Classroom Website](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/CLASSROOM%20SCHEDULER%20WEBSITE)| This project is helpful to students managing their classes, the student can schedule their batch and its timing here.|
99100
| [Covid 19 Awareness](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Covid%2019%20Awarness%20Website)| This is a covid 19 website which has diffrenet sections.This is made using only html,css,javascript. You can find various Informations and news.|

‎text to speech/README.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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+
2. Click submit.
33+
34+
The web app looks some how like this:
35+
![txt to speech](https://user-images.githubusercontent.com/76838660/126274006-189a20c0-9176-4d71-9224-5f6e6a82e11e.PNG)
36+
37+
38+
39+
40+
## 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)