-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathspeech.html
48 lines (47 loc) · 2.14 KB
/
speech.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/speech.css">
<title>Web Speech API</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<div class="container" style="width: 400px;margin: 20px">
<h3 class="center" id="headline" style="text-align: center">
<a href="#">Voice Command Interface</a>
</h3>
<div id="info" style="text-align: center;color:red">
<p id="info_start">Click on the microphone icon and begin speaking.</p>
<p id="info_speak_now">Speak now.</p>
<p id="info_no_speech">No speech was detected. You may need to adjust your
<a href="#">microphone settings</a>.</p>
<p id="info_no_microphone" style="display:none">
No microphone was found. Ensure that a microphone is installed and that
<a href="#">microphone settings</a> are configured correctly.
</p>
<p id="info_allow">Click the "Allow" button above to enable your microphone.</p>
<p id="info_denied">Permission to use microphone was denied.</p>
<p id="info_blocked">Permission to use microphone is blocked.</p>
<p id="info_upgrade">Web Speech API is not supported by this browser.
Upgrade to <a href="#">Chrome</a> version 25 or later.
</p>
</div>
<div class="right" style="text-align: center; margin: 25px">
<button id="start_button">
<span style="font-size: 3em; color: Tomato;">
<i id="start_img" class="fas fa-microphone"></i>
</span>
</button>
</div>
<div id="results">
<span id="final_span" class="final"></span>
<span id="interim_span" class="interim"></span>
</div>
</div>
<script src="js/speech.js"></script>
</body>
</html>