Angular2: Web Speech API - Voice recognition

问题

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?

回答1:

Finally I solved creating an interface!!

export interface IWindow extends Window {
  webkitSpeechRecognition: any;
}

And:

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

回答2:

You can solve the problem by

const speechRecognition = Window['webkitSpeechRecognition'];

Or if You are using jQuery

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

回答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"
  }
}

来源：https://stackoverflow.com/questions/38087013/angular2-web-speech-api-voice-recognition