VueJS ReactJS实现AI问答小助手(2)——流式TTS文字转实时语音播放

TTS(Text-to-speech)文字转语音使用的是阿里云的服务,文档地址:

https://help.aliyun.com/zh/isi/developer-reference/streaming-text-tts-wss

文档只给出了一些配置项的说明,以及java端的代码示例,但没有web端的。所以这篇笔记可以给web开发者参考。


首先,AI答复的消息是通过SSE(server-sent events)返回的。SSE请求的实现流程后续有时间再填坑。

代码实现中,使用了一个onReply回调来执行后续动作。 这个方法会连续多次执行,直到消息结束。

SSE是单向的,只能由服务端向客户端推送,而流式TTS这种双向通信需要通过socket来实现。

socket的实现,原本是打算用封装了心跳、房间等概念的socket.io,但后来发现这个功能实现并不需要用到保活和长连接,发送和接收都完成以后,直接关闭socket连接即可,不用考虑那些复杂逻辑。

所以socket的连接可以直接使用vueuse的工具方法useWebSocket

业务流程大致如下:

    本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/16185.shtml

    如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

    相关文章

    .NET File Upload

    VS2022 .NET8 &#x1f4be;基础上传示例 view {ViewData["Title"] "File Upload"; }<h1>ViewData["Title"]</h1><form method"post" enctype"multipart/form-data" action"/Home/UploadFile"…

    Android 系统日志(Log) JNI实现流程源码分析

    1、JNI概述 Java Native Interface (JNI) 是一种编程框架&#xff0c;使得Java代码能够与用其他编程语言&#xff08;如C和C&#xff09;编写的本地代码进行交互。JNI允许Java代码调用本地代码的函数&#xff0c;也允许本地代码调用Java代码的函数。下面是对JNI机制的详细概述…

    【单片机】STM32F070F6P6 开发指南(一)STM32建立HAL工程

    文章目录 一、基础入门二、工程初步建立三、HSE 和 LSE 时钟源设置四、时钟系统&#xff08;时钟树&#xff09;配置五、GPIO 功能引脚配置六、配置 Debug 选项七、生成工程源码八、生成工程源码九、用户程序下载 一、基础入门 f0 pack下载&#xff1a; https://www.keil.arm…

    【OpenCV 基础知识 19】拉普拉斯变换

    功能&#xff1a; cvLaplace 是计算图像的 Laplacian 变换 &#xff0c;是Intel开源项目opencv中的函数 函数形式&#xff1a; void cvLaplace( const CvArr* src, CvArr* dst, int aperture_size3 ); 参数列表&#xff1a; Src 输入图像. Dst 输出图像. aperture_size算子内…

    离线初始化k8s

    导出和导入所有必要的 Kubernetes 镜像&#xff0c;使用阿里云作为源。 在能访问外网的机器上拉取镜像 首先&#xff0c;在有外网访问的机器上运行以下命令来拉取所有 Kubernetes v1.29.5 版本需要的镜像&#xff1a; kubeadm config images pull --image-repository regist…

    大模型应用:基于Golang实现GPT模型API调用

    1.背景 当前OpenAI提供了开放接口&#xff0c;支持通过api的方式调用LLM进行文本推理、图片生成等能力&#xff0c;但目前官方只提供了Python SDK。为了后续更方便集成和应用&#xff0c;可以采用Golang对核心推理调用接口进行封装&#xff0c;提供模型调用能力。 2.相关准备…

    Spark运行模式详解

    Spark概述 Spark 可以在多种不同的运行模式下执行&#xff0c;每种模式都有其自身的特点和适用场景。 部署Spark集群大体上分为两种模式&#xff1a;单机模式与集群模式。大多数分布式框架都支持单机模式&#xff0c;方便开发者调试框架的运行环境。但是在生产环境中&#xff…

    软件web化的趋势

    引言 在信息技术飞速发展的今天&#xff0c;软件Web化已成为一个不可忽视的趋势。所谓软件Web化&#xff0c;即将传统的桌面应用软件转变为基于Web的应用程序&#xff0c;使用户能够通过浏览器进行访问和使用。传统软件通常需要在用户的计算机上进行安装和运行&#xff0c;而W…

    Cadence OrCAD学习笔记(3)capture使用技巧_1

    本期介绍capture的一些使用技巧。资料来源于小破站up主硬小二 1、导出像Visio规格的图纸 2、全局修改元件属性 然后保存、关闭即可。 3、导出BOM 4、导出网表 5、元件自动编号 6、capture软件和allegro关联 7、新建原理图symbol 以上为添加封装库的路径 如果要创建多部分的sy…

    积累|新质生产力之地方发展的不同赛道

    “不要搞一种模式”。任何事物都是共性和个性的统一&#xff0c;也就是矛盾普遍性和特殊性的统一。就发展新质生产力而言&#xff0c;既要遵循新质生产力的普遍规律和共同特征&#xff0c;又要充分考虑各地、各产业的实际情况和特殊性&#xff0c;准确把握共性与个性。 总述 …

    神器EasyRecovery2024中文电脑版下载!让数据恢复不再难

    在数字化时代&#xff0c;数据就是我们的财富。无论是重要的工作报告&#xff0c;还是那些珍贵的生活瞬间照片&#xff0c;或是我们与朋友间的聊天记录&#xff0c;都储存在我们的电脑或手机中。然而&#xff0c;有时候&#xff0c;意外总是突如其来&#xff0c;电脑突然崩溃&a…

    C++Qt操作Lotus Domino数据库 Lotus Domino C++连接Lotus Domino C++快速开发Lotus Domino

    java连接domino C#连接domino python连接domino go连接domino,delphi连接domino Excel连接domino Flutter、微信小程序连接domino C 操作 Lotus Domino 数据库&#xff1a;自动化与效率的结合 引言 在企业级应用中&#xff0c;Lotus Domino 提供了一个强大的协作平台&#xff0…

    【Linux】TCP协议【下一】{三次握手/四次挥手的深度解读==状态变化}

    文章目录 本篇知识需要有TCP协议【中】的知识&#xff01;详情点击&#x1f447;1.测试一&#xff1a;服务器start函数不定义任何行为&#xff08;不调用accept&#xff09;的三次握手状态变化int listen(int sockfd, int backlog);的backlog参数全连接队列当全连接队列已满&am…

    BGP策略实验(路径属性和选路规则)

    要求&#xff1a; 1、使用preval策略&#xff0c;确保R4通过R2到达192.168.10.0/24 2、使用AS Path策略&#xff0c;确保R4通过R3到达192.168.11.0/24 3、配置MED策略&#xff0c;确保R4通过R3到达192.168.12.0/24 4、使用Local Preference策略&#xff0c;确保R1通过R2到达19…

    Python轻松玩转excel操作指导

    目录 一、一图概览 二、表格操作 三、内容操作 四、单元格操作 五、Pandas实现表格操作 六、常见场景示例 一、一图概览 ​ ​本文主要对openpyxl库的常用表格操作进行了梳理&#xff0c;熟练的运用后可极大地提升工作效率。 二、表格操作 #创建一个表格sheet.xlsx #…

    LINQ(四) ——使用LINQ进行对象类型初始化

    总目录 C# 语法总目录 上一篇&#xff1a;LINQ(三) ——查询表达式/into关键字 LINQ 四 ——使用LINQ进行对象类型初始化 6. 使用LINQ进行对象初始化6.1 对象类型 6. 使用LINQ进行对象初始化 6.1 对象类型 需要声明定义一个对象类&#xff0c;然后使用select 配合new关键字进…

    C++编程揭秘:虚表机制与ABI兼容性的实例剖析

    前言&#xff1a; 假设你的应用程序引用的一个库某天更新了&#xff0c;虽然 API 和调用方式基本没变&#xff0c;但你需要重新编译你的应用程序才能使用这个库&#xff0c;那么一般说这个库是源码兼容&#xff08;Source compatible&#xff09;&#xff1b;反之&#xff0c;如…

    C语言指针相关知识(第五篇章)(非常详细版)

    提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、sizeof和strlen对比二、数组之间的比较&#xff08;依据strlen和sizeof来呈现&#xff09;&#xff08;一&#xff09;、一维整型数组&#xff08;二&#…

    Value-Based Reinforcement Learning(2)

    Temporal Difference &#xff08;TD&#xff09; Learning 上节已经提到了如果我们有DQN&#xff0c;那么agent就知道每一步动作如何做了&#xff0c;那么DQN如何训练那&#xff1f;这里面使用TD算法。 简略分析&#xff1a; 是的估计 是的估计 所以&#xff1a; Deep Re…

    对vue3/core源码ref.ts文件API的认识过程

    对toRef()API的认识的过程: 最开始认识toRef()是从vue3源码中的ref.ts看见的,右侧GPT已经举了例子 然后根据例子,在控制台输出ref对象是什么样子的: 这就是ref对象了,我们根据对象中有没有__v_isRef来判断是不是一个ref对象,当对象存在且__v_isRef true的时候他就判定为是一个…