Speech Recognition and SpeechSynthesis in TypeScript

Question

I managed to run SpeechRecognition in TypeScript, creating an interface as shown below, and it works fine:

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

I tried using the same method for SpeechSynthesis, but the field and the code below did not work:

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

my questions:

• I used the SpeechRecognition method that I used to determine if TypeScript is practicing, or is there a better way.
  2. How to work with SpeechSynthesis in TypeScript.

for reference, below is my working code for 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); } }); } } } 

and below my test when performing 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); } } } 

the exact error I get so far is shown in fig.

Answer 1

Thanks to this, I found a solution to add the speechSynthesis variable to the Window variable:

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

In addition, I found another error in my code: speechSynthesis should start with small s , my error was in capital s

I liked posting the answer if someone needed it in the future.