-
Notifications
You must be signed in to change notification settings - Fork 0
/
speak.js
132 lines (108 loc) · 3.23 KB
/
speak.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
const SpeechRecognition = webkitSpeechRecognition;
const SpeechGrammarList = webkitSpeechGrammarList;
const SpeechRecognitionEvent = webkitSpeechRecognitionEvent;
const synthesis = window.speechSynthesis;
/**
* you can define your own grammar list
*/
// const colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ];
// const grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;';
const recognition = new SpeechRecognition();
const speechRecognitionList = new SpeechGrammarList();
var speakBtn = document.querySelector('#toggleBtn');
/**
* add grammars
* the second parameter is a weight value that specifies the importance of this grammar
* in relation of other grammars available in the list (can be from 0 to 1 inclusive.)
*/
// speechRecognitionList.addFromString(grammar, 1);
// recognition.grammars = speechRecognitionList;
window.onload = function(){
speakBtn.onclick = function(){
if(speakBtn.className.match('btn-large btn-floating cyan')) {
speakBtn.className = 'btn-large btn-floating red pulse';
start();
}
else {
speakBtn.className = 'btn-large btn-floating cyan';
stop();
}
};
};
/**
* other settings
*/
recognition.lang = 'en-US';
recognition.continuous = false;
recognition.interimResults = false;
recognition.maxAlternatives = 1;
/**
* event handlers
*/
recognition.onresult = (e) => {
const result = e.results[e.results.length - 1][0].transcript;
//console.log('result: ', result);
toaster('Result: ' + result);
updateResult(result);
}
recognition.onerror = (e) => {
toaster('Error: ' + e.error);
}
recognition.onend = () => {
toaster('Recognition ended.');
speakBtn.className = 'btn-large btn-floating cyan';
}
/**
* other functions
*/
function updateResult(result) {
document.getElementById('recognitionResult').focus();
if(result.length) {
document.querySelector('#recognitionResult').value = result;
talkBack(result)
} else {
talkBack("Not able to grasp what you are saying")
}
}
function talkBack(result){
setTimeout(function() {
const utter = new SpeechSynthesisUtterance(result);
// the list of all available voices
const voices = synthesis.getVoices();
utter.voice = voices[$('#voices').val()];
utter.volume = 1;
utter.rate = $('#rate').val() / 10;
utter.pitch = $('#pitch').val();
synthesis.speak(utter);
}, 1000);
}
function start() {
recognition.start();
toaster('Recognition started.');
}
function stop() {
recognition.stop();
toaster('Recognition stopped.');
}
function toaster(msg) {
Materialize.toast(msg, 2500);
}
$(function(){
if ('speechSynthesis' in window) {
speechSynthesis.onvoiceschanged = function() {
var $voicelist = $('#voices');
if($voicelist.find('option').length == 0) {
speechSynthesis.getVoices().forEach(function(voice, index) {
// console.toast(voice);
var $option = $('<option>')
.val(index)
.html(voice.name + (voice.default ? ' (default)' :''));
$voicelist.append($option);
});
$voicelist.material_select();
}
}
} else {
$('#modal1').openModal();
}
});