/
artyomoriginal.html
140 lines (140 loc) · 4.7 KB
/
artyomoriginal.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Our Code World">
<title>Hello artyom.js</title>
<!-- Don't forget to add artyom to your document in the head tag-->
<script src="./artyom.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div>
<h4>Use
<b>ctrl+u</b>
or
<b>right click > inspect element</b>
to see the source code of this page.</h4>
<input type="button" onclick="startArtyom()" value="Start voice commands"/><br><br>
<input type="button" onclick="stopArtyom()" value="Stop listening"/><br>
<span id="output" style="font-size:20px;color:red;"></span><br>
<span id="time" style="font-size:35px;color:green;"></span><br>
<span style="color:blue;">The loaded commands are :
</span><br>
<div id="commands-list"></div>
<textarea id="text-content"></textarea>
<input id="talk-lang" type="button" value="Synthesize "/>
<select id="select-voice"></select>
<input id="load-voices" type="button" value="Load voices"/>
<div id="voices-item"></div>
</div>
<script>
$("#talk-lang").click(function () {
artyom.say($("#text-content").val());
});
$("#select-voice").change(function () {
var lang = $(this).val();
artyom.initialize({lang: lang});
});
document.getElementById("load-voices").addEventListener("click", function () {
var voices = artyom.getVoices();
var html = "";
voices.forEach(function (voice) {
html += "Voz name : " + voice.name + " con lang : " + voice.lang + "<br>";
});
document.getElementById("voices-item").innerHTML = html;
}, false);
// Now we add the most important point of the plugin, the commands This library is very flexible and now we will see why : Every command is a literal object
artyom.addCommands([
{
description: "Artyom can talk too, lets say something if we say hello",
indexes: [
"hello", "hey"
],
action: function (i) {
// i = the index of the array of indexes option
if (i == 0) {
//You say : "hello"
document.getElementById('time').innerHTML = "Hello ! How are you? I don't want to talk today";
}
}
}, {
description: "Say goodbye",
indexes: ["goodbye"],
action: function () {
alert("Now all is over.");
}
}, {
description: "Say what time is it",
indexes: ['what time is it'],
action: function () {
var currentdate = new Date();
var datetime = "About the date : " + currentdate.getDate() + "/" + (currentdate.getMonth() + 1) + "/" + currentdate.getFullYear() + " @ " + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds();
document.getElementById('time').innerHTML = datetime;
}
}, {
description: "Smart command, say how much x in what we say",
indexes: ["what's the number of *"],
smart: true,
action: function (i, wildcard) {
document.getElementById('time').innerHTML = "The number of " + wildcard + ' is ' + Math.floor(Math.random() * 4000) + 1;
}
}
]);
// Redirect the recognized text
artyom.redirectRecognizedTextOutput(function (text, isFinal) {
var span = document.getElementById('output');
if (isFinal) {
span.innerHTML = '';
} else {
span.innerHTML = text;
}
});
function startArtyom() {
artyom.initialize({
lang: "en-GB", // More languages are documented in the library
continuous: false, //if you have https connection, you can activate continuous mode
debug: true, //Show everything in the console
listen: true // Start listening when this function is triggered
});
}
function stopArtyom() {
artyom.fatality();
}
window.onload = function () {
var tab = document.getElementById("commands-list");
var commands = artyom.getAvailableCommands();
var html = '';
for (var i = 0; i < commands.length; i++) {
var command = commands[i];
html += command.description + " : <span style='color:blue;'>" + command.indexes.toString() + "</span><br>";
}
tab.innerHTML = html;
artyom.initialize({lang: "es-ES"});
var vocesitas = [
{
lang: "es-ES",
description: "Espanol"
}, {
lang: "de-DE",
description: "Deutsch"
}, {
lang: "pt-PT",
description: "Portugues"
}, {
lang: "it-IT",
description: "Italiano"
}
];
vocesitas.forEach(function (voice) {
$('#select-voice').append($('<option>', {
value: voice.lang,
text: voice.description
}));
});
};
</script>
</body>
</html>