# Virtual presenter / 虚拟主播交互演示

[在线操作](https://guhang2011.github.io/demos/virtual-host/) · [34 秒展示视频](../../assets/videos/virtual-host-showcase.mp4) · [22 秒控制流程](../../assets/videos/virtual-host-workflow.mp4)

## 展示内容

从本地“技能系统 / 丝路智链”项目的 `VirtualHost.vue` 提取小林角色的欢迎、展示、点头三种 SVG 姿态及 CSS 动画，重新制作独立的公开舞台和控制面板。无需账户、后端、摄像头或麦克风即可操作。

- 中文合成语音，双语讲稿；手势随章节切换。
- 暂停、重播、章节定位与进度拖动。
- 离开标签页时暂停播放；支持键盘与减少动作偏好。
- 从音频 PCM 计算每秒 24 个音量采样，驱动嘴部开合。**这是音量驱动，不是音素级口型同步。**

## 原理与取舍

`script.json` 保存章节起点、语音时长、双语文字和音量曲线。`studio.js` 以音频的 `currentTime` 为时间源，选择当前章节并更新 SVG、字幕与滑块。暂停会停止动画帧循环；重新播放通过请求序号处理过期播放状态。

没有逐词强制对齐，字幕按章节展示，语音间的停顿由音量曲线反映。三种角色姿态是在前端切换的确定性动画，不包含面部捕捉、Live2D 权重或写实数字人推理。视频由同一个公开演示页面逐帧录制，展示片混入相同配音，操作流程片无声并标注控制步骤。

## 运行

从网站仓库根目录运行 `python -m http.server 8765`，访问 `http://localhost:8765/demos/virtual-host/`。请通过 HTTP 访问，以便加载讲稿和 SVG 文件。语音文件已包含在仓库中，观看时不需要外部合成服务。

## 素材与边界

- 角色：既有本地项目的二维 SVG 组件；项目基于 MIT 许可的 vue-next-admin。原许可保留在 `THIRD-PARTY-LICENSE.txt`。公开舞台、时间控制和视频制作为本次整理。
- 声音：通过 Microsoft Edge TTS 的通用 `zh-CN-XiaoxiaoNeural` 声音生成，无真人录音和声音克隆；公开讲稿见 `script.json`。
- 商品：合成草原蜂蜜教学样品，没有真实交易、价格承诺、用户或订单数据。
- 这是一段工程展示，不能据此推断数字人模型效果、实时服务延迟或商业部署能力。

## 自学与项目心得

1. **统一时钟**：字幕、角色和进度以音频时钟为准，避免各自计时产生漂移。
2. **暂停是状态变化**：既要停止声音，也要停止角色动作、进度更新和过期异步结果。
3. **把展示与模型能力分开**：二维动画适合验证交互；写实数字人另需评估身份保持、遮挡、同步和渲染成本。
4. **公开可复查的材料**：同一讲稿、音频、源代码与视频便于检查；不能把教学数据解释为真实业务结果。

后续练习：逐词时间戳、更细粒度口型、低网速加载状态，以及浏览器和辅助技术兼容性。