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