数字人组件

约 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 会停止当前播报并隐藏数字人