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

本文涉及的产品
函数计算FC,每月15万CU 3个月
简介: 根据本教程,只需通过白屏化的界面操作,即可快速构建一个专属的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 服务的轻量化部署。

技术总体架构图:

image.png

三、体验教程

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

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


2.创建AI智能体

(1)编排实时工作流

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

(2)创建智能体

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


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

4.应用体验

(1)实时语音对话

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

image.png

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

image.png

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

image.png

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

image.png

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

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

image.png

<!-- 创建一个用于渲染 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>

参数说明:

  1. userId:字符串类型,按照业务需要传入,不能为空。
  2. root:页面渲染到的节点,画面完整填充整个区域。
  3. appServer:AI实时语音互动应用服务地址,当前即为函数计算 FC 中的访问域名。
  4. agentType:通话类型界面 0:语音通话,1:数字人通话,2:视频理解通话。
  5. userToken:用于应用鉴权,如果应用场景不需要鉴权,可以不传递此参数,但如果传递,则其值不能为空字符串。

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

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

image.png

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

image.png

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

image.png

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

image.png

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

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

(5)接入私有知识库

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







来源  |  阿里云开发者公众号




相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
目录
打赏
0
4
4
1
2724
分享
相关文章
容器化AI模型的持续集成与持续交付(CI/CD):自动化模型更新与部署
在前几篇文章中,我们探讨了容器化AI模型的部署、监控、弹性伸缩及安全防护。为加速模型迭代以适应新数据和业务需求,需实现容器化AI模型的持续集成与持续交付(CI/CD)。CI/CD通过自动化构建、测试和部署流程,提高模型更新速度和质量,降低部署风险,增强团队协作。使用Jenkins和Kubernetes可构建高效CI/CD流水线,自动化模型开发和部署,确保环境一致性并提升整体效率。
Open-LLM-VTuber:宅男福音!开源AI老婆离线版上线,实时语音+Live2D互动还会脸红心跳
Open-LLM-VTuber 是一个开源的跨平台语音交互 AI 伴侣项目,支持实时语音对话、视觉感知和生动的 Live2D 动态形象,完全离线运行,保护用户隐私。
150 10
Open-LLM-VTuber:宅男福音!开源AI老婆离线版上线,实时语音+Live2D互动还会脸红心跳
用户说 | 零基础用通义灵码 AI 程序员开发个人笔记网站
通义灵码是一款基于通义大模型的智能编码辅助工具,支持自然语言生成代码、单元测试生成、代码注释生成等功能,兼容多种主流IDE和编程语言。对于零基础用户,只需通过自然语言描述需求,通义灵码即可自动生成代码,帮助快速开发个人笔记网站,极大简化开发流程,提升效率。
AI对话网站一键生成系统源码
可以添加进自己的工具箱,也可以嵌入自己博客的页面中,引流效果杠杠的,新拟态设计风格,有能力的大佬可以进行二开,仅提供学习,用户可输入网站名称、AI默认的开场白、AI头像昵称、AI网站中引流的你的网站等等内容,所有生成的网页全部保存到你的服务器上
71 27
AI对话网站一键生成系统源码
LangBot:无缝集成到QQ、微信等消息平台的AI聊天机器人平台
LangBot 是一个开源的多模态即时聊天机器人平台,支持多种即时通信平台和大语言模型,具备多模态交互、插件扩展和Web管理面板等功能。
668 14
LangBot:无缝集成到QQ、微信等消息平台的AI聊天机器人平台
FoloUp:比HR更懂岗位需求!开源语音面试平台爆火:1份岗位需求生成100问,语音AI追问逻辑漏洞
FoloUp 是一个开源的 AI 语音面试平台,能够根据职位描述自动生成定制化的面试问题,并与候选人进行自然对话式的语音面试,帮助企业高效招聘。
120 9
FoloUp:比HR更懂岗位需求!开源语音面试平台爆火:1份岗位需求生成100问,语音AI追问逻辑漏洞
grok3 ai官网 _ Grok3官方网站入口 _ grok3网页版下载
人工智能领域风起云涌,xAI 近期重磅发布了其最新旗舰模型 Grok 3,同时推出了全新的 Grok iOS 及 Web 应用体验。此举标志着 xAI 正式向 AI 霸主地位发起冲击!
295 6
平替cursor吗?通义灵码创造AI导航网站
作为一名古老语言COBOL程序员,我习惯了面向过程的编程方式。近期尝试用通义灵码创建了一个AI导航网站,并发布在微信公众号上。由于前端知识有限,网站的CSS特效是逐步生成的。尽管之前使用过cursor、cline+deepseek等工具,但这次通义灵码的帮助让我更顺利地完成了项目。网站展示了收集的资料和资源,效果令人满意。 [查看网站](https://mp.weixin.qq.com/s/LsrAgdq6-0rnednxDjrqUw)
基于ECS部署DeepSeek个人专属AI网站
本方案介绍了如何基于云服务器ECS集成百炼API和Open WebUI服务,一键部署体验DeepSeek个人专属AI网站。用户不仅可以以极低的成本,拥有个人专属的AI网站,进行稳定的AI对话,还能够切换DeepSeek-V3、DeepSeek-R1、Qwen-max等模型进行体验。同时Open WebUI还具备开源能力,支持定制工具的开发。您还可以创建其他子账号,将您的专属AI网站分享给他人使用。
AI大模型发展对语音直播交友系统源码开发搭建的影响
近年来,AI大模型技术的迅猛发展深刻影响了语音直播交友系统的开发与应用。本文探讨了AI大模型如何提升语音交互的自然流畅性、内容审核的精准度、个性化推荐的智能性以及虚拟主播的表现力,并分析其对开发流程和用户体验的变革。同时,展望了多模态交互、情感陪伴及元宇宙社交等未来发展方向,指出在把握机遇的同时需应对数据安全、算法偏见等挑战,以实现更智能、安全、有趣的语音直播交友平台。

热门文章

最新文章