如何通过单击按钮停止语音识别文本

Question

我正在使用Kamiazya插件进行语音识别。当我单击“收听”按钮时，将开始录制语音文本。我还想有一个按钮，如果我不想听的话，可以停止录音。其他所有工作都很好，但是我正在努力寻找解决方案以阻止它。这是下面的代码：

home.component.html

    <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>
<button (click)="stop()">stop</button>

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
    }   
    stop(){
}

    }

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

Answer 1

您应提供SpeechRecognitionService才能使用SpeechRecognitionService

home.component.ts

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.component.css"],
  providers: [SpeechRecognitionService]
})

在构造函数中注入SpeechRecognitionService

 constructor(
    private service: SpeechRecognitionService
  ) {})

然后使用SpeechRecognitionService提供的stop方法

 stop(){
    this.service.stop();
 }

Documentation