首页 > 解决方案 > Angular - 集成本机 Web Speech API 的问题

问题描述

我正在尝试在没有任何 3rd 方 ngx 库的情况下集成本机Web Speech API 。

我可以成功地将 API 集成到我的服务中。语音识别也在工作,可以从识别的语音中生成文本。但我在终端面临的唯一问题是一个错误 -

TypeError:speechRecognition 不是构造函数

这是我的访问界面window-

    export interface IWindow extends Window {
      webkitSpeechRecognition: any;
      webkitSpeechGrammarList: any;
      webkitSpeechRecognitionEvent: any;
      SpeechRecognition: any;
      SpeechGrammarList: any;
      SpeechRecognitionEvent: any;
    }

这是我在服务构造函数中触发的服务功能-

        initializeNativeVoiceRecognition(){
            let speechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

            this.recognition = new speechRecognition();
            this.recognition.lang = 'en-US';
            this.recognition.interimResults = false;
            this.recognition.maxAlternatives = 1;
        }

我从以下行收到终端错误 -

this.recognition = new speechRecognition();

仅供参考,以下是运行良好的网络语音 API 回调 -

        initializeVoiceRecognitionCallback(){
            this.recognition.onresult = (event) => {
                var last = event.results.length - 1;
                var queryText = event.results[last][0].transcript;

                this.voiceText$.next(queryText);
            }

            this.recognition.onspeechend = () => {
                this.voiceActiveSectionStatus$.next(true);
            }

            this.recognition.onnomatch = (event) => {
                this.voiceActiveSectionStatus$.next(true);
                this.voiceText$.next('Voice does not match');
            }

            this.recognition.onerror = (event) => {
                this.voiceActiveSectionStatus$.next(true);
                this.voiceText$.next('Error when recognizing voice');
            }
        }

标签: angularangular-servicesvoice-recognitionwebspeech-api

解决方案


您需要确保保持正确的大小写:它是SpeechRecognition()大写的S

这应该是正确的说法:

let recognition = new window.SpeechRecognition();

推荐阅读