How To Create Voice Recognition Using Ngx-Speech-Recognition In Angular

import {
    Component
} from '@angular/core';
import {
    ColorGrammar
} from './sub.component.grammar';
import {
    SpeechRecognitionLang,
    SpeechRecognitionMaxAlternatives,
    SpeechRecognitionGrammars,
    SpeechRecognitionService,
} from '../../../../../projects/ngx-speech-recognition-test/src/public_api';
@Component({
    selector: 'test-sub',
    templateUrl: './sub.component.html',
    styleUrls: ['./sub.component.css'],
    providers: [
        // Dependency Inject to SpeechRecognitionService 
        // like this. 
        {
            provide: SpeechRecognitionLang,
            useValue: 'en-US',
        }, {
            provide: SpeechRecognitionMaxAlternatives,
            useValue: 1,
        }, {
            provide: SpeechRecognitionGrammars,
            useValue: ColorGrammar,
        },
        SpeechRecognitionService,
    ],
})
export class SubComponent {
    public started = false;
    public message = '';
    constructor(private service: SpeechRecognitionService) {
        // Dependency The injected services are displayed on the console. 
        // Dependence was resolved from SubComponent's provider.    
        this.service.onstart = (e) => {
            console.log('voice start');
        };
        this.service.onresult = (e) => {
            this.message = e.results[0].item(0).transcript;
            console.log('voice message result', this.message, e);
        };
    }
    start() {
        this.started = true;
        this.service.start();
    }
    stop() {
        this.started = false;
        this.service.stop();
    }
}

Sub.component.grammar.ts
/** 
 * @see https://developer.mozilla.org/ja/docs/Web/API/SpeechGrammarList#Examples 
 */
export const ColorGrammar = new SpeechGrammarList();
ColorGrammar.addFromString(`#JSGF V1.0; 
grammar colors; 
public <color> = aqua | azure | beige | bisque | 
  black | blue | brown | chocolate | coral | crimson | cyan | fuchsia |
  ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | 
  lavender | lime | linen | magenta | maroon | moccasin | navy | olive | 
  orange | orchid | peru | pink | plum | purple | red | salmon | sienna | 
  silver | snow | tan | teal | thistle | tomato | turquoise | 
  violet | white | yellow ; 
`, 1);

Sub.component.html

<p>Voice message: {{message}}</p> 
    <button [disabled]="started" (click)="start()">Voice start</button> 
    <button [disabled]="!started" (click)="stop()">Voice end</button> 
<p>lang: en-US</p> 

Sub.module.ts

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { SubComponent} from './components'; 
@NgModule({ 
  imports: [CommonModule], 
  declarations: [SubComponent], 
  exports: [SubComponent,], 
}) 
export class SubModule { } 

Then copy and paste the codes to demo.component.ts, demo. Component.html and demo.module.ts.

demo.component.ts

import { Component } from '@angular/core'; 
@Component({ 
  selector: 'demo-root', 
  templateUrl: './demo.component.html', 
  styleUrls: ['./demo.component.css'], 
}) 
export class DemoComponent { } 

demo.component.html

<test-main></test-main> 
<test-sub></test-sub> 

Demo.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { CommonModule } from '@angular/common'; 
import { DemoComponent } from './demo.component'; 
import { MainComponent } from './components'; 
import { SubModule } from '../demo/sub'; 
import { SpeechRecognitionModule } from '../../projects/ngx-speech-recognition-test/src/public_api'; 
@NgModule({ 
  declarations: [ 
    // app container. 
    DemoComponent, MainComponent, 
  ], 
  imports: [ 
    BrowserModule, 
    CommonModule, 
    RouterModule, 
    SpeechRecognitionModule.withConfig({ 
      lang: 'en', 
      interimResults: true, 
      maxAlternatives: 10, 
      // sample handlers. 
  onaudiostart:  (ev: Event) => console.log('onaudiostart',ev), 
      onsoundstart:  (ev: Event) => console.log('onsoundstart',ev), 
      onspeechstart: (ev: Event) => console.log('onspeechstart',ev), 
      onspeechend:   (ev: Event) => console.log('onspeechend',ev), 
      onsoundend:    (ev: Event) => console.log('onsoundend',ev), 
      onaudioend:    (ev: Event) => console.log('onaudioend', ev), 
      onresult:      (ev: SpeechRecognitionEvent) => console.log('onresult',ev), 
      onnomatch:     (ev: SpeechRecognitionEvent) => console.log('onnomatch',ev), 
      onerror:       (ev: SpeechRecognitionError) => console.log('onerror',ev), 
      onstart:       (ev: Event) => console.log('onstart', ev), 
      onend:         (ev: Event) => console.log('onend',ev), 
    }), 
    // In SubModule, Component's providers are doing Demo 
    // using SpeechRecognitionService generated. 
    // 
    SubModule, 
  ], 
  providers: [], 
  bootstrap: [DemoComponent] 
}) 
export class DemoModule { } 

Added the above codes in the applications. Then please run the applications using ng serve --open or npm start. The application windows http://localhost:4200/ will be opened in the default browser.

If going to run the application first time and click the voice start button browser asks “Use your microphone” permission. If click allows and continues the following steps.

After that, I have to click the Voice start button and then speak input words like “hello welcome to angular”. The voice recognition captures them one by one and stores them into the message. Then, give another input into the voice like “I learn typescript”. And click the Voice end button. The whole words into the single lines of message like “hello welcome to angular I learn typescript”.

If you click the voice end button and we have end voice input process has complete sentence will show in the message field. I hope this article is of most helpful for you.