通过简单的JS代码，快速将AI语音助手集成到你的网站，实现实时语音交互。
原文标题：一段 JavaScript 代码，集成网站AI语音助手
原文作者：阿里云开发者
冷月清谈：
该方案的核心是AI智能体，它可以根据预设的工作流处理用户的语音请求。用户可以通过简单的界面操作，定制智能体的人设和功能，并接入私有知识库。
集成步骤如下：
1. 创建实时音视频通信应用（ARTC应用）。
2. 创建AI智能体，包括编排实时工作流和创建智能体本身。
3. 通过函数计算部署应用。
4. 在网页中嵌入提供的JavaScript代码，配置参数即可。
此外，该方案还支持移动端扫码访问，并提供个性化定制和知识库接入等功能。
怜星夜思：
2、除了文中提到的功能，还有什么其他的应用场景？比如能不能结合AR/VR？
3、接入私有知识库的功能，具体是怎么实现的？需要自己搭建知识库吗？
原文内容
阿里妹导读
根据本教程，只需通过白屏化的界面操作，即可快速构建一个专属的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 智能体的实时音视频通话。
整体按以下步骤运行：
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智能体
实时工作流是一种预先定义的流程模板，用于自动化处理 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 应用，并进行配置接入。
点击阅读原文，体验与 AI 智能体进行实时语音通话📱