KWS 客户端

本项目是一个基于 Web 技术的关键词识别 (Keyword Spotting, KWS) 客户端。它能够通过浏览器捕获用户的麦克风音频流，将其发送到指定的 WebSocket 服务器进行关键词识别，并将识别结果实时显示在网页上。

项目结构

kws-client/
├── index.html          # 主要的 HTML 文件，包含用户界面
├── index.js            # （当前未使用，可以删除）
├── kws.js              # 客户端的主要 JavaScript 逻辑，处理音频流和 WebSocket 通信
├── package.json        # 项目的依赖和配置信息
├── package-lock.json   # 锁定项目依赖的具体版本
├── styles.css          # 样式表文件，美化页面
├── wake_response.mp3   # 关键词识别成功后的提示音效
└── .gitignore          # (可选) 指定 Git 版本控制忽略的文件和目录

功能特性

• 实时音频捕获： 使用浏览器的 getUserMedia API 实时捕获用户的麦克风音频输入。
• WebSocket 通信： 通过 WebSocket 与服务器建立连接，实现双向通信。
• 关键词识别： 将捕获的音频数据发送到服务器进行关键词识别。
• 结果展示： 将服务器返回的识别结果（包括是否检测到关键词以及相关信息）实时显示在页面上，并向下滚动。
• 音频提示： 当检测到关键词时，播放 wake_response.mp3 提示音。
• 错误处理： 对 WebSocket 通信和音频播放过程中可能出现的错误进行了处理，并在页面上显示错误信息。

依赖

• parcel: 用于开发和构建项目的打包工具。
• parcel-plugin-static-files-copy: Parcel 插件，用于将静态文件复制到构建目录。
• buffer: 在浏览器环境中提供 Node.js 的 Buffer 类的支持。

使用步骤

1. 安装依赖：

   npm install

2. 启动开发服务器：

   npm run dev

   这将启动一个开发服务器，并在浏览器中打开应用。默认端口为 1234。你可以通过访问 http://localhost:1234 查看应用。

3. 构建项目：

   npm run build

   这将构建一个生产版本的项目，输出到 dist 目录。

4. 连接 WebSocket 服务器：

   确保你的 WebSocket 服务器运行在 ws://172.16.100.15:8005，或者在 kws.js 文件中修改 WEBSOCKET_URI 常量为你正确的服务器地址。

5. 开始识别：

   点击页面上的 "Connect and Start Listening" 按钮，开始监听麦克风输入并进行关键词识别。

注意事项

• WebSocket 服务器： 请确保你有一个可用的 WebSocket 服务器，并配置好正确的地址和端口。
• 浏览器兼容性： getUserMedia API 需要 HTTPS 环境才能正常工作（本地开发环境除外）。确保你的应用部署在 HTTPS 环境下，或者在开发过程中使用 localhost。
• 音频播放： 确保 wake_response.mp3 文件存在且可播放。
• 麦克风权限： 浏览器会请求麦克风权限，请允许访问。

待改进

• 代码优化： index.js 文件当前未使用，建议删除以保持代码整洁。
• 服务器端实现: 此项目目前只包含客户端代码，如果能提供服务器端的实现，将更加完善。
• 用户体验: 可以进一步优化用户界面和交互体验。