一、引言

随着 AI 技术的快速发展，数字人交互已经成为新一代用户体验的重要载体。本文介绍一款基于魔珐星云具身智能数字人平台的旅行顾问数字人应用——「小云」。该系统实现了全双工语音交互能力，用户可以通过语音与数字人实时互动，小云将以热情洋溢的方式，分享全球50+国家的旅行经验，帮你规划行程、推荐景点、挖掘美食。

---

二、系统技术架构

1. 核心技术栈选型

模块	选型方案	技术说明
数字人渲染	魔珐星云流式数字人 SDK	负责 3D 模型渲染、动作骨骼动画驱动及 TTS 流式音频对齐播报
大语言模型 (LLM)	通用大模型 API (兼容 OpenAI Responses 协议)	负责对话文本的流式生成、上下文逻辑状态维护与语义解析
语音识别 (ASR)	Web Speech API（浏览器原生）	基于浏览器原生语音识别能力，单次识别模式自动重启，稳定可靠
音频采集	WebAudio API	负责底层麦克风音频流捕获、VAD 音量阈值检测
客户端表现层	原生 HTML5 / CSS3 / Vanilla JS	规避重型框架的运行时开销，保障低延迟交互体验

2. 系统核心架构

系统采用状态机模式管理交互流程，支持7种交互状态的无缝切换：

• idle：初始等待状态，用户未启动交互
• listening：倾听状态，麦克风已激活，等待用户发言
• speaking：用户说话状态，正在进行语音识别
• thinking：思考状态，大模型正在生成回复
• talking：数字人播报状态，流式输出语音回复
• interrupt：打断状态，用户中途插话
• finish：对话结束状态

---

三、核心交互体验

1. 启动流程

系统采用用户主动触发的启动方式，避免页面加载时自动消耗资源：

用户点击"开始播放"按钮 → 加载配置(env.json) → 初始化数字人 → 进入倾听状态

2. 语音交互流程

1. 用户开口说话 → 浏览器语音识别实时转写 → 文本交给大模型
2. 大模型流式返回 → 数字人边播报边唇形同步 → 对话流同步显示
3. 用户可随时打断 → 系统切换到倾听状态 → 再次交互

3. 全双工打断机制

系统实现了完整的全双工打断能力：

• VAD 语音检测：实时监测用户音量变化，快速响应说话动作
• interactiveIdle 打断：数字人播报过程中可随时被用户语音打断
• TTS 队列清空：打断时立即清空未播放的语音队列，确保响应即时性

4. 快捷话题功能

系统内置8个快捷话题，用户可一键触达：

• 周末游推荐、云南攻略、亲子游、十大景点
• 海边度假、冬季旅行、美食之旅、出行清单

---

四、关键技术实现

1. 浏览器原生语音识别

系统采用 Web Speech API 实现语音识别，无需第三方服务：

const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
srInstance = new SR();
srInstance.lang = 'zh-CN';
srInstance.continuous = false;
srInstance.interimResults = false;

srInstance.onresult = (evt) => {
  const text = evt.results[evt.resultIndex][0].transcript.trim();
  if (text) {
    onSpeechResult(text);
    srInstance.stop();
  }
};

注意：浏览器原生语音识别需要通过 HTTPS 或 localhost 访问，且需授权麦克风权限。

2. 视觉优化方案

• 自定义背景图片：支持通过 imgs/image.png 设置数字人容器背景
• 数字人位置调整：通过 CSS transform: translateX(15%) 将数字人居中偏右显示
• 翡翠绿主题：统一的清新自然配色方案

3. 简洁回复控制

通过优化系统提示词，控制 AI 回复长度：

【重要】回答要简洁明了，控制在100字以内，不要冗长，直击要点

---

五、应用场景与总结

1. 应用场景

• 行程规划：根据天数、预算和偏好定制专属旅行方案
• 景点推荐：国内外热门目的地深度解析，小众秘境挖掘
• 亲子出行：适合家庭的景点和酒店推荐，安全又有趣
• 美食探店：各地特色美食推荐，跟着小云吃遍天下

2. 系统特点

• 低门槛：无需编程经验，一份配置文件即可部署
• 高质量：数字人形象清新活力，表达自然流畅，背景图片自定义
• 简洁高效：AI 回复精炼，100字以内直击要点，沟通更高效
• 全双工交互：支持随时打断，交互流畅自然
• 可扩展：可接入旅行 API 获取实时票价和天气信息

数字人SDK文档——xingyun3d.com/?utm_campaign=xiaoyun&utm_source=juzhen

---