注意： 本教程需要一定的前端基础知识，包括但不限于 JavaScript、HTML、CSS、Node.js 等。
1. 前言
在前端开发中，语音识别技术越来越受到关注和重视。为此，有许多 npm 包提供了相应的 API 和 SDK，其中 speech-ui-kitt 就是一款优秀的语音识别 UI 库。它为开发者提供了开箱即用的语音识别能力，可快速集成到项目中，实现语音交互。
在本教程中，我们将了解 speech-ui-kitt 的使用方法，并通过示例代码演示如何将其集成到前端项目中。
2. 安装 speech-ui-kitt
在开始之前，我们需要先安装 speech-ui-kitt。在命令行中输入以下命令即可安装：
--- ------- -------------- ------
3. 创建 HTML 页面
首先，我们需要创建一个 HTML 页面作为示例。在项目目录下，创建一个名为 index.html 的文件，并输入以下内容：
--------- -----
----- ----------
------
----- ----------------
------------- -- ---- ------------
----- ---------------- ---------------------------------------------------------------------------
-------
------
---- ---------------
------- ----------------------------
------- ---------------------------
------
------- ----------------------------------------------------------------------------------
------- -----------------------
-------
-------上述 HTML 代码中：
speech-ui-kitt.css和speech-ui-kitt.js是 speech-ui-kitt 的 css 和 js 文件，我们需要在页面中引入这两个文件。- 页面中包含一个容器
#container和两个按钮#start-btn和#stop-btn。
4. 编写 JS 代码
接下来，我们将编写 JavaScript 代码，将 speech-ui-kitt 的语音识别功能添加到页面中的按钮中。
在项目目录下，创建一个名为 main.js 的文件，并输入以下内容：
-- --- --------------
----- ------------ - ----------------------------------
----- ------------------- - -------------------------------------------------------------
----- ------------ - --- --------------
-------- --------------------
------- -------- -- ----- ------
-------- ----------------- -- ------------
--------- -------- -- ------------
---------- --------- -- --------
---
-- ----------
-------------------------------------------------------------- -- -- -
---------------------
---
-- ----------
------------------------------------------------------------- -- -- -
--------------------
---
-- --------
-------- ------------------ -
---------------------
-上述 JavaScript 代码中：
- 我们使用
require('speech-ui-kitt').default和require('speech-ui-kitt/lib/speech-ui-core-service').default导入 speech-ui-kitt 和 speech-ui-core-service 两个模块，分别对应整个 speech-ui-kitt 库和其核心识别服务。 - 在初始化
SpeechUIKitt对象时，我们需要传入一些参数：service参数设置为speechUICoreService，即识别服务的核心模块；apiKey参数填写自己的 apiKey；grammar参数设置为builtin:search，表示用于识别的语法类型；language参数设置为zh-CN，表示识别语言为中文。
- 在页面中，我们将两个按钮
#start-btn和#stop-btn与start()和stop()方法绑定，这样当用户点击按钮时，speech-ui-kitt 就会开始或停止录音。 - 当 speech-ui-kitt 识别到用户输入的语音时，会调用
onResults()方法，将识别结果传入其中并输出到控制台。
5. 运行示例代码
现在，我们已经完成了对 speech-ui-kitt 的集成，可以运行示例代码来测试它是否正常工作了。
在命令行中输入以下命令，启动开发服务器：
--- ------------------
在浏览器中访问 http://localhost:8080，点击页面上的按钮，可以听到计算机录制您的语音，并进行简单的搜索模型分析。
6. 总结
本文介绍了如何使用 npm 包 speech-ui-kitt 实现前端语音识别，包括安装、创建 HTML 页面、编写 JavaScript 代码等内容。我们通过示例代码演示了如何集成 speech-ui-kitt 到项目中，并实现了简单的语音交互功能。
speech-ui-kitt 提供了简单易用的 API，能够快速集成到前端项目中，是一款推荐使用的语音识别 UI 库。如有需要，可以通过官方文档进一步了解其更多功能和细节。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006709f8ccae46eb111f056