有言数字人如何通过API嵌入网页_有言数字人网页集成接口调用步骤【开发】

星夢妙者

发布时间：2025-12-15 22:45:03

461人浏览过

来源于php中文网

原创

需通过有言开放平台获取API密钥与数字人ID，引入SDK脚本并初始化容器，调用DigitalHuman.init()配置启动，实现文本驱动对话与事件监听，并确保HTTPS协议及跨域配置合规。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜

有言数字人如何通过api嵌入网页_有言数字人网页集成接口调用步骤【开发】

如果您希望在网页中嵌入有言数字人，需通过其提供的API接口完成集成。以下是调用有言数字人网页集成接口的具体步骤：

一、获取API密钥与数字人ID

调用有言数字人接口前，必须先在有言开放平台注册开发者账号并创建应用，以获得合法的访问凭证和目标数字人的唯一标识。该凭证用于后续所有请求的身份验证，数字人ID则决定页面中加载的具体形象与语音模型。

1、登录有言开放平台官网，进入“控制台”→“我的应用”页面。

2、点击“创建新应用”，填写应用名称与网站域名，提交后生成AppID与AppSecret。

3、在“数字人管理”中选择已配置好的数字人实例，复制其digitalHumanId值。

4、使用AppID与AppSecret调用鉴权接口获取临时accessToken，有效期为2小时，需在请求头中携带。

二、引入SDK脚本并初始化容器

有言提供轻量级JavaScript SDK，用于在网页中动态加载数字人交互组件。该脚本需在HTML文档中提前引入，并指定一个DOM容器作为数字人渲染区域，确保页面结构稳定且无遮挡。

1、在HTML的或底部添加SDK引用链接：。

2、在页面中插入一个具有唯一id的空

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

三、配置并启动数字人实例
通过SDK提供的DigitalHuman.init()方法传入必要参数，完成数字人模型加载与通信通道建立。该过程依赖HTTPS协议，且页面必须处于安全上下文（即通过https://或localhost访问）。
1、编写初始化代码，传入containerId、digitalHumanId、accessToken及region（如"cn-north-1"）。

							
								
								
									玄鲸Timeline
									一个AI驱动的历史时间线生成平台
								
								下载 
							
						
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通信将被浏览器拦截。