使用Web Speech API实现语音文本互转

版权声明:本文为博主原创文章,未经允许不得转载 https://blog.csdn.net/sinat_32582203/article/details/78083926

本教程中,我们将尝试使用Web Speech API,这是一个非常强大的浏览器接口,可以用来记录语音并将其转换为文本,同样的,也可以用来朗读字符串。

接下来进入正题,这个App应当具有以下几个功能:

  • 通过语音录入或者键盘输入的方式保存笔记;
  • 将笔记保存到本地;
  • 显示历史笔记并可以通过语音朗读笔记;

此App无需使用任何花哨的依赖,只需使用jQuery来进行简单的DOM操作,以及Shoelace实现简单的样式,并使用CDN直接将它们包含到文件中。

完整项目地址:https://github.com/zhangrj/converting-from-speech-to-text-with-javascript

JavaScript语音转文本

语音转文本

Web Speech API 实际上分为两个独立的接口,语音识别(识别语音并转换为文本)和语音合成(以电脑合成音阅读文本)。

作为一个免费的浏览器功能,语音识别API的准确度高得令人惊讶。几乎能识别我所有的发音,还能知道哪些词汇组合在一起能形成有意义的短语(英文),并且可以指定一些特殊字符,比如句号,问好,换行符。

首先我们需要检查用户是否有权限访问此API并提供合适的错误提示,到目前为止,只有Chrome和Firefox支持语音转文本API,其他浏览器的用户可能看到浏览器不支持该功能的提示。

try {
  var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  var recognition = new SpeechRecognition();
}
catch(e) {
  console.error(e);
  $('.no-browser-support').show();
  $('.app').hide();
}

recognition变量将允许我们访问该API所有的方法和属性,可供设置的选项有很多,此处我们只需要设置recognition.continuous为true即可,这可以使用户在录入语音时能有更长的停顿时间,大约15秒。

在使用语音识别之前,我们还需要设置一些事件处理程序,用来监听语音识别过程中的状态变化。

recognition.onstart = function() { 
  instructions.text('语音识别功能激活!请对着麦克风讲话。');
}

recognition.onspeechend = function() {
  instructions.text('长时间未说话,已自动关闭录音。');
}

recognition.onerror = function(event) {
  if(event.error == 'no-speech') {
    instructions.text('未检测到语音,请再试一次。');  
  };
}

此外,还有一个非常关键的特殊事件onresult,每当用户连续快速说出一个或几个单词时,都会触发该事件,用来访问转换结果。

我们将onresult处理程序捕获的内容保存到一个全局变量中并将其显示在文本区域。

recognition.onresult = function(event) {

  // event 是一个SpeechRecognitionEvent 对象
  // 保存了所有历史捕获对象
  // 我们只取当前的内容
  var current = event.resultIndex;

  // 获取此前所说话的记录
  var transcript = event.results[current][0].transcript;

  // 将当前记录添加到笔记内容中
  noteContent += transcript;
  noteTextarea.val(noteContent);
}

上面的代码略微有些简化,在Android设备上,有一个非常奇怪的错误,会导致所有东西重复两次,目前官方还没有给出解决方案,我们给出如下的方案,目前来看,没有明显的问题。将该错误考虑在内,代码变为:

var mobileRepeatBug = (current == 1 && transcript == event.results[0][0].transcript);

if(!mobileRepeatBug) {
  noteContent += transcript;
  noteTextarea.val(noteContent);
}

完成以上设置,即可使用语音识别功能,调用recognition的start()方法:

$('#start-record-btn').on('click'functione{
  recognition.start();
});

浏览器将会弹出提示框,请求允许获得麦克风权限。

大多数需要获得用户许可的API在非安全主机上都无法使用,所以最好确保你的网站使用https。

浏览器将会监听一段时间,将每个识别到的单词或短语转译为文本,如果按了停止按钮或者沉默几秒,监听将会自动停止:

$('#pause-record-btn').on('click', function(e) {
  recognition.stop();
});

至此,语音转文本部分已经完成,下面我们继续实现文本转语音。

文本转语音

语音合成使用起来更简单,可通过 speechSynthesis 对象访问该API,并且有播放、暂停等等音频方法可供使用。甚至,还可以改变音高、语速、音调。

我们的应用只需要使用speak()方法,调用一个参数,一个SpeechSynthesisUtterance类的实例。

读取字符串的所有代码如下:

function readOutLoud(message) {
  var speech = new SpeechSynthesisUtterance();

  //设置朗读内容和属性
  speech.text = message;
  speech.volume = 1;
  speech.rate = 1;
  speech.pitch = 1;

  window.speechSynthesis.speak(speech);
}

当此函数被调用时,机器音会读出指定的字符串。

总结

现在这个时代,语音助手比以往任何时候都受欢迎,这样一个API可以帮助我们快速构建可能理解并能讲人类语言的机器人。

为你的应用添加语音控制是一种很好的功能增强,具有视觉障碍的用户也能在语音接口中获益。

该语音合成和语音识别接口适用于多种语言,包括中文。但是有限的浏览器支持限制了它们在实际生产中的使用,如果你需要使用更可靠的语音识别功能,可以试试下面的几个第三方API:

猜你喜欢

转载自blog.csdn.net/sinat_32582203/article/details/78083926
今日推荐