数字人组件
约 935 字大约 3 分钟
2026-04-05
组件介绍
数字人组件是一款基于 Web Speech API 和 WebGL (Three.js) 技术的智能播报组件,支持文字转语音播报配合数字人形象展示,并支持远程 WebSocket 控制。

功能特性
- 数字人形象 - 支持多种数字人形象选择
- 语音播报 - 基于 Web Speech API 实现文字转语音
- 字幕显示 - 支持自定义字幕框样式
- 远程控制 - 支持 WebSocket 远程控制数字人播报
- 多种语音 - 支持多种中文语音选择
- 语速/音量/音调 - 可调节语音参数
属性配置
基础配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| show | Boolean | false | 是否显示数字人 |
| loop | Boolean | false | 播报结束后是否循环播放 |
| atMountStart | Boolean | false | 页面加载时是否自动播放 |
| text | String | "" | 要播报的文案内容 |
尺寸配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| width | Number | 400 | 数字人区域宽度 |
| height | Number | 400 | 数字人区域高度 |
| left | Number | -100 | 相对于图标的水平偏移 |
| top | Number | 10 | 相对于图标的垂直偏移 |
语音配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| voice | String | "" | 选择的语音(语音名称) |
| rate | Number | 1.0 | 语速(0-10,1为正常) |
| volume | Number | 1.0 | 音量(0-1) |
| pitch | Number | 1.0 | 音调(0-2,1为正常) |
字幕框配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| subtitle | Boolean | false | 是否显示字幕框 |
| subtitleWidth | Number | 300 | 字幕框宽度 |
| subtitleHeight | Number | 100 | 字幕框高度 |
| backgroundColor | String | "#ffffff" | 字幕框背景颜色 |
| color | String | "#000000" | 字幕文字颜色 |
| borderColor | String | "#000000" | 字幕框边框颜色 |
| fontSize | Number | 16 | 字幕字体大小 |
远程控制配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| socket | Boolean | false | 是否启用 WebSocket 远程控制 |
远程控制
启用远程控制后,数字人组件会连接 WebSocket 服务,可以接收外部控制命令来实现远程播报。
说明
- api 地址: http://onetwin.cn/api/v1/socket/pushMessage
- post 请求
控制消息格式
注意
- text、show为必填字段
- 最好是预先配置好相关参数,远程控制播放文字体验最佳。
{
"kanbanId": "xxx",
"message": {
"type": "digitalHumanControl",
"payload": {
"text": "这里输入您想要的播报内容,数字人会直接输出", // 必填
"show": true, // 必填
"loop": false,
"rate": 1.0,
"volume": 1.0,
"pitch": 1.0,
"voice": "Microsoft YaHei Online (Natural) - Chinese (Mainland)",
"subtitle": false,
"subtitleWidth": 300,
"subtitleHeight": 100,
"backgroundColor": "#ffffff",
"color": "#000000",
"borderColor": "#000000",
"fontSize": 16,
"width": 400,
"height": 400,
"left": 10,
"top": -100
}
}
}可控制字段说明
| 字段 | 类型 | 说明 |
|---|---|---|
| text | String | 播报文案 |
| show | Boolean | 是否显示(true 播放,false 停止) |
| loop | Boolean | 是否循环播放 |
| rate | Number | 语速 |
| volume | Number | 音量 |
| pitch | Number | 音调 |
| voice | String | 语音名称 |
| subtitle | Boolean | 是否显示字幕 |
| subtitleWidth | Number | 字幕框宽度 |
| subtitleHeight | Number | 字幕框高度 |
| backgroundColor | String | 字幕背景色 |
| color | String | 字幕文字颜色 |
| borderColor | String | 字幕边框颜色 |
| fontSize | Number | 字幕字体大小 |
| width | Number | 数字人区域宽度 |
| height | Number | 数字人区域高度 |
| left | Number | 水平偏移 |
| top | Number | 垂直偏移 |
使用示例
基础使用
- 在组件列表中找到"数字人"组件
- 拖拽到画布中
- 选择数字人形象
- 填写播报文案
- 调整语音参数(语速、音量、音调)
- 预览即可看到效果
远程控制使用
- 在属性面板中开启"启用远程控制"开关
- 配置 WebSocket 服务地址
- 通过 WebSocket 发送控制消息即可远程控制数字人播报
提示
- 首次播放需要用户交互(点击页面)以激活音频上下文
- 远程控制消息中的
show: true会立即触发播报 show: false会停止当前播报并隐藏数字人
