Day 16: Alexa, set a timer for one minute | Voice Controlled Timer with Angular
Tags: 100daysofcode, challenge, webdev, angular
Published: 2023-01-23 17:15:32

This demo application includes a sample `VoiceWidget` Angular component which uses the `PicovoiceService`. Picovoice Wake Word detection is handled via the `wakeWordDetection$` event. Inference is handled via the `inference$` event. The `VoiceWidget` subscribes to these events and displays the results.

Do not decline microphone permission or so that prevents Picovoice from starting. To recognize the audio input, it has to get the input, right?

For this tutorial, you'll also need `Angular CLI version 11.0.5` and `AccessKey` from [Picovoice Console](https://console.picovoice.ai/).

**Install and run**
Use `yarn` or `npm` to install then start the demo application:
```
yarn
yarn start
```
(or)
```
npm install
npm run start
```
Open `http://localhost:4200/` in your browser.

**Try Picovoice**
You should have the demo application running in your browser. Now it's time to try! (Again, don't forget the microphone permissions)
`"Picovoice, set a timer for two minutes"`
The result should look similar to this:
```
{
  "isFinalized": true,
  "isUnderstood": true,
  "intent": "setAlarm",
  "slots": {
    "minutes": "2"
  }
}
```
Try a phrase that is out-of-context:
"Picovoice, what's the weather?"
{
  "isFinalized": true,
  "isUnderstood": false,
  "intent": null,
  "slots": {}
}
Since the command is not in the "Clock" context, it is not understood.

The Clock context consists of a particular set of expressions. This file is trained on [Picovoice Console](https://console.picovoice.ai/) to create a `.rhn` file for the `WebAssembly (WASM)` platform. You can build your own application with different sets of expressions on the[Picovoice Console.](https://console.picovoice.ai/)

```
context:
  expressions:
    setAlarm:
      - "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:hours [hour, hours] (and) $pv.TwoDigitInteger:minutes [minute, minutes] (and) $pv.TwoDigitInteger:seconds [second, seconds]"
      - "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:hours [hour, hours] (and) $pv.TwoDigitInteger:minutes [minute, minutes]"
      - "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:hours [hour, hours] (and) $pv.TwoDigitInteger:seconds [second, seconds]"
      - "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:hours [hour, hours]"
      - "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:minutes [minute, minutes] (and) $pv.TwoDigitInteger:seconds [second, seconds]"
      - "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:minutes [minute, minutes]"
      - "set (a, an, the) [alarm, timer] for $pv.TwoDigitInteger:seconds [second, seconds]"
      - "$pv.TwoDigitInteger:hours [hour, hours] (and) $pv.TwoDigitInteger:minutes [minute, minutes] (and) $pv.TwoDigitInteger:seconds [second, seconds]"
      - "$pv.TwoDigitInteger:hours [hour, hours] (and) $pv.TwoDigitInteger:minutes [minute, minutes]"
      - "$pv.TwoDigitInteger:hours [hour, hours] (and) $pv.TwoDigitInteger:seconds [second, seconds]"
      - "$pv.TwoDigitInteger:hours [hour, hours]"
      - "$pv.TwoDigitInteger:minutes [minute, minutes] (and) $pv.TwoDigitInteger:seconds [second, seconds]"
      - "$pv.TwoDigitInteger:minutes [minute, minutes]"
      - "$pv.TwoDigitInteger:seconds [second, seconds]"
    reset:
      - "reset (the) (timer)"
    pause:
      - "[pause, stop] (the) (timer)"
    resume:
      - "resume (the) (timer)"
```