Angular 5+ ngx Browser-based Speech Recognition Service Component

NgxSpeechRecognition Angular 5+ A speech recognition service based on a browser implementation like Chrome.

ngx speech recognition, angular speech to text stackblitz, speech to text angular npm, webkitspeechrecognition, typescript speech recognition

How to make use of it:

Installation:

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

1. 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 { }

2. 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 { }

3. 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);
      });
  }

}

Angular 5+ speech recognition, NgxSpeechRecognition Plugin/Github

See Demo And Download

Official Website(kamiazya): Click Here

This superior jQuery/javascript plugin is developed by kamiazya. For extra Advanced Usages, please go to the official website.

Tags: angularchromekamiazyanpm-packagespeech-recognitionTypeScriptweb speech api