有言数字人API接入与网页集成教程

3、确保该容器父级元素未设置overflow: hidden或transform等可能裁剪渲染内容的CSS属性。

三、配置并启动数字人实例

通过SDK提供的DigitalHuman.init()方法传入必要参数，完成数字人模型加载与通信通道建立。该过程依赖HTTPS协议，且页面必须处于安全上下文（即通过https://或localhost访问）。

1、编写初始化代码，传入containerId、digitalHumanId、accessToken及region（如"cn-north-1"）。

2、设置onReady回调函数，在数字人准备就绪后触发，此时可调用playText()或playAudio()播放内容。

3、调用init()后，SDK自动建立WebSocket长连接，用于接收服务端下发的动画帧与语音指令，连接失败时会触发onError回调并返回错误码。

四、实现文本驱动对话与事件监听

数字人支持通过文本输入触发语音播报与口型同步，同时可监听用户交互事件（如点击、语音识别结果、播放完成），构建双向交互流程。所有文本内容需经UTF-8编码，长度限制为500字符以内。

1、调用playText("你好，欢迎来到我们的网站")启动数字人播报，SDK自动进行TTS合成与动作驱动。

2、绑定onPlayEnd事件监听器，在每次播报结束后执行下一步逻辑，例如显示FAQ按钮或切换话题。

3、若启用语音识别功能，需额外配置enableASR: true并在onAsrResult中处理识别文本，识别结果仅在用户主动点击麦克风图标后开始采集。

五、处理跨域与HTTPS限制

有言数字人服务强制要求前端页面运行于HTTPS协议下，且所有资源请求均受浏览器同源策略约束。若页面部署在非标准端口或子域，需显式配置CORS白名单，否则将出现媒体流加载失败或WebSocket连接被拒绝。

1、确认当前网页URL以https://开头，http://127.0.0.1 或 http://localhost 可豁免HTTPS检查。

2、在有言开放平台“应用设置”中，将当前站点完整域名（含端口，如https://example.com:8080）添加至“授权域名列表”。

3、避免在iframe中嵌入数字人组件，除非父页面与子页面同源，否则postMessage通信将被浏览器拦截。

理论要掌握，实操不能落！以上关于《有言数字人API接入与网页集成教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！