使用 Angular 开始工作 Microsoft Speech API

Question

嗨，我正在尝试找到一种方法来使用 Microsoft Speech API 来使用 Angular 5 我使用了 microsoft-speech-browser-sdk 的 javascript

https://github.com/Azure-Samples/SpeechToText-WebSockets-Javascript

我只是导入 SDK 从 'microsoft-speech-browser-sdk' 导入 * 作为 SDK； 我尝试在示例中使用相同的代码

但我有这个错误 SDK.Recognizer.CreateRecognizer 不是函数 我知道导入 skd 是因为它执行第一个函数

我也找不到 API 参考 有没有人用 Angular 完成这项认知服务？

Answer 1

使用此代码 SDK.CreateRecognizer(recognizerConfig,authentication);

Answer 2

我遇到了同样的问题，似乎是博文中的一个错字，所以我在这里与 SDK 示例进行了比较：https://github.com/Azure-Samples/cognitive-services-speech-sdk/tree/master/samples/js/browser

Smael 的回答本质上是修复 - 从函数调用中删除 .Recognizer 并且应该修复它（还要确保您返回的 SDK 引用与您正在导入的引用同名：

import { Component } from '@angular/core';
import { environment } from 'src/environments/environment';
import * as SpeechSDK from 'microsoft-speech-browser-sdk';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {

  speechAuthToken: string;
  recognizer: any;

  constructor() {
    this.recognizer = this.RecognizerSetup(SpeechSDK, SpeechSDK.RecognitionMode.Conversation, 'en-US',
      SpeechSDK.SpeechResultFormat.Simple, environment.speechSubscriptionKey);
  }

  RecognizerSetup(SDK, recognitionMode, language, format, subscriptionKey) {
    const recognizerConfig = new SDK.RecognizerConfig(
        new SDK.SpeechConfig(
            new SDK.Context(
                new SDK.OS(navigator.userAgent, 'Browser', null),
                new SDK.Device('SpeechSample', 'SpeechSample', '1.0.00000'))),
        recognitionMode, // SDK.RecognitionMode.Interactive  (Options - Interactive/Conversation/Dictation)
        language, // Supported languages are specific to each recognition mode Refer to docs.
        format); // SDK.SpeechResultFormat.Simple (Options - Simple/Detailed)

    // Alternatively use SDK.CognitiveTokenAuthentication(fetchCallback, fetchOnExpiryCallback) for token auth
    const authentication = new SDK.CognitiveSubscriptionKeyAuthentication(subscriptionKey);

    return SpeechSDK.CreateRecognizer(recognizerConfig, authentication);
  }

  RecognizerStart() {
    this.recognizer.Recognize((event) => {
        /*
            Alternative syntax for typescript devs.
            if (event instanceof SDK.RecognitionTriggeredEvent)
        */
        switch (event.Name) {
            case 'RecognitionTriggeredEvent' :
                console.log('Initializing');
                break;
            case 'ListeningStartedEvent' :
                console.log('Listening');
                break;
            case 'RecognitionStartedEvent' :
                console.log('Listening_Recognizing');
                break;
            case 'SpeechStartDetectedEvent' :
                console.log('Listening_DetectedSpeech_Recognizing');
                console.log(JSON.stringify(event.Result)); // check console for other information in result
                break;
            case 'SpeechHypothesisEvent' :
                // UpdateRecognizedHypothesis(event.Result.Text);
                console.log(JSON.stringify(event.Result)); // check console for other information in result
                break;
            case 'SpeechFragmentEvent' :
                // UpdateRecognizedHypothesis(event.Result.Text);
                console.log(JSON.stringify(event.Result)); // check console for other information in result
                break;
            case 'SpeechEndDetectedEvent' :
                // OnSpeechEndDetected();
                console.log('Processing_Adding_Final_Touches');
                console.log(JSON.stringify(event.Result)); // check console for other information in result
                break;
            case 'SpeechSimplePhraseEvent' :
                // UpdateRecognizedPhrase(JSON.stringify(event.Result, null, 3));
                break;
            case 'SpeechDetailedPhraseEvent' :
                // UpdateRecognizedPhrase(JSON.stringify(event.Result, null, 3));
                break;
            case 'RecognitionEndedEvent' :
                // OnComplete();
                console.log('Idle');
                console.log(JSON.stringify(event)); // Debug information
                break;
        }
    })
    .On(() => {
        // The request succeeded. Nothing to do here.
    },
    (error) => {
        console.error(error);
    });
  }

  RecognizerStop() {
    // recognizer.AudioSource.Detach(audioNodeId) can be also used here. (audioNodeId is part of ListeningStartedEvent)
    this.recognizer.AudioSource.TurnOff();
  }

}

Answer 3

(Angular 10)

通过运行确保您已安装服务：

npm install microsoft-cognitiveservices-speech-sdk

我所做的是为所有认知服务创建一个服务，并将逻辑保留在该服务中。

服务： 我使用了 promise 在组件中获得结果

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { CancellationDetails, CancellationReason, PhraseListGrammar, ResultReason, SpeechConfig, SpeechRecognizer, SpeechSynthesizer } from 'microsoft-cognitiveservices-
speech-sdk';

export class CognitiveService {
  private speechConfig = SpeechConfig.fromSubscription("subscriptionKeyHere", "areaHere");
  private speechRecognizer = new SpeechRecognizer(this.speechConfig);
  private speechSynthesizer = new SpeechSynthesizer(this.speechConfig)

  constructor(private httpClient: HttpClient) {}

  public speechToText() {
    return new Promise((resolve, reject) => {
      this.speechRecognizer.recognizeOnceAsync(result => {
        let text = "";
        switch (result.reason) {
          case ResultReason.RecognizedSpeech:
            text = result.text;
            break;
          case ResultReason.NoMatch:
            text = "Speech could not be recognized.";
            reject(text);
            break;
          case ResultReason.Canceled:
            var cancellation = CancellationDetails.fromResult(result);
            text = "Cancelled: Reason= " + cancellation.reason;
            if (cancellation.reason == CancellationReason.Error) {
              text = "Canceled: " + cancellation.ErrorCode;
            }
            reject(text);
            break;
        }
        resolve(text);
      });
    });
  }

  public textToSpeech(text: string) {
    this.speechSynthesizer.speakTextAsync(text);
  }

组件：我使用了 await/async 方法

public async Speech2Text() {

if (this.listening) // Used for UI effects
  return;
this.listening = true;

await this.cognitiveService.speechToText().then((res: string) => {
  console.log(res);
  // use text 
})
  .catch((res: string) => {
    this._snackBar.open(res, "okay", { duration: 3000 });
  })
  .finally(() => this.listening = false);
}