glm-4-voice-chat

v1.0.0

Published

a month ago

GLM-4 语音聊天 - 完整独立可移植版本

0High
0Medium
0Low

ircocos

voice chat glm-4 ai speech

📖 GLM-4 语音聊天助手 - 使用说明书

📦 包含内容

portable-dist/
├── index.html              # 主页面（即开即用）
├── app.js                  # 核心应用逻辑（无依赖）
├── README.md               # 这个文件
├── examples/               # 集成示例
│   ├── iframe-embed.html   # iframe 方式集成
│   ├── standalone.html     # 独立 HTML 方式
│   └── react-example.tsx   # React 项目集成
└── assets/                 # 资源文件夹（可选）

🚀 快速开始

方式 1: 直接打开（最简单）

用浏览器打开 index.html 文件
点击右下角 ⚙️ 按钮
输入你的 GLM-4 API 密钥
长按 🎙️ 按钮开始说话

✅ 完全无需 Node.js、无需编译！

方式 2: 本地 Web 服务器运行

如果直接打开有跨域问题，使用本地服务器：

Python 3：

python -m http.server 8000
# 然后访问: http://localhost:8000

Python 2：

python -m SimpleHTTPServer 8000

Node.js 用户：

# 全局安装 http-server
npm install -g http-server
http-server

PHP 用户：

php -S localhost:8000

🔑 获取 API 密钥

第 1 步：注册账号

访问 https://open.bigmodel.cn，使用以下方式注册：

支付宝
企业邮箱
手机号

第 2 步：创建 API 密钥

登录后进入「API 密钥」页面
点击「创建 API 密钥」
复制生成的密钥（形如 glm-xxxxxxxxxxxxxxxxxxxx）

第 3 步：配置应用

打开 index.html
点击右下角 ⚙️ 按钮
粘贴你的 API 密钥
密钥会自动保存到本地 (localStorage)

💬 使用说明

基本操作

| 操作 | 说明 | |------|------| | 长按 🎙️ 按钮 | 开始录音 | | 松开 | 停止录音并发送 | | 点击 ⚙️ | 修改 API 密钥 |

长按时间要求

最少长按 0.5 秒 才能开始录音
按住少于 0.5 秒会收到提示
松开即发送，无需其他操作

录音指示

📻 正在录音 - 屏幕显示录音状态
⏳ 处理中 - AI 正在分析你的语音
🔊 播放 - AI 的回复语音自动播放

📲 集成到你的网站

方式 A: iframe 嵌入（推荐）

最简单的方式，无需修改现有代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的网站</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    
    <!-- 在右下角嵌入语音助手 -->
    <div style="position: fixed; bottom: 20px; right: 20px; z-index: 999;">
        <iframe 
            src="./portable-dist/index.html"
            width="450"
            height="600"
            frameborder="0"
            allow="microphone; speaker"
            style="border-radius: 12px; border: none;">
        </iframe>
    </div>

    <!-- 你的网页内容 -->
</body>
</html>

注意： 使用本地文件路径 ./portable-dist/ 或完整 URL

方式 B: 复制所有文件到你的项目

# 在你的项目根目录
cp -r portable-dist/* ./public/voice/

然后在 HTML 中：

<iframe src="/voice/index.html" width="450" height="600"></iframe>

方式 C: 上传到 CDN

将 portable-dist/ 目录上传到你的 CDN
在任何网页引用：

<iframe 
    src="https://your-cdn.com/voice/index.html"
    width="450" 
    height="600"
    allow="microphone; speaker">
</iframe>

🎨 自定义样式

修改颜色

编辑 index.html 中的 <style> 部分，修改渐变色：

/* 原始：紫色系 */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* 改为蓝色系 */
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);

/* 改为绿色系 */
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);

修改尺寸

在 index.html 容器中调整：

/* 修改最大宽度 */
max-width: 500px;  /* 改为 400px 或 600px */

/* 修改高度 */
height: 600px;  /* 改为 500px 或 700px */

修改文案

在 index.html 中修改：

<h1>🎤 语音聊天助手</h1>  <!-- 修改标题 -->
<p>长按按钮发送语音消息</p>  <!-- 修改说明 -->
<span>长按说话</span>  <!-- 修改按钮文案 -->

🔧 配置参数

编辑 app.js 中的 CONFIG 对象：

const CONFIG = {
    // API 相关
    apiKey: localStorage.getItem('glm_api_key') || '',
    apiUrl: 'https://open.bigmodel.cn/api/paas/v4/chat/completions',
    
    // 交互设置
    minHoldMs: 500,         // 最小长按时间（毫秒）
    minIntervalMs: 3000,    // 两次发送最小间隔
    timeoutMs: 30000,       // 请求超时时间
    
    // AI 行为
    systemPrompt: '你是一个友好、知识渊博的AI助手。请用简洁、自然的方式回答问题。',
    knowledgeBase: ''       // 可选：添加你的知识库内容
};

参数说明

| 参数 | 说明 | 默认值 | |------|------|--------| | minHoldMs | 长按多少毫秒后开始录音 | 500 | | minIntervalMs | 两条消息最少间隔 | 3000 | | timeoutMs | API 请求超时时间 | 30000 | | systemPrompt | AI 的系统提示词 | 见上文 | | knowledgeBase | 添加到知识库的内容 | 空 |

🌐 跨域配置

问题：在远程服务器上无法访问麦克风

原因： 浏览器安全限制，https 和本地 http://localhost 才允许访问麦克风。

解决方案

方案 A: 使用 HTTPS（推荐）

# Nginx 配置示例
server {
    listen 443 ssl;
    server_name yourdomain.com;
    
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    
    location /voice/ {
        alias /var/www/voice/;
    }
}

方案 B: 使用 localhost 开发

http-server -p 8000 --cors

然后访问 http://localhost:8000

方案 C: 后端代理 API

创建 proxy.js 代理 GLM API：

// Node.js + Express 示例
app.post('/api/voice', async (req, res) => {
    const response = await fetch('https://open.bigmodel.cn/api/...', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${process.env.GLM_API_KEY}`
        },
        body: JSON.stringify(req.body)
    });
    res.json(await response.json());
});

修改 app.js：

CONFIG.apiUrl = '/api/voice';  // 使用本地代理

📝 常见问题

Q1: 点击后没有反应？

检查浏览器是否允许麦克风权限
刷新页面重新尝试
检查控制台是否有错误信息（F12 打开开发者工具）

Q2: 显示"无法访问麦克风"？

检查麦克风是否被其他应用占用
在浏览器设置中允许此网站访问麦克风
尝试使用其他浏览器

Q3: 怎样保存所有对话记录？

A: 编辑 app.js，在 addUserMessage 和 addAIMessage 后添加保存代码：

function addUserMessage(text) {
    // ... 原有代码 ...
    localStorage.setItem('messages', JSON.stringify(STATE.messages));
}

Q4: 能否离线使用？

A: 不能。需要网络连接以调用 GLM-4 API。但 UI 本身完全离线可用。

Q5: 如何修改 AI 的回复风格？

A: 修改 app.js 中的 systemPrompt：

// 改为技术性回答
systemPrompt: '你是一个专业的技术顾问，提供准确的技术解答。'

// 改为友好的医疗顾问
systemPrompt: '你是一个同情心强的健康顾问，提供基础的健康建议。'

Q6: 支持哪些浏览器？

✅ Chrome 80+
✅ Firefox 79+
✅ Safari 14.1+
✅ Edge 80+
❌ IE（不支持）

Q7: 音频格式是什么？

A: WAV 格式，PCM 编码，16-bit，采样率由浏览器决定（通常 48kHz）

📊 文件大小

| 文件 | 大小 | 说明 | |------|------|------| | index.html | ~8 KB | 页面和样式 | | app.js | ~15 KB | 应用逻辑 | | 总计 | ~23 KB | 极小的文件体积 |

无任何第三方依赖！ 不需要 Node.js、不需要 npm、不需要编译。

🔐 安全说明

API 密钥保护

本地存储
- 密钥存储在 localStorage 中
- 仅限当前浏览器访问
- 不会上传到任何服务器
建议做法
- 开发环境：直接在浏览器配置
- 生产环境：使用后端代理（见上文）
- 不要在代码中硬编码密钥

HTTPS 建议

在公网部署时必须使用 HTTPS，否则：

无法访问麦克风
密钥可能被中间人截获

📈 性能指标

首次加载：< 2 秒
录音启动：< 500 毫秒
API 响应：2-5 秒（取决于网络和 AI 处理）
内存占用：< 50 MB

🛠️ 故障排查

检查控制台错误

按 F12 打开开发者工具 → Console 标签，查看错误信息。

常见错误及解决

| 错误 | 原因 | 解决 | |------|------|------| | NotAllowedError | 麦克风权限被拒绝 | 允许浏览器访问麦克风 | | NetworkError | 网络连接失败 | 检查网络，检查 CORS | | NotFoundError | 没有麦克风设备 | 检查麦克风硬件 | | AbortError | 麦克风被其他应用占用 | 关闭其他应用 |

📞 技术支持

获取帮助

查看本文档中的 常见问题 部分
检查浏览器控制台的错误信息
确认 API 密钥有效
检查网络连接

报告问题

需要帮助时，请提供：

浏览器类型和版本
操作系统
控制台错误信息（截图）
具体的重现步骤

📄 许可证

开源项目，可自由使用和修改。

📅 版本历史

v1.0.0 (2025-12-20)

✅ 完整的语音对话功能
✅ 长按交互设计
✅ 无任何外部依赖
✅ 即开即用

💡 进阶用法

与其他系统集成

示例 1：WordPress 插件

// wp-content/plugins/glm-voice/plugin.php
function enqueue_voice_chat() {
    wp_enqueue_script('glm-app', plugin_dir_url(__FILE__) . 'app.js');
    wp_enqueue_style('glm-style', plugin_dir_url(__FILE__) . 'index.html');
}
add_action('wp_enqueue_scripts', 'enqueue_voice_chat');

示例 2：Vue.js 项目

<template>
    <div class="voice-widget">
        <iframe 
            src="/voice/index.html"
            :key="refreshKey"
            @load="onLoad"
        ></iframe>
    </div>
</template>

<script>
export default {
    data() {
        return { refreshKey: 0 };
    }
}
</script>

示例 3：原生应用 + WebView

// Android WebView
WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setMediaPlaybackRequiresUserGesture(false);
webView.loadUrl("file:///android_asset/voice/index.html");

祝你使用愉快！🎉

如有问题，请检查本文档或联系技术支持。