Skip to content

Commit 7701da0

Browse files
fullstackNRJfullstackNRJ
committed
day 26
1 parent 3df2610 commit 7701da0

File tree

4 files changed

+178
-1
lines changed

4 files changed

+178
-1
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,5 @@ Motivate yourself to code daily till 30 days, and see the magic!
4141
| [Day 22](./each%20day%20build%20day!/Day%2022/) | [Not to do list](./each%20day%20build%20day!/Day%2022/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2022/README.md/) |
4242
| [Day 23](./each%20day%20build%20day!/Day%2023/) | [Speedometer and Compass](./each%20day%20build%20day!/Day%2023/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2023/README.md/) |
4343
| [Day 24](./each%20day%20build%20day!/Day%2024/) | [Pointer Highlighter](./each%20day%20build%20day!/Day%2024/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2024/README.md/) |
44-
| [Day 25](./each%20day%20build%20day!/Day%2025/) | [Event bubbling, capture and once](./each%20day%20build%20day!/Day%2025/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2025/README.md/) |
44+
| [Day 25](./each%20day%20build%20day!/Day%2025/) | [Event bubbling, capture and once](./each%20day%20build%20day!/Day%2025/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2025/README.md/) |
45+
| [Day 26](./each%20day%20build%20day!/Day%2026/) | [Text to Speech](./each%20day%20build%20day!/Day%2026/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2026/README.md/) |

‎each day build day!/Day 26/README.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Text to speech
2+
3+
Medium.com has the option to `listen to the blog` which basically reads out the whole blog to you which is cool. Another, good example is google translate or dictionary which gives you the pronounciation of the typed words. Now, that may seem awefully complex but its not and fortunately all the modern browsers these days support text to speech synthesis. Thus, we could do something similar just by using vanilla JS.
4+
You can also change the voices, languages, playback speed and pitch of the voice. Checkout this <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis"> link</a> for more details.
5+
6+
7+
8+
# Challenges
9+
10+
- SpeechSynthesisUtterance api
11+
- form objects dropdown, options etc
12+
- CSS3 styles

‎each day build day!/Day 26/index.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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>Read it out loud 📢 </title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="voiceinator">
11+
12+
<h1>The Text Reader 🔈 </h1>
13+
14+
<select name="voice" id="voices">
15+
<option value="">Select A Voice/Language</option>
16+
</select>
17+
18+
<label for="rate">Rate:</label>
19+
<input name="rate" type="range" min="0" max="3" value="1" step="0.1">
20+
21+
<label for="pitch">Pitch:</label>
22+
23+
<input name="pitch" type="range" min="0" max="2" step="0.1">
24+
<textarea name="text">Hello world! I'm in love with JavaScript 💕 </textarea>
25+
<button id="stop">Stop!</button>
26+
<button id="speak">Speak</button>
27+
28+
</div>
29+
30+
<script>
31+
const msg = new SpeechSynthesisUtterance();
32+
let voices = [];
33+
const voicesDropdown = document.querySelector('[name="voice"]');
34+
const options = document.querySelectorAll('[type="range"], [name="text"]');
35+
const speakButton = document.querySelector('#speak');
36+
const stopButton = document.querySelector('#stop');
37+
msg.text = document.querySelector('[name="text"]').value;
38+
39+
function populateVoices() {
40+
voices = this.getVoices();
41+
voicesDropdown.innerHTML = voices
42+
//.filter(voice => voice.lang.includes('en'))
43+
.map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
44+
.join('');
45+
}
46+
47+
function setVoice() {
48+
msg.voice = voices.find(voice => voice.name === this.value);
49+
toggle();
50+
}
51+
52+
function toggle(startOver = true) {
53+
speechSynthesis.cancel();
54+
if (startOver) {
55+
speechSynthesis.speak(msg);
56+
}
57+
}
58+
59+
function setOption() {
60+
console.log(this.name, this.value);
61+
msg[this.name] = this.value;
62+
toggle();
63+
}
64+
65+
speechSynthesis.addEventListener('voiceschanged', populateVoices);
66+
voicesDropdown.addEventListener('change', setVoice);
67+
options.forEach(option => option.addEventListener('change', setOption));
68+
speakButton.addEventListener('click', toggle);
69+
stopButton.addEventListener('click', () => toggle(false));
70+
71+
</script>
72+
73+
</body>
74+
</html>

‎each day build day!/Day 26/style.css

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
html {
2+
font-size: 10px;
3+
box-sizing: border-box;
4+
}
5+
6+
*, *:before, *:after {
7+
box-sizing: inherit;
8+
}
9+
10+
body {
11+
margin: 0;
12+
padding: 0;
13+
font-family: sans-serif;
14+
background-color: #3BC1AC;
15+
display: flex;
16+
min-height: 100vh;
17+
align-items: center;
18+
19+
background-image:
20+
radial-gradient(circle at 100% 150%, #3BC1AC 24%, #42D2BB 25%, #42D2BB 28%, #3BC1AC 29%, #3BC1AC 36%, #42D2BB 36%, #42D2BB 40%, transparent 40%, transparent),
21+
radial-gradient(circle at 0 150%, #3BC1AC 24%, #42D2BB 25%, #42D2BB 28%, #3BC1AC 29%, #3BC1AC 36%, #42D2BB 36%, #42D2BB 40%, transparent 40%, transparent),
22+
radial-gradient(circle at 50% 100%, #42D2BB 10%, #3BC1AC 11%, #3BC1AC 23%, #42D2BB 24%, #42D2BB 30%, #3BC1AC 31%, #3BC1AC 43%, #42D2BB 44%, #42D2BB 50%, #3BC1AC 51%, #3BC1AC 63%, #42D2BB 64%, #42D2BB 71%, transparent 71%, transparent),
23+
radial-gradient(circle at 100% 50%, #42D2BB 5%, #3BC1AC 6%, #3BC1AC 15%, #42D2BB 16%, #42D2BB 20%, #3BC1AC 21%, #3BC1AC 30%, #42D2BB 31%, #42D2BB 35%, #3BC1AC 36%, #3BC1AC 45%, #42D2BB 46%, #42D2BB 49%, transparent 50%, transparent),
24+
radial-gradient(circle at 0 50%, #42D2BB 5%, #3BC1AC 6%, #3BC1AC 15%, #42D2BB 16%, #42D2BB 20%, #3BC1AC 21%, #3BC1AC 30%, #42D2BB 31%, #42D2BB 35%, #3BC1AC 36%, #3BC1AC 45%, #42D2BB 46%, #42D2BB 49%, transparent 50%, transparent);
25+
background-size:100px 50px;
26+
}
27+
28+
.voiceinator {
29+
padding: 2rem;
30+
width: 50rem;
31+
margin: 0 auto;
32+
border-radius: 1rem;
33+
position: relative;
34+
background: white;
35+
overflow: hidden;
36+
z-index: 1;
37+
box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
38+
}
39+
40+
h1 {
41+
width: calc(100% + 4rem);
42+
margin: -2rem 0 2rem -2rem;
43+
padding: .5rem;
44+
background: #0099ff;
45+
border-bottom: 5px solid #0099ff;
46+
text-align: center;
47+
font-size: 5rem;
48+
font-weight: 100;
49+
font-family: 'Pacifico', cursive;
50+
text-shadow: 3px 3px 0 #0099ff;
51+
}
52+
53+
.voiceinator input,
54+
.voiceinator button,
55+
.voiceinator select,
56+
.voiceinator textarea {
57+
width: 100%;
58+
display: block;
59+
margin: 10px 0;
60+
padding: 10px;
61+
border: 0;
62+
font-size: 2rem;
63+
background: #F7F7F7;
64+
outline: 0;
65+
}
66+
67+
textarea {
68+
height: 20rem;
69+
}
70+
71+
.voiceinator button {
72+
background: #0496f7;
73+
border: 0;
74+
width: 49%;
75+
float: left;
76+
font-family: 'Pacifico', cursive;
77+
margin-bottom: 0;
78+
font-size: 2rem;
79+
border-bottom: 5px solid #0895f3;
80+
cursor: pointer;
81+
position: relative;
82+
}
83+
84+
.voiceinator button:active {
85+
top: 2px;
86+
}
87+
88+
.voiceinator button:nth-of-type(1) {
89+
margin-right: 2%;
90+
}

0 commit comments

Comments
 (0)