要在Angular中集成原生Web Speech API,可以按照以下步骤进行操作:
首先,确保已经安装了Angular CLI并创建了新的Angular项目。
在项目中安装 @types/web-speech-api
包,该包提供了Web Speech API的 TypeScript 类型定义。可以使用以下命令进行安装:
npm install @types/web-speech-api
import { Component } from '@angular/core';
declare var webkitSpeechRecognition: any;
@Component({
selector: 'app-speech-recognition',
template: `
{{ transcript }}
`
})
export class SpeechRecognitionComponent {
transcript: string;
startRecognition() {
const recognition = new webkitSpeechRecognition();
recognition.lang = 'en-US';
recognition.onresult = (event: any) => {
this.transcript = event.results[0][0].transcript;
};
recognition.start();
}
}
在模板中添加一个按钮来触发语音识别,并显示识别的结果。
最后,在app.module.ts文件中将SpeechRecognitionComponent添加到NgModule的declarations中。
import { SpeechRecognitionComponent } from './speech-recognition.component';
@NgModule({
declarations: [
AppComponent,
SpeechRecognitionComponent
],
// ...
})
export class AppModule { }
这样就完成了在Angular中集成原生Web Speech API的操作。当用户点击“Start Recognition”按钮时,将触发语音识别,并将识别结果显示在页面上。