Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 63e4310

Browse files
committed
New Project
1 parent 7d28ebd commit 63e4310

File tree

4 files changed

+164
-0
lines changed

4 files changed

+164
-0
lines changed

‎Text To Voice Converter/app.js

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

‎Text To Voice Converter/down-arrow.png

11.6 KB
Loading[フレーム]

‎Text To Voice Converter/index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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 Voice Converter</title>
7+
<link rel="stylesheet" href="style.css">
8+
<script src="https://kit.fontawesome.com/00806627b9.js" crossorigin="anonymous"></script>
9+
<script src="app.js" defer></script>
10+
</head>
11+
<body>
12+
<div class="hero">
13+
<h1>Text to Speech <span>Converter</span></h1>
14+
15+
<textarea name="" id="" placeholder="Write anything here..."></textarea>
16+
17+
<div class="row">
18+
<select name="" id=""></select>
19+
20+
<button><i class="fa-solid fa-play"></i>Listen</button>
21+
</div>
22+
</div>
23+
</body>
24+
</html>

‎Text To Voice Converter/style.css

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
list-style: none;
8+
text-decoration: none;
9+
color: #fff;
10+
font-family: "Poppins", sans-serif;
11+
}
12+
13+
html, body{
14+
height: 100%;
15+
width: 100%;
16+
}
17+
18+
.hero{
19+
width: 100%;
20+
height: 100vh;
21+
background: linear-gradient(45deg, #010758, #490d61);
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
flex-direction: column;
26+
color: #fff;
27+
}
28+
29+
.hero h1{
30+
text-align: center;
31+
font-size: clamp(1.7rem, 8vw, 3rem);
32+
font-weight: 500;
33+
margin-top: -50px;
34+
margin-bottom: 50px;
35+
}
36+
37+
.hero h1 span{
38+
color: #ff2963;
39+
text-decoration: underline white;
40+
text-underline-offset: .3em;
41+
}
42+
43+
textarea{
44+
width: 90%;
45+
max-width: 700px;
46+
height: 300px;
47+
background-color: #403d84;
48+
color: #fff;
49+
font-size: 18px;
50+
border: 0;
51+
outline: 0;
52+
padding: 20px;
53+
border-radius: 10px;
54+
resize: none;
55+
margin-bottom: 30px;
56+
}
57+
58+
textarea::placeholder{
59+
font-size: 19px;
60+
color: #ddd;
61+
}
62+
63+
.row{
64+
width: 90%;
65+
max-width: 600px;
66+
display: flex;
67+
align-items: center;
68+
gap: 20px;
69+
}
70+
71+
button{
72+
background: #ff2963;
73+
color: #fff;
74+
font-size: clamp(1rem, 5vw, 1.2rem);
75+
padding: 13px 35px;
76+
border-radius: 35px;
77+
border: 0;
78+
outline: 0;
79+
cursor: pointer;
80+
81+
}
82+
button:hover{
83+
background: #d82454;
84+
}
85+
86+
button i{
87+
font-size: clamp(1.2rem, 3vw, 1.5rem);
88+
margin-right: 10px;
89+
}
90+
91+
select{
92+
flex: 1;
93+
color: #fff;
94+
background: #403d84;
95+
height: 50px;
96+
padding: 0 20px;
97+
outline: 0;
98+
border: 0;
99+
border-radius: 35px;
100+
appearance: none;
101+
background-image: url(down-arrow.png);
102+
background-repeat: no-repeat;
103+
background-size: 19px;
104+
background-position-x: calc(100% - 20px);
105+
background-position-y: 20px;
106+
}
107+
108+
109+
110+
111+
@media screen and (max-width: 500px){
112+
.row{
113+
flex-direction: column;
114+
}
115+
select{
116+
width: 90%;
117+
min-height: 50px;
118+
}
119+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /