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

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

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

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

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

完整项目地址：https://github.com/zhangrj/converting-from-speech-to-text-with-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'，function（e） {
  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：

• Google Cloud Speech API
• Bing Speech API
• CMUSphinx 以及其JavaScript版本 Pocketsphinx （都是开源的）
• API.AI 机器学习驱动的免费API