专栏名称: 奇舞精选

《奇舞精选》是由奇舞团维护的前端技术公众号。除周五外，每天向大家推荐一篇前端相关技术文章，每周五向大家推送汇总周刊内容。

纯前端实现语音文字互转

奇舞精选 · 公众号 · · 2024-08-14 18:00

正文

本文作者系360奇舞团前端开发工程师

在现代互联网的发展中，语音技术正逐渐成为改变用户体验的重要一环。Web Speech API 的引入使得开发者能够在浏览器中轻松实现语音识别和语音合成功能，为用户带来更加直观和便捷的操作体验。本文将介绍 Web Speech API 的基本概念、功能特性以及如何利用它来构建创新的应用程序。

什么是 Web Speech API？

Web Speech API 是一组浏览器 API，允许开发者在 Web 应用程序中集成语音识别和语音合成功能。这些 API 的引入标志着浏览器开始支持本地端的语音交互能力，不仅改善了用户体验，还为开发者提供了更多创新的可能性。

主要组成部分

Web Speech API 包括两个核心部分：

SpeechRecognition（语音识别） ：

允许用户通过麦克风输入语音，然后将其转换为文本。
可以检测语音的开始和结束，以便进行适当的处理和响应。
提供了各种配置选项，如语言识别设置、连续识别等，以满足不同应用场景的需求。

SpeechSynthesis（语音合成） ：

允许开发者将文本转换为语音输出。
支持多种语音合成引擎和语音效果，可以根据需求选择合适的语音风格和语言。
提供了控制音调、语速等参数的接口，以实现个性化的语音输出效果。

优势

多语言支持 : Web Speech API 支持多种语言，可0以通过设置 recognition.lang 或 utterance.lang 来切换不同的语言环境。例如，识别法语、西班牙语等。
语音指令的识别 : 不仅仅是简单的文本转换，可以实现对特定命令或短语的识别，如控制网页的导航、播放媒体等。这需要在识别的事件处理程序中进行语音指令的解析和响应。
连续语音识别 : 设置 recognition.continuous = true ，使得语音识别能够持续监听用户的语音输入，而不是单次识别。
实时反馈和动态调整 : 根据识别的实时结果，可以实现实时反馈或动态调整应用程序的行为。例如，在用户说话时动态更新界面或提供即时建议。

如何使用 Web Speech API？

实现语音识别

属性

recognition.grammars 用于存储一组语法规则，可以通过 addFromString 方法添加语法规则。
recognition.lang 设置或获取语音识别的语言
recognition.interimResults 如果设置为 true ，则在识别过程中会提供临时结果。如果为 false ，则只提供最终结果
recognition.maxAlternatives 设置语音识别返回的替代结果的最大数量。默认值为 1，表示只返回最可能的结果
recognition.continuous 如果设置为 true ，则识别会持续运行直到显式停止。如果为 false ，识别会在单次语音输入后自动停止
recognition.onresult 当识别结果可用时触发的事件处理程序。事件对象的 results 属性包含识别结果
recognition.onaudiostart 当开始录制音频时触发的事件处理程序
recognition.onsoundstart 当检测到声音时触发的事件处理程序
recognition.onspeechstart 当检测到用户开始说话时触发的事件处理程序
recognition.onspeechend 当用户停止说话时触发的事件处理程序
recognition.onaudioend 当音频录制停止时触发的事件处理程序
recognition.onend 当语音识别结束时触发的事件处理程序
recognition.onerror 当语音识别发生错误时触发的事件处理程序。事件对象的 error 属性包含错误信息
recognition.onnomatch 当语音识别没有匹配到任何结果时触发的事件处理程序
recognition.onsoundend 当检测到的声音停止时触发的事件处理程序

事件

start() 启动语音识别
stop() 停止语音识别
abort() 终止语音识别，并且不会触发 onend 事件

通过以下简单的 JavaScript 代码片段，可以实现基本的语音识别功能：

const recognition = new webkitSpeechRecognition(); // 创建语音识别对象
recognition.lang = 'en-US'; // 设置识别语言为英语
recognition.onresult = function(event) {
  const transcript = event.results[0][0].transcript; // 获取识别结果文本
  console.log('识别结果:', transcript);
};
recognition.start(); // 开始识别

实现语音合成

属性

SpeechSynthesisUtterance.lang 获取并设置说话的语言
SpeechSynthesisUtterance.pitch 获取并设置说话的音调（值越大越尖锐，越小越低沉）
SpeechSynthesisUtterance.rate 获取并设置说话的速度（值越大越快）
SpeechSynthesisUtterance.text 获取并设置说话的文本
SpeechSynthesisUtterance.voice 获取并设置说话时的声音
SpeechSynthesisUtterance.volume 获取并设置说话的音量

事件

speak() 将对应的实例添加到语音队列中
cancel() 删除队列中所有的语音，如果正在播放，则直接停止
pause() 暂停语音
resume() 恢复暂停的语音
getVoices 获取支持的语言数组

使用 SpeechSynthesis API 实现文本转语音的功能，示例代码如下：

const utterance = new SpeechSynthesisUtterance('Hello, welcome to our website.');
utterance.lang = 'en-US'; // 设置语音合成的语言
window.speechSynthesis.speak(utterance); // 开始语音合成

SpeechGrammar

1. 什么是 `SpeechGrammar` ？

SpeechGrammar 对象用于指定一个语法规则，这些规则可以帮助语音识别引擎识别特定的语音输入。它常与 SpeechRecognition 对象结合使用。语法规则可以是简单的文本，也可以是复杂的正则表达式或者语法定义。

2. 如何使用 `SpeechGrammar` ？

要使用 SpeechGrammar ，你需要创建一个 SpeechRecognition 对象，并为其添加一个或多个 SpeechGrammar 对象。以下是一个示例：

html>
"en">

  "UTF-8">
  "viewport" content="width=device-width, initial-scale=1.0">
  Speech Grammar Example


  
  "output">

通过合理使用 SpeechGrammar 和 SpeechRecognition ，你可以创建更精确的语音识别应用，提升用户体验。

实际应用场景包括但不限于：

智能助手和语音搜索 : 实现类似于 Siri、Google Assistant 等智能助手的语音控制和信息获取功能。