在前端开发中，为了增强用户交互，很多网站和应用都会使用语音输入功能。而开发一个完整的语音输入系统，需要经过很多的工作和处理。不过，幸好现在有一款非常棒的 npm 包，名为 speechless，可以轻松实现语音输入功能。
speechless 简介
speechless 是一个 JavaScript 库，专门用于实现语音输入功能。它跨平台支持前端网页和客户端应用，并可用在各大浏览器中。语音识别的后台使用了 Google 的 API，并利用 WebRTC 支持获取音频流。
安装与引入
要使用 speechless，首先需要将其安装到项目中。通过 npm 命令执行以下代码即可安装：
npm install speechless
接下来，在代码中引入 speechless 的库文件。进行以下构造代码，便完成了 speechless 的引入：
-- -------------------- ---- ------- ------ - ----------------- - ---- ------------- ----- -- - --- ------------------- ----- -------- ----------- ----- --------------- ----- ---------------- -- --- ----------- - --- -- - ---------------------------------------- -- -----------
上述代码中，SpeechRecognition 为 speechless 中提供的 API。语音识别通过 SpeechRecognition 这个对象来管理。new SpeechRecognition 构造函数接收一个对象作为参数，其中包含语音识别的一些选项。例如，lang 选项指定语音识别的语言，此处为“中文（中国）”，continuous 选项表明语音识别是否为连续的，interimResults 表示是否返回中途结果，maxAlternatives 则表示最多返回的识别候选项数量。接下来，通过 start() 方法来开始录音。
事件处理
除了构建 API 和选项对象外， speechless 还支持多种事件处理。下面介绍几种常见的事件处理方式：
onresult
在语音输入结束后， speechless 会触发 onresult 事件。该事件给出一个 SpeechRecognitionEvent 对象，其中包含语音识别的结果。如果语音识别成功，那么 results 属性将会包含语音识别结果文字。
sr.onresult = (e) => {
console.log(e.results[0][0].transcript);
};onerror
当识别出现问题时， speechless 会触发 onerror 事件。该事件传递一个 ErrorEvent 对象，其中包含错误的描述。
sr.onerror = (e) => {
console.error(e.error);
};onend
当语音输入结束时， speechless 会触发 onend 事件。该事件会在录制结束后的短暂时间内触发。
sr.onend = () => {
console.log('录音结束。');
};示例代码
下面是一个完整的实例代码：
-- -------------------- ---- ------- ------ - ----------------- - ---- ------------- ----- -- - --- ------------------- ----- -------- ----------- ----- --------------- ----- ---------------- -- --- ----------- - --- -- - ---------------------------------------- -- ---------- - --- -- - ----------------------- -- -------- - -- -- - --------------------- -- -----------
总结
通过使用 speechless，我们可以轻松地在前端项目中添加语音输入功能，为用户带来更好的交互体验。上述教程中，我们介绍了 speechless 的用法，以及如何构造 API、选项对象和处理事件。如果你需要实现语音输入功能， speechless 会是一个非常不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600670a08ccae46eb111f079