Angular2: Web Speech API——语音识别

Angular2: Web Speech API - Voice recognition

本文关键字：语音识别 API Speech Web Angular2      更新时间：2023-09-26

在阅读了webkitSpeechRecognition (Javascript中的语音识别)的文档后，我试图在Angular 2中实现它。

但是当我这样做的时候:

const recognition = new webkitSpeechRecognition();

TypeScript说这个错误:

[ts] Cannot find name 'webkitSpeechRecognition'. any

如果我尝试从窗口中提取webkitSpeechRecognition:

if ('webkitSpeechRecognition' in window) {
    console.log("Enters inside the condition"); // => It's printing
    const { webkitSpeechRecognition } = window; // => TypeScript Error
    const recognition = new webkitSpeechRecognition();
}

如果我注释最后两行，则打印console.log，进入条件!webkitSpeechRecognition存在于窗口内!!但如果不注释最后两行TypeScript错误现在是这样的:

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

如何在Angular 2中创建一个新的识别?有人试过吗?

最后我解决了创建一个接口!!

export interface IWindow extends Window {
  webkitSpeechRecognition: any;
}

: 

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

在Angular 9中，我使用的是const speechRecognition = window['webkitSpeechRecognition'];注意，窗口'w'是小写的。

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

你可以通过

const speechRecognition = Window['webkitSpeechRecognition'];

或者如果你正在使用jQuery

const sr = $(window).get(0).webkitSpeechRecognition;
相关文章：