TypeScript中的SpeechRecognition和SpeechSynthesis

时间:2017-01-19 11:29:01

标签: typescript speech-recognition speech-synthesis

我能够通过创建如下所示的界面在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进行练习,或者有更好的方法。
    1. 如何在TypeScript中使用SpeechSynthesis
  2. 供参考,以下是我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);
            }
         }
    }
    
    到目前为止我得到的确切错误如图所示。 enter image description here

1 个答案:

答案 0 :(得分:4)

感谢this,我找到了将speechSynthesis添加到Window变量的解决方案:

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

此外,我在代码中发现了另一个错误,即:speechSynthesis应该以小s开头,我的错误是大写S

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