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 2cd4d4f

Browse files
Day 23 - Speech Synthesis
1 parent e20d50f commit 2cd4d4f

File tree

6 files changed

+175
-2
lines changed

6 files changed

+175
-2
lines changed

‎23_day/index.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>23 Day</title>
7+
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
8+
<link rel="stylesheet" href="main.css">
9+
</head>
10+
11+
<body>
12+
13+
<div class="voiceinator">
14+
<h1>The Voice</h1>
15+
16+
<select name="voice" id="voices">
17+
<option value="">Select A Voice</option>
18+
</select>
19+
20+
<label for="rate">Rate:</label>
21+
<input name="rate" type="range" min="0" max="3" value="1" step="0.1">
22+
23+
<label for="pitch">Pitch:</label>
24+
25+
<input name="pitch" type="range" min="0" max="2" step="0.1">
26+
<textarea name="text">Hello! I love JavaScript 👍</textarea>
27+
<button id="stop">Stop!</button>
28+
<button id="speak">Speak</button>
29+
30+
</div>
31+
<script type="text/javascript" src="main.js">
32+
</script>
33+
34+
</body>
35+
36+
</html>

‎23_day/main.css

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
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+
padding: 0;
12+
font-family: sans-serif;
13+
background: url('https://picsum.photos/1500/1000/?random') center no-repeat;
14+
}
15+
16+
.voiceinator {
17+
padding: 2rem;
18+
width: 50rem;
19+
margin: 0 auto;
20+
border-radius: 1rem;
21+
position: relative;
22+
background: white;
23+
overflow: hidden;
24+
z-index: 1;
25+
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
26+
}
27+
28+
h1 {
29+
width: calc(100% + 4rem);
30+
margin: 0;
31+
margin-left: -2rem;
32+
margin-top: -2rem;
33+
margin-bottom: 2rem;
34+
padding: .5rem;
35+
background: #ffc600;
36+
border-bottom: 5px solid #F3C010;
37+
text-align: center;
38+
font-size: 5rem;
39+
font-weight: 100;
40+
font-family: 'Pacifico', cursive;
41+
text-shadow: 3px 3px 0 #F3C010;
42+
}
43+
44+
.voiceinator input, .voiceinator button, .voiceinator select, .voiceinator textarea {
45+
width: 100%;
46+
display: block;
47+
margin: 10px 0;
48+
padding: 10px;
49+
border: 0;
50+
font-size: 2rem;
51+
background: #F7F7F7;
52+
outline: 0;
53+
}
54+
55+
textarea {
56+
height: 20rem;
57+
}
58+
59+
input[type="select"] {}
60+
61+
.voiceinator button {
62+
background: #ffc600;
63+
border: 0;
64+
width: 49%;
65+
float: left;
66+
font-family: 'Pacifico', cursive;
67+
margin-bottom: 0;
68+
font-size: 2rem;
69+
border-bottom: 5px solid #F3C010;
70+
cursor: pointer;
71+
position: relative;
72+
}
73+
74+
.voiceinator button:active {
75+
top: 2px;
76+
}
77+
78+
.voiceinator button:nth-of-type(1) {
79+
margin-right: 2%;
80+
}

‎23_day/main.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const msg = new SpeechSynthesisUtterance();
2+
let voices = [];
3+
const voicesDropdown = document.querySelector('[name="voice"]');
4+
const options = document.querySelectorAll('[type="range"], [name="text"]');
5+
const speakButton = document.querySelector('#speak');
6+
const stopButton = document.querySelector('#stop');
7+
msg.text = document.querySelector('[name="text"]').value;
8+
9+
function populateVoices(filterLang = true) {
10+
voices = this.getVoices();
11+
voicesDropdown.innerHTML = voices.filter(voice => voice.lang.includes('en')).map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`).join('');
12+
}
13+
14+
function setVoice() {
15+
msg.voice = voices.find(voice => voice.name === this.value);
16+
toggle();
17+
}
18+
19+
function toggle(startOver = true) {
20+
speechSynthesis.cancel();
21+
if (startOver) {
22+
speechSynthesis.speak(msg);
23+
}
24+
}
25+
26+
function setOption() {
27+
console.log(this.name, this.value);
28+
msg[this.name] = this.value;
29+
toggle();
30+
}
31+
32+
speechSynthesis.addEventListener('voiceschanged', populateVoices);
33+
voicesDropdown.addEventListener('change', setVoice);
34+
options.forEach(option => option.addEventListener('change', setOption));
35+
speakButton.addEventListener('click', toggle);
36+
stopButton.addEventListener('click', () => toggle(false));

‎23_day/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "gum",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "scripts.js",
6+
"scripts": {
7+
"start" : "browser-sync start --directory --server --files '*.css, *.html, *.js'"
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"devDependencies": {
12+
"browser-sync": "^2.12.5"
13+
}
14+
}

‎README.md

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,15 +118,21 @@ Learned more about `Array.prototype.reduce()` and its usability test case scenar
118118
**Tools/Sites Found:**
119119

120120
- New, interactive Chrome Dev Tools tutorial: [How to analyze page load performance ⚡️🚀🔎](https://developers.google.com/web/tools/chrome-devtools/network-performance/)
121-
### Day 19: 6 Jul 2018
122-
It was too much fun today. Learned a lot about canvas and pipelining real-time images.
121+
### Day 19: 6 Jul 2018
122+
It was too much fun today. Learned a lot about canvas and pipelining real-time images.
123123

124124
### Day 20: 7 Jul 2018
125125

126126
Learned about native [SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition) interface of the Web Speech API and how we can make use of it. Something like we do in google voice search. I think we can use it in various ways. Only limit is our imagination. Also liked the use npm [browser-sync](https://browsersync.io/) for time-saving synchronised browser testing.
127127

128128
### Day 21: 8 Jul 2018
129+
129130
Worked on Device Orientation using Chrome sensors devtools. Also learned about Geolocation & Orientation Api. Unlike desktops, mobile devices commonly use GPS hardware to detect location.
130131

131132
### Day 22: 9 Jul 2018
133+
132134
Learned about `Element.getBoundingClientRect()` method and worked on some css effects.
135+
136+
### Day 23: 10 Jul 2018
137+
138+
"The Voiceinator 5000" challenge was great. Also, learned about SpeechSynthesis interface.

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
<a class="active" href="./20_day/index.html">20 Day</a>
3232
<a class="active" href="./21_day/index.html">21 Day</a>
3333
<a class="active" href="./22_day/index.html">22 Day</a>
34+
<a class="active" href="./23_day/index.html">23 Day</a>
3435
</div>
3536
</body>
3637

0 commit comments

Comments
(0)

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