SpeechKITT 是一个基于 Web Speech API 的 JavaScript 库，可以帮助开发者快速添加语音命令识别功能到网站上。它是一个轻量级的 npm 包，并且易于使用和定制，适合初学者和专业人士。
SpeechKITT 安装和引入
首先，我们需要在项目中安装 SpeechKITT。通过以下命令行来安装：
npm install speechkitt --save-dev
接着，在 HTML 文件中引入 SpeechKITT 库和其依赖的 CSS 文件：
<head> <link rel="stylesheet" href="/path/to/speechkitt.min.css"> <script src="/path/to/speechkitt.min.js"></script> </head>
SpeechKITT 基本用法
下面，我们来看一下如何使用 SpeechKITT 添加语音命令识别功能。在页面加载完成后，调用 window.SpeechKITT 对象的 setInstructionsText 方法设置提示文本，然后通过 recognize 方法启动语音命令识别：
// 设置提示文本
window.SpeechKITT.setInstructionsText('Say something');
// 启动语音命令识别
window.SpeechKITT.recongize();以上代码将会在页面右下角显示一个语音识别按钮，点击按钮或说出指定的关键词即可触发相应的事件。
SpeechKITT 高级用法
除了基本用法外，SpeechKITT 还有一些高级用法可以让我们更加灵活地配置和使用。
自定义语音命令
我们可以通过 addCommand 方法来添加自定义的语音命令，例如：
// 添加自定义语音命令
window.SpeechKITT.addCommand({
voiceCommands: ['open *'], // 关键词
callback: function() {
console.log('Open something');
}
});以上代码将会在语音命令中添加一个关键词 "open"，并在触发时执行回调函数。
配置界面样式
SpeechKITT 支持自定义配置界面样式，我们可以通过 setStylesheet 方法来设置样式表：
// 设置样式表
window.SpeechKITT.setStylesheet('/path/to/custom-stylesheet.css');多语言支持
如果需要支持多种语言，可以在引入 SpeechKITT 库时指定语言参数：
<head> <link rel="stylesheet" href="/path/to/speechkitt.min.css"> <script src="/path/to/speechkitt.min.js" data-lang="zh-cn"></script> </head>
以上代码将会以中文（简体）作为语言显示提示信息和按钮文字。
示例代码
最后，附上一个完整的示例代码，展示了如何使用 SpeechKITT 添加语音命令识别功能：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ------------
----- ---------------- -----------------------------------
------- ------------------------------------------
--------
------------- - ---------- -
-- ------
------------------------------------------ ------------
-- ---------
------------------------------
-------------- ------ ---- -- ---
--------- ---------- -
----------------- ------------
-
---
-- --------
------------------------------
-
---------
-------
------
-------------- ---------
-------- --- ---------- ---- -- --- ----- ---------- -- ------- --- ------------
-------
-------上述代码将会在页面中显示一个标题和一段说明文字，点击或说出指定的关键词即可触发
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37481