-
Notifications
You must be signed in to change notification settings - Fork 2
/
main.js
156 lines (139 loc) · 3.77 KB
/
main.js
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
const textBox = document.getElementById('textBox');
const errMsg = 'Sorry.. Google Speech API is only supported by Chrome';
const parser = new UAParser();
// check browser support
if (parser.getBrowser().name != 'Chrome') {
alert('Incompatible Browser...');
for (const cssID of [
'loading-icon',
'lang-div',
'shortcut-label',
'toggleBut',
]) {
document.getElementById(cssID).style.visibility = 'hidden';
}
setTimeout(() => {
textBox.innerText = errMsg;
textBox.style.color = 'white';
}, 1000);
}
// PWA
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js').then(() => {});
}
const langs = [
['Afrikaans', 'af-ZA'],
['Bahasa Indonesia', 'id-ID'],
['Bahasa Melayu', 'ms-MY'],
['Català', 'ca-ES'],
['Čeština', 'cs-CZ'],
['Deutsch', 'de-DE'],
['English(UK)', 'en-GB'],
['English(US)', 'en-US'],
['Español', 'es-ES'],
['Ελληνικά', 'el-GR'],
['Euskara', 'eu-ES'],
['Français', 'fr-FR'],
['Galego', 'gl-ES'],
['Hrvatski', 'hr_HR'],
['IsiZulu', 'zu-ZA'],
['Íslenska', 'is-IS'],
['Italiano', 'it-IT'],
['Magyar', 'hu-HU'],
['Nederlands', 'nl-NL'],
['Norsk bokmål', 'nb-NO'],
['Polski', 'pl-PL'],
['Português', 'pt-PT'],
['Română', 'ro-RO'],
['Slovenčina', 'sk-SK'],
['Suomi', 'fi-FI'],
['Svenska', 'sv-SE'],
['Türkçe', 'tr-TR'],
['български', 'bg-BG'],
['Pусский', 'ru-RU'],
['Српски', 'sr-RS'],
['한국어', 'ko-KR'],
['日本語', 'ja-JP'],
['中文 (台灣)', 'cmn-Hant-TW'],
['粵語 (香港)', 'yue-Hant-HK'],
['普通话', 'cmn-Hans-CN'],
['العربية', 'ar-SA'],
];
const colorDim = '#9a9a9a';
const alertStr = `Caution: microphone permission required.
Please click on the red cross in address bar to allow it.`;
const recognizingStr = 'recognizing...';
localStorage.getItem('lang') || localStorage.setItem('lang', 'en-US');
const langSelect = document.getElementById('lang-select');
const toggleBut = document.getElementById('toggleBut');
const loadingIcon = document.getElementById('loading-icon');
langSelect.onchange = changeLang;
toggleBut.onclick = detect_mic_and_recognize;
loadingIcon.hidden = true;
let recognizing = false;
const recog = new webkitSpeechRecognition();
recog.continuous = true;
recog.interimResults = true;
recog.lang = localStorage.getItem('lang');
function detect_mic_and_recognize() {
navigator.mediaDevices
.getUserMedia({ audio: true })
.then(recognize)
.catch(() => {
alert(alertStr);
});
}
function recognize() {
if (recognizing) {
recog.stop();
} else {
textBox.innerHTML = '';
recog.start();
}
}
function changeLang(e) {
let lang = e.target.value;
e.target.blur();
recognizing && recog.stop();
localStorage.setItem('lang', lang);
recog.lang = lang;
}
recog.onstart = () => {
// console.log('on start');
textBox.innerHTML = '';
recognizing = true;
toggleBut.value = 'stop';
textBox.style.color = colorDim;
textBox.innerText = recognizingStr;
loadingIcon.hidden = false;
};
recog.onend = () => {
// console.log('on end');
recognizing = false;
toggleBut.value = 'start';
loadingIcon.hidden = true;
if (textBox.innerText == recognizingStr) {
textBox.style.color = colorDim;
textBox.innerText = 'idle';
}
};
recog.onresult = (e) => {
let idx = e.resultIndex;
let result = e.results[idx];
let pos = result.length - 1;
let txt = result[pos].transcript;
textBox.style.color = colorDim;
textBox.innerHTML = txt;
if (result.isFinal) {
navigator.clipboard.writeText(txt);
textBox.style.color = 'white';
}
};
document.getElementsByTagName('body')[0].oncopy = () =>
navigator.clipboard.writeText(textBox.innerText);
document.onkeyup = (e) => {
if (e.code === 'Space') {
recognize();
}
};
window.onload = () => recognize();