【亲测免费】 annyang 语音识别库使用教程

2026-01-19 11:27:55作者：仰钰奇

项目介绍

annyang 是一个轻量级的 JavaScript 语音识别库，允许用户通过语音命令控制网站。它没有任何依赖，体积仅为 2 KB，并且可以免费使用和修改。annyang 支持多种浏览器，并且易于集成到任何网站中。

项目快速启动

安装

你可以通过以下方式在项目中引入 annyang：

<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>

基本使用

以下是一个简单的示例，展示如何使用 annyang 实现基本的语音识别功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>annyang 示例</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>
</head>
<body>
    <h1>试试说 "hello"</h1>
    <script>
        if (annyang) {
            // 定义一个命令
            const commands = {
                'hello': () => {
                    alert('Hello world!');
                }
            };
            // 添加命令到 annyang
            annyang.addCommands(commands);
            // 开始监听
            annyang.start();
        }
    </script>
</body>
</html>

应用案例和最佳实践

应用案例

智能家居控制：用户可以通过语音命令控制家中的智能设备，如灯光、空调等。
语音搜索：用户可以通过语音输入搜索内容，提高搜索效率。
游戏控制：在游戏中，用户可以通过语音命令进行角色移动、攻击等操作。

最佳实践

命令设计：设计简单明了的命令，避免复杂的语法结构，提高识别准确率。
错误处理：添加错误处理逻辑，当语音识别失败时，给予用户提示。
隐私保护：确保用户的语音数据不会被泄露，遵守相关隐私保护法规。

典型生态项目

Speech KITT

Speech KITT 是一个与 annyang 配合使用的图形界面库，可以方便地为用户提供开始/停止语音识别的界面，并显示当前状态。Speech KITT 提供了多种主题和自定义选项，帮助开发者创建友好的用户界面。

安装

<script src="//cdnjs.cloudflare.com/ajax/libs/SpeechKITT/0.3.0/speechkitt.min.js"></script>

使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Speech KITT 示例</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/SpeechKITT/0.3.0/speechkitt.min.js"></script>
</head>
<body>
    <h1>试试说 "hello"</h1>
    <script>
        if (annyang) {
            // 添加命令到 annyang
            annyang.addCommands({
                'hello': function() {
                    alert('Hello world!');
                }
            });
            // 告诉 KITT 使用 annyang
            SpeechKITT.annyang();
            // 定义一个样式表给 KITT
            SpeechKITT.setStylesheet('//cdnjs.cloudflare.com/ajax/libs/SpeechKITT/0.3.0/themes/flat.css');
        }
    </script>
</body>
</html>