TypeScript 中的语音识别和语音合成
SpeechRecognition and SpeechSynthesis in TypeScript
我能够通过创建如下界面在 TypeScript 中 运行 SpeechRecognition,它工作正常:
namespace CORE{
export interface IWindow extends Window{
webkitSpeechRecognition: any;
}
}
我尝试对 SpeechSynthesis 使用相同的方法,但是字段,下面的代码不起作用:
namespace CORE{
export interface IWindow extends Window{
SpeechSynthesisUtterance: any;
speechSynthesis: any;
}
}
我的问题是:
- 是我以前定义的方式
SpeechRecognition
是最好的
练习要遵循 TypeScript,或者有更好的方法。
- 如何在 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);
}
}
}
到目前为止我得到的确切错误如图所示。
感谢 this,我找到了将 speechSynthesis
添加到 Window
变量的解决方案:
(<any>window).speechSynthesis.speak(msg);
// OR
(window as any).talk.speak(msg);
此外,我在我的代码中发现了另一个错误,即: speechSynthesis
应该以小 s
开头,我的错误是大写 S
我喜欢 post 这个答案,以防将来有人需要它。
我能够通过创建如下界面在 TypeScript 中 运行 SpeechRecognition,它工作正常:
namespace CORE{
export interface IWindow extends Window{
webkitSpeechRecognition: any;
}
}
我尝试对 SpeechSynthesis 使用相同的方法,但是字段,下面的代码不起作用:
namespace CORE{
export interface IWindow extends Window{
SpeechSynthesisUtterance: any;
speechSynthesis: any;
}
}
我的问题是:
- 是我以前定义的方式
SpeechRecognition
是最好的 练习要遵循 TypeScript,或者有更好的方法。- 如何在 TypeScript 中使用
SpeechSynthesis
。
- 如何在 TypeScript 中使用
供参考,下面是我的 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);
}
}
}
到目前为止我得到的确切错误如图所示。
感谢 this,我找到了将 speechSynthesis
添加到 Window
变量的解决方案:
(<any>window).speechSynthesis.speak(msg);
// OR
(window as any).talk.speak(msg);
此外,我在我的代码中发现了另一个错误,即: speechSynthesis
应该以小 s
开头,我的错误是大写 S
我喜欢 post 这个答案,以防将来有人需要它。