Angular2: Web Speech API - Voice recognition

Question

After reading the documentation of webkitSpeechRecognition (voice recognition in Javascript) I tried to implement it in Angular 2.

But when I did this:

const recognition = new webkitSpeechRecognition();

TypeScript say this error:

[ts] Cannot find name 'webkitSpeechRecognition'. any

And if I try to extract webkitSpeechRecognition from window:

if ('webkitSpeechRecognition' in window) {

    console.log("Enters inside the condition"); // => It's printing

    const { webkitSpeechRecognition } = window; // => TypeScript Error
    const recognition = new webkitSpeechRecognition();
}

If I comment the last two lines the console.log is printed, enters to the condition! webkitSpeechRecognition exists inside window!! But if not comment the last two lines the TypeScript error now is this:

[ts] Type 'Window' has no property 'webkitSpeechRecognition' and no string index signature.
const webkitSpeechRecognition: any

How can I create a new recognition in Angular 2? Has anybody tried it?

Answer 1

Finally I solved creating an interface!!

export interface IWindow extends Window {
  webkitSpeechRecognition: any;
}

And:

const {webkitSpeechRecognition} : IWindow = <IWindow>window;
const recognition = new webkitSpeechRecognition();

Answer 2

In Angular 9, it worked me but using const speechRecognition = window['webkitSpeechRecognition']; note that the window 'w' is lowercase.

Answer 3

home.component.html

<select (change)="onChangeEvent($event)"><option>Chartdata</option><option>Tabledata</option></select>
<div id="chart" (click)="voice()">ChartData</div>
<div id="table">TableData</div>
<input type="text" placeholder="Speak out"/>
<p>RxCompoent.message: {{message}}</p>
<p><input type="text" value="{{message}}"></p>
  <button
    [disabled]="service.started$ | async"
    (click)="listen()"
  >listen</button>
  <p>lang: ja</p>
  <p>grammars: none</p>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import Speech from 'speak-tts';
 import { RxSpeechRecognitionService, resultList, } from '@kamiazya/ngx-speech-recognition';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],

  providers: [ RxSpeechRecognitionService ]
})
export class HomeComponent implements OnInit { 
    data:any;
    nestedjson:any;
    message = '';
 constructor(private formBuilder: FormBuilder,public service: RxSpeechRecognitionService) {


     }

  ngOnInit() {
    //  this.voicex();

} 
listen() {
    this.service
      .listen()
      .pipe(resultList)
      .subscribe((list: SpeechRecognitionResultList) => {
        this.message = list.item(0).item(0).transcript;
        console.log('RxComponent:onresult', this.message, list);
      });
  }

voice(){
this.voicex();
}
voicex(){
const ut = new SpeechSynthesisUtterance('Speak out');
speechSynthesis.speak(ut);  
}
onChangeEvent(ev) {
    console.log(ev.target.value); // should print option1
}   


}

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UsermanagementComponent } from './usermanagement/usermanagement.component';
import { HomeComponent } from './home/home.component';
import { HeaderComponent } from './shared/header/header.component';
import { LoginComponent } from './login/login.component';
import {HttpModule} from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ChartModule,HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as exporting from 'highcharts/modules/exporting.src';
import * as exportdata from 'highcharts/modules/export-data.src';
import {SpeechRecognitionModule} from '@kamiazya/ngx-speech-recognition';

@NgModule({
  declarations: [
    AppComponent,
    UsermanagementComponent,
    HomeComponent,
    HeaderComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    ChartModule,
    SpeechRecognitionModule.withConfig({ lang: 'en-US', interimResults: true, maxAlternatives: 10, })
  ],
  providers: [{provide:HIGHCHARTS_MODULES,useFactory:() =>[exporting,exportdata]}],
  bootstrap: [AppComponent]
})
export class AppModule { }

package.json

{
  "name": "sampleproject",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.8",
    "@angular/common": "~8.2.8",
    "@angular/compiler": "~8.2.8",
    "@angular/core": "~8.2.8",
    "@angular/forms": "~8.2.8",
    "@angular/http": "^7.2.15",
    "@angular/platform-browser": "~8.2.8",
    "@angular/platform-browser-dynamic": "~8.2.8",
    "@angular/router": "~8.2.8",
    "@kamiazya/ngx-speech-recognition": "^0.4.3",
    "angular-highcharts": "^8.0.3",
    "highcharts": "^7.2.0",
    "jquery": "^3.4.1",
    "rxjs": "~6.4.0",
    "rxjs-compat": "^6.5.3",
    "speak-tts": "^2.0.8",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.6",
    "@angular/cli": "~8.3.6",
    "@angular/compiler-cli": "~8.2.8",
    "@angular/language-service": "~8.2.8",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

Answer 4

You can solve the problem by

const speechRecognition = Window['webkitSpeechRecognition'];

Or if You are using jQuery

const sr = $(window).get(0).webkitSpeechRecognition;