## File: README.md

# annyang!

A tiny JavaScript Speech Recognition library that lets your users control your site with voice commands.

**annyang** has no dependencies, weighs just 2 KB, and is free to use and modify under the MIT license.

## Demo and Tutorial

[Play with some live speech recognition demos](https://www.talater.com/annyang)

## FAQ, Technical Documentation, and API Reference

- [annyang Frequently Asked Questions](https://github.com/TalAter/annyang/blob/master/docs/FAQ.md)
- [annyang API reference](https://github.com/TalAter/annyang/blob/master/docs/README.md)
- [annyang tutorial](https://www.talater.com/annyang)
- [CHANGELOG](https://github.com/TalAter/annyang/blob/master/CHANGELOG.md)

## Install

```sh
npm install annyang
```

## Hello World

It's as easy as installing annyang and defining the commands you want.

### ESM (recommended)

```js
import annyang from 'annyang';

if (annyang.isSpeechRecognitionSupported()) {
  // Let's define a command.
  const commands = {
    'hello': () => { alert('Hello world!'); },
    'search for *term': (term) => { console.log(`Searching for ${term}`); },
  };

  // Add our commands to annyang
  annyang.addCommands(commands);

  // Start listening.
  annyang.start();
}
```

### Named imports

```js
import { addCommands, start, isSpeechRecognitionSupported } from 'annyang';

if (isSpeechRecognitionSupported()) {
  addCommands({ 'hello': () => { alert('Hello world!'); } });
  start();
}
```

### CommonJS

```js
const annyang = require('annyang');
```

### Script tag (IIFE)

```html
<script src="https://cdn.jsdelivr.net/npm/annyang@3/dist/annyang.iife.min.js"></script>
<script>
if (annyang.isSpeechRecognitionSupported()) {
  // Let's define a command.
  const commands = {
    'hello': () => { alert('Hello world!'); }
  };

  // Add our commands to annyang
  annyang.addCommands(commands);

  // Start listening.
  annyang.start();
}
</script>
````

**Check out some [live speech recognition demos and advanced samples](https://www.talater.com/annyang), then read the full [API Docs](https://github.com/TalAter/annyang/blob/master/docs/README.md).**

## Adding a GUI

You can easily add a GUI for the user to interact with Speech Recognition using [Speech KITT](https://github.com/TalAter/SpeechKITT).

Speech KITT makes it easy to add a graphical interface for the user to start or stop Speech Recognition and see its current status. KITT also provides clear visual hints to the user on how to interact with your site using their voice, providing instructions and sample commands.

Speech KITT is fully customizable and comes with many different themes, and instructions on how to create your own designs.

[](https://github.com/TalAter/SpeechKITT)

For help with setting up a GUI with KITT, check out the [Speech KITT page](https://github.com/TalAter/SpeechKITT).

## Author

Tal Ater: [@TalAter](https://twitter.com/TalAter)

## License

Licensed under [MIT](https://github.com/TalAter/annyang/blob/master/LICENSE).

---

## File: docs/README.md

# Quick Tutorial, Intro, and Demos

The quickest way to get started is to visit the [annyang homepage](https://www.talater.com/annyang/).

For a more in-depth look at annyang, read on.

# API Reference
**annyang**

***

# annyang

## Functions

### abort()

> **abort**(): `void`

Defined in: [annyang.ts:369](https://github.com/TalAter/annyang/blob/17be9d5c272f8beb449c5bb269e947c996e5adff/src/annyang.ts#L369)

Stop listening and turn off the mic.

Alternatively, to only temporarily pause annyang responding to commands without stopping the SpeechRecognition engine or closing the mic, use pause() instead.

#### Returns

`void`

#### See

[pause()](#pause)

***

### addCallback()

> **addCallback**\<`T`\>(`type`, `callback`, `context?`): () => `void`

Defined in: [annyang.ts:457](https://github.com/TalAter/annyang/blob/17be9d5c272f8beb449c5bb269e947c996e5adff/src/annyang.ts#L457)

Add a callback function to be called in case one of the following events happens:

* `start` - Fired as soon as the browser's Speech Recognition engine starts listening.

* `soundstart` - Fired as soon as any sound (possibly speech) has been detected.

    This will fire once per Speech Recognition starting. See https://is.gd/annyang_sound_start.

* `error` - Fired when the browser's Speech Recognition engine returns an error, this generic error callback will be followed by more accurate error callbacks (both will fire if both are defined).

    The Callback function will be called with the error event as the first argument.

* `errorNetwork` - Fired when Speech Recognition fails because of a network error.

    The Callback function will be called with the error event as the first argument.

* `errorPermissionBlocked` - Fired when the browser blocks the permission request to use Speech Recognition.

    The Callback function will be called with the error event as the first argument.

* `errorPermissionDenied` - Fired when the user blocks the permission request to use Speech Recognition.

    The Callback function will be called with the error event as the first argument.

* `end` - Fired when the browser's Speech Recognition engine stops.

* `result` - Fired as soon as some speech was identified. This generic callback will be followed by either the `resultMatch` or `resultNoMatch` callbacks.

    The Callback functions for this event will be called with an array of possible phrases the user said as the first argument.

* `resultMatch` - Fired when annyang was able to match between what the user said and a registered command.

    The Callback functions for this event will be called with three arguments in the following order:

    * The phrase the user said that matched a command.
    * The command that was matched.
    * An array of possible alternative phrases the user might have said.

* `resultNoMatch` - Fired when what the user said didn't match any of the registered commands.

    Callback functions for this event will be called with an array of possible phrases the user might have said as the first argument.

#### Examples:
````javascript
annyang.addCallback('resultMatch', (userSaid, commandText, phrases) => {
  console.log(userSaid); // sample output: 'hello'
  console.log(commandText); // sample output: 'hello (there)'
  console.log(phrases); // sample output: ['hello', 'halo', 'yellow', 'polo', 'hello kitty']
});

// Returns an unsubscribe function
const unsubscribe = annyang.addCallback('error', () => {
  console.log('There was an error!');
});
unsubscribe(); // removes the callback
````

#### Type Parameters

##### T

`T` *extends* keyof `CallbackMap`

#### Parameters

##### type

`T`

Name of event that will trigger this callback

##### callback

`CallbackMap`\[`T`\]

The function to call when event is triggered

##### context?

`object` = `undefined`

Optional context for the callback function

#### Returns

A function that removes this callback when called

> (): `void`

##### Returns

`void`

***

### addCommands()

> **addCommands**(`commands`, `resetCommands?`): `void`

Defined in: [annyang.ts:265](https://github.com/TalAter/annyang/blob/17be9d5c272f8beb449c5bb269e947c996e5adff/src/annyang.ts#L265)

Add commands that annyang will respond to.
By default this will add to the existing commands. Pass `true` as the second parameter to remove all existing commands first.

#### Examples:
````javascript
const commands1 = {'hello :name': helloFunction, 'howdy': helloFunction};
const commands2 = {'hi': helloFunction};

annyang.addCommands(commands1);
annyang.addCommands(commands2);
// annyang will now listen for all three commands defined in commands1 and commands2

annyang.addCommands(commands2, true);
// annyang will now only listen for the command in commands2
````

#### Parameters

##### commands

`CommandsList`

Commands that annyang should listen for

##### resetCommands?

`boolean` = `false`

Remove all existing commands before adding new commands? *

#### Returns

`void`

#### See

[Commands Object](#commands-object)

***

### debug()

> **debug**(`newState?`): `void`

Defined in: [annyang.ts:569](https://github.com/TalAter/annyang/blob/17be9d5c272f8beb449c5bb269e947c996e5adff/src/annyang.ts#L569)

Turn on the output of debug messages to the console.

#### Parameters

##### newState?

`boolean` = `true`

Turn debug messages on or off

#### Returns

`void`

***

### getSpeechRecognizer()

> **getSpeechRecognizer**(): `SpeechRecognition` \| `undefined`

Defined in: [annyang.ts:601](https://github.com/TalAter/annyang/blob/17be9d5c272f8beb449c5bb269e947c996e5adff/src/annyang.ts#L601)

Returns the instance of the browser's SpeechRecognition object used by annyang.
Useful in case you want direct access to the browser's Speech Recognition engine.

#### Returns

`SpeechRecognition` \| `undefined`

SpeechRecognition The browser's Speech Recognizer instance currently used by annyang

***

### getState()

> **getState**(): `AnnyangState`

Defined in: [annyang.ts:544](https://github.com/TalAter/annyang/blob/17be9d5c272f8beb449c5bb269e947c996e5adff/src/annyang.ts#L544)

Returns the current state of annyang.

#### Returns

`AnnyangState`

The current state

***

### ~~init()~~

> **init**(): `void`

Defined in: [annyang.ts:608](https://github.com/TalAter/annyang/blob/17be9d5c272f8beb449c5bb269e947c996e5adff/src/annyang.ts#L608)

#### Returns

`void`

#### Deprecated

annyang no longer requires manual initialization. It initializes automatically on `start()` or `addCommands()`. Remove any calls to `init()`.

***

### isListening()

> **isListening**(): `boolean`

Defined in: [annyang.ts:533](https://github.com/TalAter/annyang/blob/17be9d5c272f8beb449c5bb269e947c996e5adff/src/annyang.ts#L533)

Returns true if speech recognition is currently on.
Returns false if speech recognition is off or annyang is paused.

#### Returns

`boolean`

true if SpeechRecognition is on and annyang is not paused

***

### isSpeechRecognitionSupported()

> **isSpeechRecognitionSupported**(): `boolean`

Defined in: [annyang.ts:232](https://github.com/TalAter/annyang/blob/17be9d5c272f8beb449c5bb269e947c996e5adff/src/annyang.ts#L232)

Is SpeechRecognition supported in this environment?

#### Returns

`boolean`

true if SpeechRecognition is supported by the browser

***

### pause()

> **pause**(): `void`

Defined in: [annyang.ts:383](https://github.com/TalAter/annyang/blob/17be9d5c272f8beb449c5bb269e947c996e5adff/src/annyang.ts#L383)

Pause listening. annyang will stop responding to commands (until the resume or start methods are called), without turning off the browser's SpeechRecognition engine or the mic.

Alternatively, to stop the SpeechRecognition engine and close the mic, use abort() instead.

#### Returns

`void`

#### See

[abort()](#abort)

***

### removeCallback()

> **removeCallback**(`type?`, `callback?`): `void`

Defined in: [annyang.ts:512](https://github.com/TalAter/annyang/blob/17be9d5c272f8beb449c5bb269e947c996e5adff/src/annyang.ts#L512)

Remove callbacks from events.

- Pass an event name and a callback command to remove that callback command from that event type.
- Pass just an event name to remove all callback commands from that event type.
- Pass undefined as event name and a callback command to remove that callback command from all event types.
- Pass no params to remove all callback commands from all event types.

#### Examples:
````javascript
annyang.addCallback('start', myFunction1);
annyang.addCallback('start', myFunction2);
annyang.addCallback('end', myFunction1);
annyang.addCallback('end', myFunction2);

// Remove all callbacks from all events:
annyang.removeCallback();

// Remove all callbacks attached to end event:
annyang.removeCallback('end');

// Remove myFunction2 from being called on start:
annyang.removeCallback('start', myFunction2);

// Remove myFunction1 from being called on all events:
annyang.removeCallback(undefined, myFunction1);
````

#### Parameters

##### type?

keyof CallbackMap

Name of event type to remove callback from

##### callback?

The callback function to remove

() => `void` | () => `void` | () => `void` | (`phrases`) => `void` | (`userSaid`, `commandText`, `phrases`) => `void` | (`phrases`) => `void` | (`event`) => `void` | (`event`) => `void` | (`event`) => `void` | (`event`) => `void`

#### Returns

`void`

undefined

***

### removeCommands()

> **removeCommands**(`commandsToRemove?`): `void`

Defined in: [annyang.ts:306](https://github.com/TalAter/annyang/blob/17be9d5c272f8beb449c5bb269e947c996e5adff/src/annyang.ts#L306)

Remove existing commands. Called with a single phrase, an array of phrases, or with no params to remove all commands.

#### Examples:
````javascript
const commands = {'hello': helloFunction, 'howdy': helloFunction, 'hi': helloFunction};

// Remove all existing commands
annyang.removeCommands();

// Add some commands
annyang.addCommands(commands);

// Don't respond to hello
annyang.removeCommands('hello');

// Don't respond to howdy or hi
annyang.removeCommands(['howdy', 'hi']);
````

#### Parameters

##### commandsToRemove?

Commands to remove

`string` | `string`[]

#### Returns

`void`

***

### resume()

> **resume**(): `void`

Defined in: [annyang.ts:391](https://github.com/TalAter/annyang/blob/17be9d5c272f8beb449c5bb269e947c996e5adff/src/annyang.ts#L391)

Resumes listening and restore command callback execution when a command is matched.
If SpeechRecognition was aborted (stopped), start it.

#### Returns

`void`

***

### setLanguage()

> **setLanguage**(`language`): `void`

Defined in: [annyang.ts:556](https://github.com/TalAter/annyang/blob/17be9d5c272f8beb449c5bb269e947c996e5adff/src/annyang.ts#L556)

Set the language the user will speak in. If this method is not called, annyang defaults to 'en-US'.

#### Parameters

##### language

`string`

The language (locale)

#### Returns

`void`

#### See

[Languages](https://github.com/TalAter/annyang/blob/master/docs/FAQ.md#what-languages-are-supported)

***

### start()

> **start**(`options?`): `void`

Defined in: [annyang.ts:340](https://github.com/TalAter/annyang/blob/17be9d5c272f8beb449c5bb269e947c996e5adff/src/annyang.ts#L340)

Start listening.
It's a good idea to call this after adding some commands first (but not mandatory)

Receives an optional options object which supports the following options:

- `autoRestart`  (boolean) Should annyang restart itself if it is closed indirectly (e.g. because of silence or window conflicts)?
- `continuous`   (boolean) Allow forcing continuous mode on or off. annyang is pretty smart about this, so only set this if you know what you're doing.
- `paused`       (boolean) Start annyang in paused mode.

#### Examples:
````javascript
// Start listening, don't restart automatically
annyang.start({ autoRestart: false });
// Start listening, don't restart automatically, stop recognition after first phrase recognized
annyang.start({ autoRestart: false, continuous: false });
````

#### Parameters

##### options?

`StartOptions` = `{}`

Optional options.

#### Returns

`void`

***

### trigger()

> **trigger**(`sentences?`): `void`

Defined in: [annyang.ts:591](https://github.com/TalAter/annyang/blob/17be9d5c272f8beb449c5bb269e947c996e5adff/src/annyang.ts#L591)

Match text against registered commands and fire the corresponding callbacks.
Works independently of the speech recognition engine — does not require `start()`, and works even in
environments where SpeechRecognition is not supported.

Can accept either a string containing a single sentence or an array containing multiple sentences to be checked
in order until one of them matches a command (similar to the way Speech Recognition Alternatives are parsed)

#### Examples:
````javascript
annyang.trigger('Time for some thrilling heroics');
annyang.trigger(
    ['Time for some thrilling heroics', 'Time for some thrilling aerobics']
  );
````

#### Parameters

##### sentences?

A sentence as a string or an array of strings of possible sentences

`string` | `string`[]

#### Returns

`void`

# Good to Know

## Commands Object

annyang understands commands with `named variables`, `splats`, and `optional words`.

- Use `named variables` for one-word arguments in your command.
- Use `splats` to capture multi-word text at the end of your command (greedy).
- Use `optional words` or phrases to define a part of the command as optional.

#### Examples:
````html
<script>
const commands = {
  // annyang will capture anything after a splat (*) and pass it to the function.
  // For example saying "Show me Batman and Robin" will call showFlickr('Batman and Robin');
  'show me *tag': showFlickr,

  // A named variable is a one-word variable, that can fit anywhere in your command.
  // For example saying "calculate October stats" will call calculateStats('October');
  'calculate :month stats': calculateStats,

  // By defining a part of the following command as optional, annyang will respond
  // to both: "say hello to my little friend" as well as "say hello friend"
  'say hello (to my little) friend': greeting
};

const showFlickr = tag => {
  const url = 'http://api.flickr.com/services/rest/?tags='+tag;
  $.getJSON(url);
}

const calculateStats = month => {
  $('#stats').text('Statistics for '+month);
}

const greeting = () => {
  $('#greeting').text('Hello!');
}
</script>
````

### Using Regular Expressions in commands
For advanced commands, you can pass a regular expression object, instead of
a simple string command.

This is done by passing an object containing two properties: `regexp`, and
`callback` instead of the function.

#### Examples:
````javascript
const calculateFunction = month => { console.log(month); }
const commands = {
  // This example will accept any word as the "month"
  'calculate :month stats': calculateFunction,
  // This example will only accept months which are at the start of a quarter
  'calculate :quarter stats': {'regexp': /^calculate (January|April|July|October) stats$/, 'callback': calculateFunction}
}
````