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

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

@Component({ selector: 'demo-rx', template: `

RxCompoent.message: {{message}}

<button [disabled]="service.started$ | async" (click)="listen()"

listen

lang: ja

grammars: none

`, 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

```typescript 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.

```typescript 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 { } ```

License

MIT

Author

kamiazya(Yuki Yamazaki)