专栏名称: 阿里开发者
阿里巴巴官方技术号,关于阿里的技术创新均将呈现于此
目录
相关文章推荐
白鲸出海  ·  必应伪装成谷歌搜索挽留用户,Bluesky用 ... ·  14 小时前  
阿里开发者  ·  开发同学如何理解业务? ·  昨天  
阿里开发者  ·  一段 JavaScript ... ·  昨天  
白鲸出海  ·  阿里入局AI眼镜,微软推出能自主操作Wind ... ·  4 天前  
阿里开发者  ·  全能增强!云原生应用网关进阶 ·  4 天前  
51好读  ›  专栏  ›  阿里开发者

一段 JavaScript 代码,集成网站AI语音助手

阿里开发者  · 公众号  · 科技公司  · 2025-01-06 18:29

正文

阿里妹导读


根据本教程,只需通过白屏化的界面操作,即可快速构建一个专属的AI智能体。

一、引言

添加一段 JavaScript 代码,就能轻松将 AI 语音助手集成到现有网站?

根据本文的教程,只需通过白屏化的界面操作,即可快速构建一个专属的AI智能体,并通过视频云 ARTC 网络与终端用户进行实时交互,从而获得实时语音通话 AI 智能体,拥有即时、自然的 AI 语音交互体验。

为什么选择使用 AI 实时语音互动?

1、超拟人化体验:

  • 延时仅 1.5 秒,语音交互更流畅。

  • 支持智能环境音消除、智能语义识别、断句优化、高拟真音色与数字人形象。

2、灵活的智能体编排:

  • 控制台支持白屏化操作,轻松集成 AI 组件(ASR/TTS/数字人/LLM…)。

  • 快速构建企业专属云上 AI 智能体。

3、开放的 AI 生态:

  • 内置阿里百炼平台 AI 能力,支持接入第三方 AI 插件及客户自研模型。

4、高质量低延时通话:

  • 依托 ARTC 全球节点和 QoS 策略,保障音视频通话质量,覆盖全球用户需求。

该助手还支持移动端扫码快速访问H5页面上的AI语音助手、支持定制智能体的人设,接入个人的私有知识库等功能,提供更加个性化和专业的服务。

点击文末“阅读原文”,深入了解方案详情,还可参与活动赢取精美礼品!

打造高效 AI 语音交互,从这里开始!

二、整体架构

AI 实时互动是用户与 AI 的端到端交互,用户通过终端发起与云端 AI 智能体的实时音视频通话。

整体按以下步骤运行:

1、用户发起音视频通话请求。
2、AI 智能体接收音视频输入,启动工作流处理用户请求。
3、AI 智能体生成音视频响应流,通过 ARTC 网络推送给用户终端。

4、用户接收并播放响应流,与 AI 智能体完成自然互动。

AI 智能体是本方案的核心组件之一,能够在云端模拟高度拟真的用户交互。用户可以根据需求自行创建智能体。通过灵活的插件式和拖拽式方式,用户可以编排各个 AI 组件,如语音转文字、大语言模型、语音合成和自研向量数据库等,从而实现 AI 智能体的实时工作流。实时音视频通信技术(ARTC)为用户与AI智能体之间的音频通话提供了高可用、高品质、超低延时的保障。

AI 智能体接收到用户的音视频输入后,开始运转工作流,输出AI响应结果的音视频流并推送到 ARTC 网络,用户可以订阅该音视频流进行播放,从而完成用户与 AI 智能体的对话。智能媒体服务 IMS 用来创建 AI 智能体和实时工作流,实时音视频 ARTC 用来创建实时音视频应用,提供 AI 智能体和用户的实时音视频通话能力。当前方案中 Web 服务通过函数计算FC进行部署。

技术架构核心模块

  • 智能媒体服务(IMS): 用于创建 AI 智能体及工作流。

  • 实时音视频(ARTC): 提供全球 3200+ 节点支持,实现高质量低延时的实时音视频通信能力。

  • 函数计算(FC): 负责 Web 服务的轻量化部署。

技术总体架构图:

三、体验教程


1.创建实时音视频通信应用

实时音视频 ARTC 是智能体和用户之间建立起实时音频通信的基础,实现 AI 实时互动需要准备一个 ARTC 应用

2.创建AI智能体

(1)编排实时工作流 

实时工作流是一种预先定义的流程模板,用于自动化处理 ARTC 音频流。支持创建语音通话并且预设了多种功能节点,包括语音转文字 (STT)、文字转语音 (TTS)、文生文大语言模型(LLM)等。

(2)创建智能体

AI 智能体是在 AI 实时互动解决方案中定义的高仿真用户,用户可以根据自身需求创建智能体,并将其集成到自己的应用中,使其能够按照既定工作流程在实时音频环境中运行,从而实现实时音频交互功能。

3.通过函数计算部署应用

4.应用体验

(1)实时语音对话

  1. 单击拨打按钮,即可开始与智能体对话。

  1. 浏览器弹窗请求使用麦克风,点击访问该网站时允许。

  1. 用户可以与智能体进行实时语音对话,页面上会同步展示当前对话的文字信息,以便用户查阅对话内容。

  1. 单击右上角的,可以开启/关闭智能打断,以及选择切换音色。

(2)如何在已有网站中快速集成 AI 语音助手

  1. 已经拥有网站和域名,并且部署了SSL证书,可以在需要集成AI语音助手的网页中通过嵌入一段JavaScript代码来实现相应的功能。

  2. 请复制并粘贴以下代码段到您的网页代码中相应的位置。

       
"root">

       
             new ARTCAICallUI({        userId: 'id',                                  root: document.getElementById('root'),          appServer: 'https://',                    agentType: 0,                              userToken: 'token'                          }).render();    

参数说明:

  1. userId:字符串类型,按照业务需要传入,不能为空。

  2. root:页面渲染到的节点,画面完整填充整个区域。

  3. appServer:AI实时语音互动应用服务地址,当前即为函数计算 FC 中的访问域名。

  4. agentType:通话类型界面 0:语音通话,1:数字人通话,2:视频理解通话。

  5. userToken:用于应用鉴权,如果应用场景不需要鉴权,可以不传递此参数,但如果传递,则其值不能为空字符串。

(3)如何在移动端快速集成 AI 语音助手

  1. 当前DEMO提供了移动端扫码体验,支持使用微信/钉钉扫码,或复制链接后在手机浏览器中打开。

  1. 在移动端浏览器打开后,点击显示详细信息。

  1. 在展开的详细信息中,点击访问此网站。

  1. 接下来,即可在移动端体验AI实时语音对话。

(4)个性化定制智能体人设

可以修改现有的工作流模板,预设不同的场景和智能体人设,从而实现个性化定制,优化体验。

(5)接入私有知识库

如果希望智能体增强某些领域的专业知识,可以通过百炼平台创建知识库和 RAG 应用,并进行配置接入。

点击阅读原文,体验与 AI 智能体进行实时语音通话📱