一、引言
添加一段 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）实时语音对话
- 单击拨打按钮，即可开始与智能体对话。
- 浏览器弹窗请求使用麦克风，点击访问该网站时允许。
- 用户可以与智能体进行实时语音对话，页面上会同步展示当前对话的文字信息，以便用户查阅对话内容。
- 单击右上角的
，可以开启/关闭智能打断，以及选择切换音色。
（2）如何在已有网站中快速集成 AI 语音助手
- 已经拥有网站和域名，并且部署了SSL证书，可以在需要集成AI语音助手的网页中通过嵌入一段JavaScript代码来实现相应的功能。
- 请复制并粘贴以下代码段到您的网页代码中相应的位置。
<!-- 创建一个用于渲染 ARTC AI Call UI 的容器 --> <div id="root"></div> <!-- 引入 ARTC AI Call UI 的 JavaScript 文件 --> <script src="https://g.alicdn.com/apsara-media-aui/amaui-web-aicall/1.6.2/aicall-ui.js"></script> <!-- 初始化并渲染 ARTC AI Call UI --> <script> new ARTCAICallUI({ userId: 'id', root: document.getElementById('root'), appServer: 'https://<url>', agentType: 0, userToken: 'token' }).render(); </script>
参数说明：
- userId：字符串类型，按照业务需要传入，不能为空。
- root：页面渲染到的节点，画面完整填充整个区域。
- appServer：AI实时语音互动应用服务地址，当前即为函数计算 FC 中的访问域名。
- agentType：通话类型界面 0:语音通话，1:数字人通话，2:视频理解通话。
- userToken：用于应用鉴权，如果应用场景不需要鉴权，可以不传递此参数，但如果传递，则其值不能为空字符串。
（3）如何在移动端快速集成 AI 语音助手
- 当前DEMO提供了移动端扫码体验，支持使用微信/钉钉扫码，或复制链接后在手机浏览器中打开。
- 在移动端浏览器打开后，点击显示详细信息。
- 在展开的详细信息中，点击访问此网站。
- 接下来，即可在移动端体验AI实时语音对话。
（4）个性化定制智能体人设
可以修改现有的工作流模板，预设不同的场景和智能体人设，从而实现个性化定制，优化体验。
（5）接入私有知识库
如果希望智能体增强某些领域的专业知识，可以通过百炼平台创建知识库和 RAG 应用，并进行配置接入。
来源 | 阿里云开发者公众号
