一、引言

办了健身卡却不知道怎么练、跟着视频做动作总不标准、减脂增肌的饮食一头雾水……请私教费用高昂，自己摸索又容易走弯路甚至受伤。

本文介绍一款基于魔珐星云具身智能数字人平台的运动助手——「燃燃」AI 健身教练。用户可以通过语音与数字人实时互动，燃燃将以热情专业的方式，为你制定健身计划、指导动作要领、推荐营养方案，随时随地陪你开练。

---

二、系统技术架构

1. 核心技术栈选型

模块	选型方案	技术工程说明
3D 数字人渲染	魔珐星云数字人 SDK	负责 3D 数字人形象渲染、唇形同步及动作驱动
大语言模型 (LLM)	通用大模型 API (兼容 OpenAI Responses 协议)	负责对话文本的流式生成、健身计划制定与语义解析
语音识别 (ASR)	Web Speech API (Single-Shot 模式)	采用 continuous: false + interimResults: false 单次识别模式
语音合成 (TTS)	数字人 SDK 内置 TTS	流式音频输出与唇形同步播报
客户端表现层	原生 HTML5 / CSS3 / Vanilla JS	规避重型框架运行时开销，保障低延迟交互体验
音频检测	Web Audio API + VAD	实时麦克风音量检测与语音活动检测

2. 核心交互状态机设计

系统设计了 7 种交互状态，通过状态机管理实现无缝切换：

// 交互状态枚举定义
const AVATAR_STATE = {
    IDLE: 'idle',           // 待机状态
    LISTENING: 'listening', // 倾听状态
    SPEAKING: 'speaking',   // 说话状态
    THINKING: 'thinking',   // 思考状态
    READY: 'ready',         // 就绪状态
    ERROR: 'error',         // 错误状态
    LOADING: 'loading'      // 加载状态
};

状态徽章以不同颜色直观标识：红色（待机）、琥珀色（倾听）、深粉色（说话）、暗红色（思考）、绿色（就绪）、红色（错误）。

---

三、核心技术实现

1. Single-Shot ASR 语音识别机制

采用 Web Speech API 单次识别模式，每次识别完成后自动重启监听。配合三层防护机制：

• TTS 静音守卫：数字人播报时物理停止 ASR，避免识别到自身播报内容
• 回声过滤算法：将识别结果与最近一次 TTS 文本对比，过滤回声干扰
• 智能重启逻辑：仅在语音聊天进行中且非播报、非对话状态时才自动重启

// Single-Shot ASR 配置与启动逻辑
const recognition = new webkitSpeechRecognition();
recognition.continuous = false;      // 单次识别模式
recognition.interimResults = false;  // 不返回临时结果
recognition.lang = 'zh-CN';

recognition.onresult = (event) => {
    const transcript = event.results[0][0].transcript;
    handleUserInput(transcript);     // 处理识别结果
};

recognition.onend = () => {
    if (isVoiceChatting && !isAvatarSpeaking && !isChatting) {
        recognition.start();         // 智能重启监听
    }
};

2. 全双工打断机制

实现 VAD 语音检测 + interactiveIdle 打断 + TTS 队列清空，训练中随时可以插话提问：

// VAD 语音活动检测与打断逻辑
function startVoiceActivityDetection() {
    const analyser = audioContext.createAnalyser();
    analyser.fftSize = 256;
    const dataArray = new Uint8Array(analyser.frequencyBinCount);
    
    function detect() {
        analyser.getByteFrequencyData(dataArray);
        const volume = calculateAverageVolume(dataArray);
        
        if (volume > VAD_THRESHOLD && isAvatarSpeaking) {
            stopCurrentSpeech();     // 检测到用户说话，立即停止播报
            enterListeningState();   // 切换至倾听状态
        }
        requestAnimationFrame(detect);
    }
    detect();
}

3. 流式语音播报与唇形同步

大模型流式生成文本（SSE）→ 数字人边播报边唇形同步，响应速度极快：

// SSE 流式接收与 TTS 播报链路
const eventSource = new EventSource('/api/chat-stream');

eventSource.onmessage = (event) => {
    const chunk = JSON.parse(event.data);
    
    if (chunk.content) {
        avatarSpeak(chunk.content);  // 流式文本实时推送至数字人
        appendToChatPanel(chunk.content); // 同步显示到对话面板
    }
    
    if (chunk.isEnd) {
        eventSource.close();
        autoStartListening();        // 播报结束自动开启下一轮监听
    }
};

4. 延迟加载与生命周期管理

• 静默配置加载：页面打开时仅后台读取 env.json 配置，不展示加载动画
• 按需初始化：用户点击「开始训练」按钮后才启动数字人 SDK，展示加载动画与实时进度条
• 一键销毁重建：「结束训练」按钮销毁 SDK 释放资源，overlay 层显示「开始播放」按钮可一键重新初始化

// 延迟初始化与销毁逻辑
async function initAvatarSDK() {
    showLoadingAnimation();
    
    try {
        const config = await loadConfig('env.json');
        await AvatarSDK.init(config);
        enterReadyState();
    } catch (error) {
        enterErrorState(error);
    } finally {
        hideLoadingAnimation();
    }
}

function destroyAvatarSDK() {
    AvatarSDK.destroy();
    resetState();
}

5. 快捷话题引导系统

对话面板内嵌六个运动主题快捷按钮，覆盖新手计划、俯卧撑教学、拉伸指导、饮食建议、居家运动、深蹲技巧六大高频场景：

快捷话题	触发指令
新手计划	推荐一个适合新手的健身计划
俯卧撑教学	如何正确做俯卧撑
拉伸指导	跑步后如何拉伸
饮食建议	增肌和减脂怎么安排饮食
居家运动	在家就能做的运动有哪些
深蹲技巧	深蹲动作要领是什么

6. VAD 语音波形可视化

底部状态栏集成 7 段 VAD 波形条，实时反映麦克风音量水平：

<!-- VAD 波形可视化组件 -->
<div class="vad-waveform">
    <div class="bar" style="height: 20%"></div>
    <div class="bar" style="height: 45%"></div>
    <div class="bar" style="height: 70%"></div>
    <div class="bar" style="height: 90%"></div>
    <div class="bar" style="height: 60%"></div>
    <div class="bar" style="height: 35%"></div>
    <div class="bar" style="height: 15%"></div>
</div>

倾听状态显示绿色激活条，播报状态显示红色动态波形，为语音交互提供直观的视觉反馈。

---

四、典型坑点记录与解决方案

1. TTS 播报期间的误识别问题

• 现象描述：数字人播报时，ASR 识别到播报内容导致对话陷入循环。
• 原因分析：麦克风在 TTS 播放期间仍处于激活状态，识别到数字人播报的语音。
• 解决方案：在 avatarSpeak() 调用前物理停止 ASR 监听，播报结束后再重新启动。

2. 流式文本闭合信号丢失

• 现象描述：数字人播报中途突然停止，控制台抛出超时异常。
• 原因分析：流式文本发送完毕后未发送闭合标志，SDK 状态机进入等待状态超时。
• 解决方案：在流式文本数据分发完毕的结束回调中，必须追加显式闭合调用。

3. 页面加载时自动播放限制

• 现象描述：页面打开时数字人自动播放失败，浏览器提示"自动播放被阻止"。
• 原因分析：浏览器安全策略禁止页面自动播放音频，需要用户交互触发。
• 解决方案：采用延迟加载机制，点击「开始训练」按钮后才初始化 SDK 并播放。

---

五、系统架构的适用场景与技术局限

1. 适用工程场景

本方案所采用的"前端原生开发 + 低时延全双工语音交互"架构，在以下场景具备较高的技术适用性：

• 居家健身指导：无需器械和场地，在家就能获得专业的训练计划和动作指导。
• 健身新手入门：零基础用户的贴身教练，从俯卧撑到深蹲，手把手教学每个动作要领。
• 饮食营养规划：根据增肌或减脂目标，提供科学的饮食搭配建议和蛋白质摄入指导。
• 运动恢复指导：跑步后的拉伸放松、训练后的恢复方案，帮助避免运动损伤。

2. 技术局限与后续演进

• 运动数据追踪：当前系统暂未接入可穿戴设备数据，下一步计划集成心率、卡路里消耗等运动指标实时监测。
• 个性化训练档案：尚未实现训练记录与身体数据的持久化存储，后续将开发智能调整训练强度和方案的功能。
• 视频动作识别：当前仅提供语音指导，计划结合摄像头实时分析用户动作姿势，给出纠正建议。
• 训练打卡社区：未来将开发训练成果分享与打卡排行功能，激发运动动力。

---

重要说明

燃燃提供的是一般性的健身指导和营养建议。如果您有特殊的身体状况或运动损伤，建议在专业医生或物理治疗师的指导下进行训练。

立即体验

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