Skip to content
Angular 5+ speech recognition service (based on browser implementation such as Chrome).
TypeScript JavaScript HTML CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
docs add docmentation generated by compodoc May 12, 2019
e2e chore: initial commit from @angular/cli Jan 8, 2018
projects/ngx-speech-recognition
src
.editorconfig
.gitignore chore: initial commit from @angular/cli Jan 8, 2018
.travis.yml
CHANGELOG.md v0.4.0 May 14, 2019
LICENSE support Angular 7 Feb 17, 2019
README.md add Installation manual to README May 14, 2019
angular.json
karma.conf.js
package.json Bump @types/jasmine from 3.3.15 to 3.4.0 Sep 9, 2019
protractor.conf.js
speech.gif
tsconfig.json
tslint.json Angular 6 support #4 Sep 20, 2018
yarn.lock

README.md

Build Status Maintainability Test Coverage npm version Codacy Badge @kamiazya/ngx-speech-recognition Dev Token FOSSA Status

NgxSpeechRecognition

NPM

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

Demo

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

FOSSA Status

Author

kamiazya(Yuki Yamazaki)

ko-fi

You can’t perform that action at this time.