-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathspeech.html
137 lines (117 loc) · 4.85 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
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
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="title" content="Web Speech API">
<meta name="description" content="API to synthesize speech from our browser.">
<meta name="image" content="">
<meta name="site" content="">
<link type="text/css" rel="stylesheet" href="./css/fonts.css" />
<link type="text/css" rel="stylesheet" href="./css/style.css" />
<title>Web APIs Speech Example</title>
<style>
</style>
<body>
<header>
<div class="header-bars" onclick="toggleNav('.aside-navbar')"><span class="header-bar fa-bars"></span></div>
<div class="title-bar"><h2>Web APIs</h2></div>
<div class="navbar">
<ul class="navbar-nav">
<li class="navbar-nav-item">
<a onclick="toggle('.dropdown')">More APIs</a>
<ul class="dropdown close">
<li class="dropdown-item"><a>History API</a></li>
<li class="dropdown-item"><a>Vibration API</a></li>
<li class="dropdown-item"><a>Fullscreen API</a></li>
<li class="dropdown-item"><a href="./index.html">More ...</a></li>
</ul>
</li>
</ul>
</div>
</header>
<aside class="aside-sidebar" id="leftAside">
<div class="aside-sidebar-header">
<h3>Web APIs Menu</h3></div>
<ul>
<li><a href="./bluetooth.html">Bluetooth API</a></li>
<li><a href="./touch.html">Touch API</a></li>
<li><a href="./battery.html">Battery API</a></li>
<li><a href="./clipboard.html">Clipboard API</a></li>
<li><a href="./audio.html">Web Audio API</a></li>
<li><a href="./broadcastchannel.html">Broadcastchannel Messaging API</a></li>
<li><a href="./channelmessaging.html">Channel Messaging API</a></li>
<li><a href="./fullscreen.html">Fullscreen API</a></li>
<li><a href="./history.html">History API</a></li>
<li><a href="./vibration.html">Vibration API</a></li>
<li><a href="./url.html">URL API</a></li>
<li><a class="aside-sidebar-active" href="./speech.html">Web Speech API</a></li>
<li><a href="./resizeobserver.html">Resize Observer API</a></li>
<li><a href="./pointerlock.html">Pointer Lock API</a></li>
<li><a href="./paymentrequest.html">Payment Request API</a></li>
<li><a href="./pagevisibility.html">Page Visibility API</a></li>
</ul>
</aside>
<div class="container">
<div class="web-api-cnt">
<div id="error" class="close"></div>
<div class="web-api-card">
<div class="web-api-card-head">
Demo - Text to Speech
</div>
<div class="web-api-card-body">
<div class="input-control">
<input class="input-bg" placeholder="Enter text here" type="text" id="textToSpeech" />
</div>
<div>
<button onclick="speak()">Tap to Speak</button>
</div>
</div>
</div>
<div class="web-api-card">
<div class="web-api-card-head">
Demo - Speech to Text
</div>
<div class="web-api-card-body">
<div class="input-control">
<textarea class="input-bg" placeholder="Text will appear here when you start speeaking." id="speechToText"></textarea>
</div>
<div>
<button onclick="tapToSpeak()">Tap and Speak into Mic</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="./js/script.js"></script>
<script>
const l =console.log
try {
var speech = new SpeechSynthesisUtterance()
var SpeechRecognition = SpeechRecognition;
var recognition = new SpeechRecognition()
} catch(e) {
l(e)
error.innerHTML = "Web Speech API not supported in this device."
error.classList.remove("close")
}
function speak() {
speech.text = textToSpeech.value
speech.volume = 1
speech.rate=1
speech.pitch=1
window.speechSynthesis.speak(speech)
}
function tapToSpeak() {
recognition.onstart = function() { }
recognition.onresult = function(event) {
const curr = event.resultIndex
const transcript = event.results[curr][0].transcript
speechToText.value = transcript
}
recognition.onerror = function(ev) {
console.error(ev)
}
recognition.start()
}
</script>
</html>