不常用的浏览器 API —— Web Speech

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。

Web Speech API 有两部分，SpeechSynthesis 语音合成 （文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。使用 Web Speech 可以实现强大的语音应用效果，这部分 API 很强大，当然也需要很强的专业能力，因此这里只是从前端角度认识一下这些 API。

语音识别是通过 SpeechRecognition 来访问的，我们可以在 window 上获取到 SpeechRecognition 对象，在 chrome 下需要加前缀 webkitSpeechRecognition。使用起来很简单，创建对象，调用 start 方法，然后监听 result 事件即可：

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.start();
recognition.addEventListener('result', (e) => {
});

这里在 start 调用后会向系统请求录音权限，获取授权之后用户的声音会被识别，我们可以在 result 中获取结果。

在真实的应用中，我们需要对 SpeechRecognition 进行一系列参数配置，SpeechRecognition 有很多属性，这里涉及到较强的专业知识，不做展开了。

接下来看语音合成，语音合成通过 SpeechSynthesis 来访问，可以简单理解为是语音识别的逆过程，它可以把文本内容转换为语音。同样是从 window 上获取，SpeechSynthesis 的兼容性相对更好，不需要使用前缀。使用 SpeechSynthesis 首先要创建一个 SpeechSynthesisUtterance 对象，上面添加我们需要合成的信息，之后调用 SpeechSynthesis 对象上的 speak 方法就可以播放了：

function synthVoice(text) {
  const synth = window.speechSynthesis;
  const utterance = new SpeechSynthesisUtterance();
  utterance.text = text;
  synth.speak(utterance);
}

可以在控制台试一试，调用上面的函数就可以使用浏览器朗读文字了。

语音识别和语音合成是两个很实用的基础能力，利用这两个 API 可以实现类似语音转文字聊天的功能效果。浏览器的音频相关 API 都很强大，感兴趣也可以了解更多。