-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
338 lines (303 loc) · 11.6 KB
/
index.html
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Existing head content -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Compare "Hili" and "Hily"</title>
<!-- Added link to Google Fonts and updated styles -->
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<style>
/* Updated Styles */
body {
font-family: 'Quicksand', sans-serif;
margin: 0;
padding: 0;
background: url('baby.jpg') no-repeat center center fixed;
background-size: cover;
color: #333;
overflow-x: hidden;
}
/* Overlay to dim the background image */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
pointer-events: none;
}
/* Header Styling */
header {
background-color: rgba(108, 99, 255, 0.9);
color: white;
padding: 20px 0;
text-align: center;
position: relative;
z-index: 1;
}
h1 {
margin: 0;
font-size: 36px;
}
/* Container Styling */
.container {
width: 90%;
max-width: 800px;
margin: 30px auto;
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 1;
}
/* Form Elements Styling */
select, button, input, textarea {
font-size: 16px;
padding: 12px;
margin: 10px 0;
border-radius: 30px;
border: none;
width: 100%;
box-sizing: border-box;
background-color: #f1f1f1;
transition: background-color 0.3s;
}
select:focus, input:focus, textarea:focus {
background-color: #e0e0e0;
outline: none;
}
label {
font-weight: bold;
margin-top: 10px;
display: block;
}
.controls {
margin-bottom: 15px;
}
/* Buttons Styling */
.buttons {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
button {
width: 45%;
background-color: #6C63FF;
color: white;
border: none;
cursor: pointer;
padding: 15px;
margin: 10px 0;
border-radius: 30px;
font-size: 16px;
transition: background-color 0.3s, transform 0.3s;
}
button:hover {
background-color: #574b90;
transform: translateY(-3px);
}
/* Restore Defaults Button */
.restore-button {
background-color: #ff9900;
}
.restore-button:hover {
background-color: #cc7a00;
}
/* Footer Styling */
footer {
text-align: center;
padding: 15px;
background-color: rgba(108, 99, 255, 0.9);
color: white;
position: relative;
bottom: 0;
width: 100%;
z-index: 1;
}
/* Music Controls */
.music-controls {
text-align: center;
margin-top: 20px;
}
.music-controls button {
width: auto;
margin: 5px;
background-color: #6C63FF;
border-radius: 50%;
width: 50px;
height: 50px;
padding: 0;
font-size: 24px;
line-height: 50px;
}
.music-controls button:hover {
background-color: #574b90;
}
/* Responsive Design */
@media (max-width: 600px) {
h1 {
font-size: 28px;
}
.buttons button {
width: 100%;
margin-bottom: 10px;
}
}
</style>
<script>
let voices = [];
function populateVoiceList() {
const synth = window.speechSynthesis;
voices = synth.getVoices().sort((a, b) => a.name.localeCompare(b.name));
if (!voices.length) {
// Voices not yet loaded, try again shortly.
setTimeout(populateVoiceList, 100);
return;
}
const voiceSelect = document.getElementById('voiceSelect');
voiceSelect.innerHTML = ''; // Clear previous options
// Filter voices to include only 'en' and 'uk', excluding Russian and Google US English voices
const preferredLanguages = ['en', 'uk'];
const filteredVoices = voices.filter(voice => {
return preferredLanguages.some(lang => voice.lang.startsWith(lang)) &&
!(voice.lang === 'en-US' && voice.name.includes('Google'));
});
filteredVoices.forEach((voice) => {
const option = document.createElement('option');
option.textContent = `${voice.name} (${voice.lang})${voice.default ? ' — DEFAULT' : ''}`;
option.value = voices.indexOf(voice); // Use the original index
voiceSelect.appendChild(option);
});
}
// Call populateVoiceList() immediately
populateVoiceList();
// Also add an event listener for voiceschanged event
if (typeof speechSynthesis !== 'undefined' && speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}
function synthesize(text) {
const synth = window.speechSynthesis;
if (synth.speaking) {
synth.cancel();
}
const utterThis = new SpeechSynthesisUtterance(text);
// Get selected voice and options
const selectedVoiceIndex = document.getElementById('voiceSelect').value;
utterThis.voice = voices[selectedVoiceIndex];
utterThis.rate = parseFloat(document.getElementById('rate').value);
utterThis.pitch = parseFloat(document.getElementById('pitch').value);
utterThis.volume = parseFloat(document.getElementById('volume').value);
synth.speak(utterThis);
}
function stopSpeech() {
const synth = window.speechSynthesis;
if (synth.speaking) {
synth.cancel();
}
}
// Restore default settings
function restoreDefaults() {
document.getElementById('rate').value = 1;
document.getElementById('pitch').value = 1;
document.getElementById('volume').value = 1;
document.querySelector('#rate + output').value = 1;
document.querySelector('#pitch + output').value = 1;
document.querySelector('#volume + output').value = 1;
}
// Background music control
let musicPlaying = false;
let music = new Audio('background-music.mp3'); // Replace with your audio file name or URL
music.loop = true;
function toggleMusic() {
if (!musicPlaying) {
music.play();
musicPlaying = true;
document.getElementById('musicButton').innerText = '⏸️';
} else {
music.pause();
musicPlaying = false;
document.getElementById('musicButton').innerText = '▶️';
}
}
</script>
</head>
<body>
<header>
<h1>Compare "Hili" and "Hily"</h1>
</header>
<div class="container">
<p style="text-align: center; font-size: 18px; margin-bottom: 20px;">
חברים פשוט תבחרו ותבדקו מה נשמע לכם טוב יותר
</p>
<!-- Voice Selection -->
<div class="controls">
<label for="voiceSelect">Choose a voice:</label>
<select id="voiceSelect"></select>
</div>
<!-- Speech Rate -->
<div class="controls">
<label for="rate">Rate (0.5 - 2):</label>
<input type="range" id="rate" value="1" step="0.1" min="0.5" max="2" oninput="this.nextElementSibling.value = this.value">
<output>1</output>
</div>
<!-- Speech Pitch -->
<div class="controls">
<label for="pitch">Pitch (0 - 2):</label>
<input type="range" id="pitch" value="1" step="0.1" min="0" max="2" oninput="this.nextElementSibling.value = this.value">
<output>1</output>
</div>
<!-- Speech Volume -->
<div class="controls">
<label for="volume">Volume (0 - 1):</label>
<input type="range" id="volume" value="1" step="0.1" min="0" max="1" oninput="this.nextElementSibling.value = this.value">
<output>1</output>
</div>
<!-- Restore Defaults Button -->
<div class="controls" style="text-align: center; margin-top: 10px;">
<button class="restore-button" onclick="restoreDefaults()">Restore Defaults</button>
</div>
<!-- Sentence Selection for "Hili" -->
<div class="controls">
<label for="sentenceHili">Choose a sentence for "Hili":</label>
<select id="sentenceHili" class="sentence-select">
<option>When you say Hili, it feels soft and melodic.</option>
<option>Hili enjoys reading books by the lake.</option>
<option>Everyone smiles when Hili walks into the room.</option>
<option>Hili's laughter is the sweetest sound.</option>
<option>The name Hili brings peace and serenity.</option>
</select>
</div>
<!-- Sentence Selection for "Hily" -->
<div class="controls">
<label for="sentenceHily">Choose a sentence for "Hily":</label>
<select id="sentenceHily" class="sentence-select">
<option>When you say Hily, it sounds cheerful and bright.</option>
<option>Hily loves to dance in the rain.</option>
<option>Friends adore spending time with Hily.</option>
<option>Hily's energy lights up every place she goes.</option>
<option>The name Hily is full of joy and excitement.</option>
</select>
</div>
<!-- Action Buttons -->
<div class="buttons">
<button onclick="synthesize(document.getElementById('sentenceHili').value)">Speak "Hili"</button>
<button onclick="synthesize(document.getElementById('sentenceHily').value)">Speak "Hily"</button>
</div>
<!-- Stop Button -->
<div class="controls" style="text-align: center; margin-top: 10px;">
<button onclick="stopSpeech()" style="width: 50%; background-color: #ff4d4d;">Stop Speaking</button>
</div>
<!-- Music Controls -->
<div class="music-controls">
<button id="musicButton" onclick="toggleMusic()">▶️</button>
</div>
</div>
<footer>
<p>Made with ❤️ for Roni and Michal</p>
</footer>
</body>
</html>