AWS Lex 浏览器音频捕获项目教程

2024-09-10 23:44:35作者：侯霆垣

An example web application using the Lex JavaScript SDK to send and receive audio from the Lex PostContent API. Demonstrates how to capture an audio device, record audio, and convert the audio into a format that Lex will recognize, and play the response. All from a web browser.

项目地址：https://gitcode.com/gh_mirrors/aw/aws-lex-browser-audio-capture

1. 项目的目录结构及介绍

aws-lex-browser-audio-capture/
├── README.md
├── index.html
├── package.json
├── src/
│   ├── audioRecorder.js
│   ├── lexClient.js
│   └── utils.js
└── test/
    └── test.js

README.md: 项目的基本介绍和使用说明。
index.html: 项目的入口HTML文件，包含了页面的基本结构和JavaScript脚本的引用。
package.json: 项目的配置文件，包含了项目的依赖和脚本命令。
src/: 存放项目的主要源代码文件。
- audioRecorder.js: 负责音频的录制和处理。
- lexClient.js: 负责与Amazon Lex的通信。
- utils.js: 包含一些通用的工具函数。
test/: 存放项目的测试文件。
- test.js: 项目的测试脚本。

2. 项目的启动文件介绍

项目的启动文件是 index.html，它包含了页面的基本结构和JavaScript脚本的引用。以下是 index.html 文件的主要内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AWS Lex Browser Audio Capture</title>
</head>
<body>
    <h1>AWS Lex Browser Audio Capture</h1>
    <button id="startRecording">Start Recording</button>
    <button id="stopRecording">Stop Recording</button>
    <script src="src/audioRecorder.js"></script>
    <script src="src/lexClient.js"></script>
    <script src="src/utils.js"></script>
    <script>
        // 页面加载完成后执行的初始化代码
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化音频录制和Lex客户端
            const audioRecorder = new AudioRecorder();
            const lexClient = new LexClient();

            // 开始录制按钮点击事件
            document.getElementById('startRecording').addEventListener('click', function() {
                audioRecorder.startRecording();
            });

            // 停止录制按钮点击事件
            document.getElementById('stopRecording').addEventListener('click', function() {
                audioRecorder.stopRecording().then(audioData => {
                    lexClient.sendAudioToLex(audioData);
                });
            });
        });
    </script>
</body>
</html>

3. 项目的配置文件介绍

项目的配置文件是 package.json，它包含了项目的依赖和脚本命令。以下是 package.json 文件的主要内容：

{
  "name": "aws-lex-browser-audio-capture",
  "version": "1.0.0",
  "description": "An example web application using the Lex JavaScript SDK to send and receive audio from the Lex PostContent API",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "AWS Labs",
  "license": "MIT",
  "dependencies": {
    "aws-sdk": "^2.814.0"
  }
}

name: 项目的名称。
version: 项目的版本号。
description: 项目的描述。
main: 项目的入口文件。
scripts: 包含项目的脚本命令，例如测试命令。
author: 项目的作者。
license: 项目的开源许可证。
dependencies: 项目的依赖包，例如 aws-sdk。