iframe 集成示例 - GLM-4 语音聊天

✨ 功能特性

完整的语音对话功能
长按交互设计，用户体验佳
无任何外部依赖，极轻量
即开即用，无需编译
支持自定义样式和配置
完全隐私，数据不上传

🚀 快速开始

最简单的方式，在你的 HTML 中添加 iframe：

<iframe 
    src="./portable-dist/index.html"
    width="450"
    height="600"
    frameborder="0"
    allow="microphone; speaker"
    style="border-radius: 12px; border: none;">
</iframe>

就这么简单！语音助手会自动在右下角显示。

📦 文件结构

portable-dist/
├── index.html      # 主页面（即开即用）
├── app.js          # 应用逻辑（无依赖）
├── README.md       # 详细文档
└── examples/       # 更多示例

⚙️ 配置 API 密钥

第一次使用时，点击右下角 ⚙️ 按钮配置：

访问 https://open.bigmodel.cn
注册并登录账号
创建 API 密钥
复制密钥到应用中

                    💡 提示： API 密钥会自动保存到本地浏览器，下次无需重新输入。
                

💻 不同场景的集成方式

方式 1: 固定位置浮窗

<!-- 右下角固定 -->
<div style="position: fixed;
           bottom: 20px;
           right: 20px;
           z-index: 999;">
    <iframe src="./portable-dist/index.html"
            width="450" height="600"
            allow="microphone; speaker">
    </iframe>
</div>

方式 2: 侧边栏内嵌

<div style="display: grid;
           grid-template-columns: 1fr 450px;">
    <main>主内容</main>
    <aside>
        <iframe src="./portable-dist/index.html"
                width="100%" height="100%"
                allow="microphone; speaker">
        </iframe>
    </aside>
</div>

方式 3: 模态对话框

<div id="modal" 
     style="position: fixed; 
           top: 50%; left: 50%;
           transform: translate(-50%, -50%);
           z-index: 999;">
    <iframe src="./portable-dist/index.html"
            width="450" height="600"
            allow="microphone; speaker">
    </iframe>
</div>

方式 4: 页面底部栏

<div style="position: fixed;
           bottom: 0; left: 0; right: 0;
           height: 600px;
           z-index: 999;">
    <iframe src="./portable-dist/index.html"
            width="100%" height="100%"
            allow="microphone; speaker">
    </iframe>
</div>

🔗 iframe 属性说明

allow="microphone; speaker" - 允许访问麦克风和扬声器

frameborder="0" - 隐藏边框

width / height - 推荐 450×600 像素

                    ⚠️ 重要： 如果在 HTTPS 网站上使用，源 URL 也必须是 HTTPS。本地 http://localhost 可以正常工作。
                

📝 完整网页示例

这是一个完整的 HTML 网页示例，可以直接复制使用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网站</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; }
        header { background: #333; color: white; padding: 20px; }
        main { max-width: 1000px; margin: 20px auto; padding: 20px; }
    </style>
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
    </header>

    <main>
        <h2>网站内容</h2>
        <p>这里是你的网站内容...</p>
    </main>

    <!-- 在右下角添加语音助手 -->
    <div style="position: fixed;
               bottom: 20px;
               right: 20px;
               z-index: 999;
               width: 450px;
               height: 600px;">
        <iframe 
            src="./portable-dist/index.html"
            width="100%"
            height="100%"
            frameborder="0"
            allow="microphone; speaker"
            style="border-radius: 12px;
                   box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
        </iframe>
    </div>
</body>
</html>

将 ./portable-dist/index.html 替换为你的实际路径即可。

❓ 常见问题

Q: 如何修改样式？

编辑 portable-dist/index.html 中的 <style> 部分即可修改颜色、大小等。

Q: 支持哪些浏览器？

Chrome 80+、Firefox 79+、Safari 14.1+、Edge 80+ 都可以。

Q: 如何保护 API 密钥？

开发环境可直接在浏览器配置。生产环境建议使用后端代理转发 API 请求，详见 README.md。

Q: 离线可以使用吗？

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

📚 相关资源

                    💪 就这么简单！ 只需几行 HTML 就能为你的网站添加 AI 语音助手。
                

🎤 GLM-4 语音聊天 - iframe 集成示例