-
Notifications
You must be signed in to change notification settings - Fork 0
/
speechToText.html
156 lines (132 loc) · 5.55 KB
/
speechToText.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
<!DOCTYPE html>
<html>
<head>
<title>Web Speech API</title>
<style type="text/css">
h2 {
text-align: center;
color: #999;
}
#results {
height: 350px;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 0 10px 0 #bbb;
margin-bottom: 30px;
font-size: 14px;
line-height: 20px;
font-family: cursive;
}
button {
position: absolute;
top: 450px;
left: 47%;
width: 40px;
height: 40px;
font-size: 0;
background-color: red;
border: 0;
border-radius: 40px;
margin: 20px;
outline: none;
}
.notRecording {
background-color: darkred;
}
.Recording {
animation-name: pulse;
animation-duration: 1.45s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes pulse {
0% {
box-shadow: 0px 0px 10px 0px rgba(173, 0, 0, .3);
}
65% {
box-shadow: 0px 0px 5px 15px rgba(173, 0, 0, .3);
}
90% {
box-shadow: 0px 0px 5px 25px rgba(173, 0, 0, .3);
}
}
</style>
</head>
<body>
<h2 id="note">Press Button to begin recording your speech</h2>
<div id="results"></div>
<button id="record" onClick="startSpeechToText(); animateButton();"></button>
<script type="text/javascript">
/*******************************Web Speech API*******************************/
/******************************RESOURCES TO API******************************/
/*
* https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html
* https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
* Supported browsers -> http://caniuse.com/#feat=speech-recognition
*/
//Button animations
function dontAnimate() {
document.getElementById('record').classList.remove('Recording');
document.getElementById('record').classList.add('notRecording');
}
document.getElementById('record').classList.add('notRecording');
function animateButton() {
if (document.getElementById('record').classList.contains('notRecording')) {
document.getElementById('record').classList.remove('notRecording');
document.getElementById('record').classList.add('Recording');
} else {
dontAnimate();
}
};
//end of button animations
//Handle when a browser is not supported. FOR SUPPORTED BROWSERS GO TO: http://caniuse.com/#feat=speech-recognition
function upgrade() {
document.getElementById('note').innerHTML = 'Please upgrade to' + "<a href = 'https://www.google.com/chrome/browser/desktop/index.html' style='text-decoration:none'>" + ' Google Chrome ' + "</a>" +
', Web Speech API is not supported by your browser';
}
function startSpeechToText() {
var result = document.getElementById('results');
//Check if browser is supported with API
if (('webkitSpeechRecognition' in window)) {
//instantiate the SpeechRecognition Interface from API
var speechRecognize = new webkitSpeechRecognition();
//Change the attributes of the SpeechRecognition Interface
speechRecognize.continuous = true; //enables user to record even after long pause
speechRecognize.interimResults = true; //display interim results
speechRecognize.lang = 'en-US'; // Format:'language-ACCENT'. en = English Language, US = United States accent.
speechRecognize.start(); //begin recognition
document.getElementById('note').innerHTML = 'Press q to stop recording';
var final_transcript = '';
//Initialize results handler
speechRecognize.onresult = function(event) {
var interim_transcript = '';
//Loop to get final and interim results
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
result.innerHTML = final_transcript + '<span style="color:#999">' + interim_transcript + '</span>';
};
//Function to stop speech Recognition when key is pressed
document.onkeypress = function(e) {
if (e.key === "q") {
speechRecognize.stop();
document.getElementById('note').innerHTML = 'Press button to begin recording your speech';
dontAnimate();
}
}
//when there is an error in recognition
speechRecognize.onerror = function(event) {
console.error(event.error);
};
} else {
document.getElementById('record').style.visibility = 'hidden';
upgrade();
}
}
</script>
</body>
</html>