-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
174 lines (150 loc) · 5.96 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Speech Recognition</title>
<link rel="stylesheet" href="style.css">
<link rel = "icon" href =
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"
type = "image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
<!-- load font awesome here for icon used on the page -->
</head>
<body>
<main>
<header class="searchForm-container">
<a href="index.html" >
<img src="https://image.ibb.co/e6vOFQ/wikipedia.png" alt="Wikipedia Logo"></a>
<form class="searchForm">
<input type="search" placeholder="Хайх" class="searchForm-input" id="inpt">
<button type="submit" class="icon searchIcon" >
<img src="https://image.ibb.co/cpG8zk/search.png" alt="Magnifying Glass Icon">
</button>
<a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" rel="noopener" class="icon randomIcon">
<img src="https://image.ibb.co/fR5OX5/random.png" alt="Shuffle Icon">
</a>
<i class="fa fa-microphone"></i>
</form>
<a href="https://tergeltengis.wordpress.com/" >
<img alt="Блог" src="wordpress.png" width="170" height="100">
</a>
</header>
<section class="searchResults"></section>
</main>
<audio class="sound2" src="search.wav"></audio>
<audio class="sound" src="mic.wav"></audio>
<!-- sound to be played when we click icon => http://soundbible.com/1598-Electronic-Chime.html -->
<!-- link to index.js script -->
<script type="text/javascript">
window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
const synth = window.speechSynthesis;
const recognition = new SpeechRecognition();
const icon = document.querySelector('i.fa.fa-microphone');
var inpt = document.getElementById('inpt');
const sound = document.querySelector('.sound');
const sound2 = document.querySelector('.sound2');
icon.addEventListener('click', () => {
sound.play();
dictate();
});
const dictate = () => {
recognition.start();
recognition.onresult = (event) => {
const speechToText = event.results[0][0].transcript;
inpt.value=speechToText;
if (event.results[0].isFinal) {
if (speechToText.includes('what is the time')) {
speak(getTime);
};
if (speechToText.includes('what is today\'s date')) {
speak(getDate);
};
if (speechToText.includes('what is the weather in')) {
getTheWeather(speechToText);
};
if (speechToText.includes('who is Mongolian president')) {
var msg = new SpeechSynthesisUtterance('Haltmaa Battulga');
window.speechSynthesis.speak(msg);
};
}
}
}
const speak = (action) => {
utterThis = new SpeechSynthesisUtterance(action());
synth.speak(utterThis);
};
const getTime = () => {
const time = new Date(Date.now());
return `the time is ${time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })}`
};
const getDate = () => {
const time = new Date(Date.now())
return `today is ${time.toLocaleDateString()}`;
};
const getTheWeather = (speech) => {
fetch(`http://api.openweathermap.org/data/2.5/weather?q=${speech.split(' ')[5]}&appid=58b6f7c78582bffab3936dac99c31b25&units=metric`)
.then(function(response){
return response.json();
})
.then(function(weather){
if (weather.cod === '404') {
utterThis = new SpeechSynthesisUtterance(`I cannot find the weather for ${speech.split(' ')[5]}`);
synth.speak(utterThis);
return;
}
utterThis = new SpeechSynthesisUtterance(`the weather condition in ${weather.name} is mostly full of ${weather.weather[0].description} at a temperature of ${weather.main.temp} degrees Celcius`);
synth.speak(utterThis);
});
};
function handleSubmit(event) {
// prevent page from reloading when form is submitted
event.preventDefault();
// get the value of the input field
const input = document.querySelector('.searchForm-input').value;
// remove whitespace from the input
const searchQuery = input.trim();
// call `fetchResults` and pass it the `searchQuery`
fetchResults(searchQuery);
}
function fetchResults(searchQuery) {
const endpoint = `https://en.wikipedia.org/w/api.php?action=query&list=search&prop=info&inprop=url&utf8=&format=json&origin=*&srlimit=20&srsearch=${searchQuery}`;
fetch(endpoint)
.then(response => response.json())
.then(data => {
const results = data.query.search;
displayResults(results);
})
.catch(() => console.log('An error occurred'));
}
const icon1 = document.querySelector('.icon');
icon1.addEventListener('click', () => {
sound2.play();
dictate();
});
function displayResults(results) {
// Store a reference to `.searchResults`
const searchResults = document.querySelector('.searchResults');
// Remove all child elements
searchResults.innerHTML = '';
// Loop over results array
results.forEach(result => {
const url = encodeURI(`https://en.wikipedia.org/wiki/${result.title}`);
searchResults.insertAdjacentHTML('beforeend',
`<div class="resultItem">
<h3 class="resultItem-title">
<a href="${url}" target="_blank" rel="noopener">${result.title}</a>
</h3>
<span class="resultItem-snippet">${result.snippet}</span><br>
<a href="${url}" class="resultItem-link" target="_blank" rel="noopener">${url}</a>
</div>`
);
});
}
const form = document.querySelector('.searchForm');
form.addEventListener('submit', handleSubmit);
</script>
</body>
</html>