TypeScript 中的语音识别和语音合成

Question

我能够通过创建如下接口在 TypeScript 中运行 SpeechRecognition，并且工作正常：

namespace CORE{
    export interface IWindow extends Window{
        webkitSpeechRecognition: any;
    }
}

我尝试对 SpeechSynthesis 使用相同的方式，但是字段，并且以下代码不起作用：

namespace CORE{
    export interface IWindow extends Window{
        SpeechSynthesisUtterance: any;
        speechSynthesis: any;
    }
}

我的问题是：

1. 我用来定义

   SpeechRecognition

   的方式是最好的吗 练习要遵循 TypeScript，或者有更好的方法。
   2. 如何在 TypeScript 中使用

      SpeechSynthesis

      。

供参考，下面是我的工作代码

SpeechRecognition

:

namespace CORE{
    export interface IWindow extends Window{
        webkitSpeechRecognition: any;
    }
}

namespace CORE{
     export class speakRecognation{
    //    spoken:string;
        constructor(input:HTMLInputElement){
            var audio = new Audio('/sounds/sound.mp3');
            //Voice recognition

            const {webkitSpeechRecognition}: IWindow = <IWindow>window;
            const recognition = new webkitSpeechRecognition();
            recognition.continuous = false;
            recognition.interimResults = true;

            input.addEventListener("click", function(){
                audio.play();
                recognition.start();
                });

            recognition.onstart = function () {
                recognition.recognizing = true;
            };

            recognition.onresult = function (event) {
            var interim_transcript = '';
                for (var i = event.resultIndex; i < event.results.length; ++i) {
                    if (event.results[i].isFinal) {
                        var result = event.results[i][0].transcript;
                        input.value = result;
                      //  input.disable=false;
                        Program.execute(result);
                        recognition.stop();

                    } else {
                        interim_transcript += event.results[i][0].transcript;
                        input.value = interim_transcript;
                    }
                    }
            };

           recognition.onerror = function (event) {
                input.value = "Something went wrong. Try reloading the page.";
            }

            recognition.onnomatch = function (event) {
                input.value = "no match";
            }

           input.addEventListener("blur", function(e) {
                recognition.stop();
                input.value='';
            });

            input.addEventListener('keypress', function (e) {
                recognition.stop();
                var key = e.which || e.keyCode;
                if (key === 13) { // 13 is enter
                    Program.execute(input.value);
                }
            });
        }
    }
}

下面是我在做

SpeachSynthesis

;

的尝试

namespace CORE{
    export interface IWindow extends Window{
        SpeechSynthesisUtterance: any;
        SpeechSynthesis: any;
    }
}

namespace CORE{
     export class speakSynthesis{
         constructor(input:String){
                 if ('speechSynthesis' in window) {
                    console.log('Your browser supports speech synthesis.');
                // speak('hi');
                } else {
                    alert('Sorry your browser does not support speech synthesis. Try this in <a href="https://www.google.com/chrome/browser/desktop/index.html">Google Chrome</a>.');
                }
        const {SpeechSynthesisUtterance}: IWindow = <IWindow>window;
        const {SpeechSynthesis}: IWindow = <IWindow>window;

       // Create a new instance of SpeechSynthesisUtterance.
        var msg = new SpeechSynthesisUtterance();
        // Set the text.
        msg.text = input;
       // Set the attributes.
        msg.lang = 'en-US';
       // msg.voice = 'native'; msg.voice = 'Google US English'; //  'Google UK English Female' 
        msg.voice = 'Google US English' 
        msg.volume = 1;
        msg.rate = 1;
        msg.pitch = 1;
       //  msg.onend = function(event) { console.log('Speech complete'); }
        // Queue this utterance.
        var talk = new SpeechSynthesis();
        window.talk.speak(msg);
        }
     }
}

到目前为止我得到的确切错误如图所示。

Answer 1

感谢this，我找到了将

speechSynthesis

添加到

Window

变量的解决方案：

(<any>window).speechSynthesis.speak(msg);
// OR
(window as any).talk.speak(msg);

此外，我在代码中发现了另一个错误，那就是：

speechSynthesis

应该从小号

s

开始，我的错误是大写

S

我喜欢发布答案，以防将来有人需要它。

Answer 2

我们现在有了一个可以很好地处理此 Web API 类型的包。就这样做：

npm i -D @types/dom-speech-recognition