@kamiazya/ngx-speech-recognition

NgxSpeechRecognition

Angular 5+ speech recognition service (based on browser implementation such as Chrome).

Demo

Run ng serve for a demo server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

See

Support Browsers

Web Speech API -- MDN

API

RxSpeechRecognitionService

import { Component } from '@angular/core';
import {
  RxSpeechRecognitionService,
  resultList,
} from '@kamiazya/ngx-speech-recognition';

@Component({
  selector: 'demo-rx',
  template: `
  <p>RxCompoent.message: {{message}}</p>
  <button
    [disabled]="service.started$ | async"
    (click)="listen()"
  >listen</button>
  <p>lang: ja</p>
  <p>grammars: none</p>
  `,
  styleUrls: ['./rx.component.css'],
  providers: [
    RxSpeechRecognitionService,
  ],
})
export class RxComponent {

  message = '';

  constructor(
    public service: RxSpeechRecognitionService,
  ) { }

  listen() {
    this.service
      .listen()
      .pipe(resultList)
      .subscribe((list: SpeechRecognitionResultList) => {
        this.message = list.item(0).item(0).transcript;
        console.log('RxComponent:onresult', this.message, list);
      });
  }

}

Settings Example

Module Pattern

import {
  SpeechRecognitionModule,
} from '@kamiazya/ngx-speech-recognition';

@NgModule({
  imports: [
    // load with configs.
    SpeechRecognitionModule.withConfig({
      lang: 'en-US',
      interimResults: true,
      maxAlternatives: 10,
    }),
  ],
})
export class DemoModule { }

Provider Pattern

Dependency Inject to SpeechRecognitionService.

import {
  SpeechRecognitionLang,
  SpeechRecognitionMaxAlternatives,
  SpeechRecognitionGrammars,
  SpeechRecognitionService,
} from '@kamiazya/ngx-speech-recognition';

@Component({
  templateUrl: './sub.component.html',
  styleUrls: ['./sub.component.css'],
  providers: [
    {
      provide: SpeechRecognitionLang,
      useValue: 'en-US',
    },
    {
      provide: SpeechRecognitionMaxAlternatives,
      useValue: 1,
    },
    SpeechRecognitionService,
  ],
})
export class SubComponent { }

Doccumentation

See this link.

It generated by CompoDoc.

Installation

By Angular CLI 6+

You can install this library by using ng add @kamiazya/ngx-speech-recognition command on your Angular project.

$ ng add @kamiazya/ngx-speech-recognition
Installing packages for tooling via yarn.
yarn add v1.12.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ @kamiazya/ngx-speech-recognition@x.y.z
info All dependencies
├─ @angular/cdk@7.3.7
└─ @kamiazya/ngx-speech-recognition@x.y.z
✨  Done in 4.75s.
Installed packages for tooling via yarn.
    ✅️ Added dependency: @kamiazya/ngx-speech-recognition@x.y.z
    ✅️ Dependencies installed
    ✅️ SpeechRecognitionModule Imported to /src/app/app.module.ts
UPDATE package.json (1360 bytes)
UPDATE src/app/app.module.ts (446 bytes)

By Manual

# yarn
yarn add @kamiazya/ngx-speech-recognition
# npm
npm i -S @kamiazya/ngx-speech-recognition

License

MIT

Author

kamiazya(Yuki Yamazaki)