Voice Commands
For us a voice command is two simple things, a name and an action. When the name is pronounced by the user, the action is executed.
The voice command name is defined as any string, e.g. 'play music', '2', 'john doe', '!', etc. The action is a Javascript function.
Lets define a simple hello world voice command that is executed when the user pronounces "say hi".
Simple hello world command
var myCommand = {
name: 'say hi',
action: function () {
alert('hello world');
}
}
When defining a command, name and action are required properties, but there are others useful to help us to accomplish more complex things.
| Property |
Required |
Type |
Description |
| name |
yes |
string |
Define what the user should pronounce in order to be executed |
| action |
yes |
function |
Define the function that will be executed when the user pronounce the command |
| isActive |
no |
function |
Defaults to function(){ return true; }. You can control when the command is available to be executed. |
| group |
no |
string |
Defaults to ''. Useful to display to the user commands grouped by categories |
| help |
no |
string |
Defaults to ''. Useful to display to the user a description of the command when asks for help |
| switchToContext |
no |
string |
Defaults to ''. Useful to switch to a different context after execute the command |
The last property of the table switchToContext introduces us the idea of something called "context". We'll learn about it into the following section, but first lets see a more complex command definition.
Annoying hello world command
var myCommand = {
name: 'say hi',
action: function () {
document
.querySelectorAll('p, a, span, li, button, th, td, h1, h2, h3, h4, h5, h6')
.forEach(function(el) {
el.textContent = 'hello!';
})
},
group: 'Greetings',
help: 'It shows "hello!" everywhere'
}
Next: Contexts
