使用JavaScript从语音转换为文本

使用JavaScript从语音转换为文本

在本教程中,我们将尝试使用Web Speech API。这是一个非常强大的浏览器界面,可让您记录人类语音并将其转换为文本。我们还将使用它来做相反的事情-以类人的声音读出字符串。

让我们跳进去吧!

应用程式

为了展示API的功能,我们将构建一个简单的语音笔记应用程序。它做三件事:

  • 通过使用语音转文本或传统键盘输入来做笔记。
  • 将注释保存到localStorage。
  • 显示所有音符,并提供通过语音合成听音的选项。
我们的应用程序,用于使用语音输入做笔记。

我们将不会使用任何花哨的依赖项,只是会使用简单的旧jQuery(用于简化DOM操作)和Shoelace(用于CSS样式)。我们将直接通过CDN将它们包括在内,而无需让NPM参与如此小的项目。

HTML和CSS是非常标准的,因此我们将跳过它们,直接使用JavaScript。要查看完整的源代码,请转到页面顶部附近的下载按钮。

语音转文字

实际上,Web Speech API分为两个完全独立的接口。我们有SpeechRecognition,用于理解人的语音并将其转换为文本(语音->文本),而SpeechSynthesis用于在计算机生成的语音中大声读出字符串(文本->语音)。我们将从前者开始。

语音识别API对于免费的浏览器功能非常准确。它正确地识别了几乎所有我的口语,并且知道哪些单词组合在一起构成了有意义的短语。它还允许您指定特殊字符,例如句号,问号和换行符。

我们需要做的第一件事是检查用户是否有权访问API并显示适当的错误消息。不幸的是,语音到文本API仅在Chrome和Firefox(带有标志)中受支持,因此很多人可能会看到该消息。

尝试{
   var SpeechRecognition = window .SpeechRecognition || window .webkitSpeechRecognition;
  var识别=新的SpeechRecognition();
}
抓住(e){
   console .error(e);
  $('.no-browser-support').show();
  $('.app').hide();
}

recognition变量将使我们能够访问所有API的方法和属性。有多种选项可用,但我们只会设置recognition.continuous为true。这将使用户在单词和短语之间的停顿时间更长。

在使用语音识别之前,我们还必须设置几个事件处理程序。他们中的大多数人只是在听识别状态的变化:

Identification.onstart =函数 {
  Instructions.text('语音识别已激活。尝试对着麦克风讲话。');
}

Recognition.onspeechend =函数 {
  Instructions.text(“您安静了一段时间,所以语音识别功能自动关闭了。”);
}

识别。错误=函数事件 {
  如果事件。错误== '无语音'){
    Instructions.text(“未检测到语音。请重试。”);  
  };
}

但是,有一个onresult非常重要的特殊事件。每当用户快速连续说出一个单词或几个单词时,就会执行该操作,使我们可以访问所讲内容的文本转录。

当我们使用onresult处理程序捕获某些内容时,我们将其保存在全局变量中并在textarea中显示:

Recognition.onresult =函数事件 {

  //事件是SpeechRecognitionEvent对象。
  //它包含了到目前为止我们捕获的所有行。
  //我们只需要当前的一个 
  var current = event.resultIndex;

  //获取所讲内容的笔录。
  var transcript = event.results [current] [ 0 ] .transcript;

  //将当前成绩单添加到我们的注释内容中。
  noteContent + =成绩单;
  noteTextarea.val(noteContent);
}

上面的代码略有简化。Android设备上存在一个非常奇怪的错误,该错误导致所有操作重复两次。尚无官方解决方案,但我们设法解决了该问题,而没有任何明显的副作用。考虑到该错误,代码如下所示:

var mobileRepeatBug =(当前== 1 &&脚本== event.results [ 0 ] [ 0 ] .transcript);

如果(!mobileRepeatBug){
  noteContent + =成绩单;
  noteTextarea.val(noteContent);
}

完成所有设置后,我们就可以开始使用浏览器的语音识别功能了。要启动它,只需调用start()方法:

$('#start-record-btn').on('click'函数e {
  Identification.start();
});

这将提示用户授予权限。如果获得批准,设备的麦克风将被激活。

大多数需要用户许可的API不适用于非安全主机。确保您正在通过HTTPS提供Web Speech应用程序。

浏览器会听一会儿,每个识别出的短语或单词都会被转录。沉默几秒钟或手动停止后,API会自动停止监听。

$('#pause-record-btn')。on('click'函数e {
  Identification.stop();
});

这样,我们的应用程序的语音转文本部分就完成了!现在,让我们做相反的事情!

文字转语音

语音合成系统实际上非常简单。可通过SpeechSynthesis对象访问该API,并且有两种播放,暂停和其他音频相关内容的方法。它还具有几个很酷的选项,可以改变音调,速率甚至读者的声音。

该演示实际上是我们实际需要的speak()。它需要一个参数,即名称精美的SpeechSynthesisUtterance类的实例。

这是读出字符串所需的全部代码。

函数 readOutLoudmessage {
   var speech = new SpeechSynthesisUtterance();

  //设置文字和语音属性。
  speech.text =消息;
  speech.volume = 1 ;
  speech.rate = 1
  speech.pitch = 1 ;

  窗口.speechSynthesis.speak(语音);
}

调用此函数时,机器人声音会读出给定的字符串,这是对人类的最佳印象。

结论

在语音助手比以往更受欢迎的时代,像这样的API为您提供了构建可理解和说人类语言的机器人的快捷方式。

将语音控制添加到您的应用程序也可以是增强可访问性的一种很好的形式。视障用户可以从语音到文本和文本到语音的用户界面中受益。

语音合成和语音识别API可以很好地工作,并且可以轻松处理不同的语言和口音。可悲的是,他们目前对浏览器的支持有限,从而缩小了生产中的使用范围。如果您需要更可靠的语音识别形式,请查看以下第三方API:

  • Google Cloud Speech API
  • 必应语音API
  • CMUSphinx及其JavaScript版本Pocketsphinx(均为开源)。
  • API.AI-由机器学习提供支持的免费Google API
分享到 :
相关推荐

发表评论

邮箱地址不会被公开。