当前位置: 首页 > news >正文

SPIRNGBOOT+VUE实现浏览器播放音频流并合成音频

一、语音合成支持流式返回,通过WS可以实时拿到音频流,那么我们如何在VUE项目中实现合成功能呢。语音合成应用非常广泛,如商家广告合成、驾校声音合成、新闻播报、在线听书等等场景都会用到语音合成。

二、VUE下实现合成并使用浏览器播放代码如下:

<template><div class="Login-container"><div class="allClass"><div class="titleClass"><b>在线语音合成流式版</b></div><hr/><textarea style=" width: 310px;height: 100px;">{{ttsText}}</textarea><el-button type="primary" @click="clickTts">立即合成</el-button><el-button type="primary" @click="clickWav">DOWN WAV</el-button></div></div>
</template><script src="../js_util/index.js"></script>
<script src="../js_util/index.umd.js"></script>
<script>
import * as base64 from 'js-base64'
import CryptoJS from '../js_util/crypto-js/crypto-js.js'
import AudioPlayer from '../../public/player'const audioPlayer = new AudioPlayer(""); // 播放器
export default {name: "Login",data() {return {APPID: "",API_SECRET: "",API_KEY: "",ttsWs: "", // 合成ws链接ttsText: "锦瑟无端五十弦,一弦一柱思华年。庄生晓梦迷蝴蝶,望帝春心托杜鹃。沧海月明珠有泪,蓝田日暖玉生烟。" +"此情可待成追忆,只是当时已惘然。",vcn: "xiaoyan",}},methods: {clickTts() {const url = this.getWebSocketUrl(this.API_KEY, this.API_SECRET);if ("WebSocket" in window) {this.ttsWS = new WebSocket(url);} else if ("MozWebSocket" in window) {this.ttsWS = new MozWebSocket(url);} else {alert("浏览器不支持WebSocket");return;}this.ttsWS.onopen = (e) => {console.log("链接成功...")audioPlayer.start({autoPlay: true,sampleRate: 16000,resumePlayDuration: 1000});let text = this.ttsText;let tte = document.getElementById("tte") ? "unicode" : "UTF8";let params = {common: {app_id: this.APPID,},business: {aue: "raw",auf: "audio/L16;rate=16000",vcn: this.vcn,bgs: 1,tte,},data: {status: 2,text: this.encodeText(text, tte),},};this.ttsWS.send(JSON.stringify(params));console.log("发送成功...")};this.ttsWS.onmessage = (e) => {let jsonData = JSON.parse(e.data);console.log("合成返回的数据" + JSON.stringify(jsonData));// 合成失败if (jsonData.code !== 0) {console.error(jsonData);return;}audioPlayer.postMessage({type: "base64",data: jsonData.data.audio,isLastData: jsonData.data.status === 2,});if (jsonData.code === 0 && jsonData.data.status === 2) {this.ttsWS.close();}};this.ttsWS.onerror = (e) => {console.error(e);};this.ttsWS.onclose = (e) => {console.log(e + "链接已关闭");};},getWebSocketUrl(apiKey, apiSecret) {let url = "wss://tts-api.xfyun.cn/v2/tts";let host = location.host;let date = new Date().toGMTString();let algorithm = "hmac-sha256";let headers = "host date request-line";let signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/tts HTTP/1.1`;let signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret);let signature = CryptoJS.enc.Base64.stringify(signatureSha);let authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`;let authorization = btoa(authorizationOrigin);url = `${url}?authorization=${authorization}&date=${date}&host=${host}`;return url;},// 文本编码encodeText(text, type) {if (type === "unicode") {let buf = new ArrayBuffer(text.length * 4);let bufView = new Uint16Array(buf);for (let i = 0, strlen = text.length; i < strlen; i++) {bufView[i] = text.charCodeAt(i);}let binary = "";let bytes = new Uint8Array(buf);let len = bytes.byteLength;for (let i = 0; i < len; i++) {binary += String.fromCharCode(bytes[i]);}return window.btoa(binary);} else {return base64.encode(text);}},clickPcm() {},clickWav() {const blob = audioPlayer.getAudioDataBlob("wav")if (!blob) {return}let defaultName = new Date().getTime();let node = document.createElement("a");node.href = window.URL.createObjectURL(blob);node.download = `${defaultName}.wav`;node.click();node.remove();}}
}
</script><style scoped>
.Login-container {height: 100vh;background-image: linear-gradient(to bottom right, deepskyblue, darkcyan);overflow: hidden;
}.allClass {margin: 200px auto;background-color: #ffffff;width: 350px;height: 390px;padding: 20px;border-radius: 10px;
}.titleClass {margin: 20px 0;text-align: center;font-size: 24px;
}.inputOneClass {margin: 10px 0;
}.buttonClass {margin: 10px 0;text-align: right;
}
</style>

三、除了调用浏览器麦克风播报,我们还可以一键下载为WAV音频,实现效果如下!

四、感兴趣的可以加我获取源码!

相关文章:

SPIRNGBOOT+VUE实现浏览器播放音频流并合成音频

一、语音合成支持流式返回&#xff0c;通过WS可以实时拿到音频流&#xff0c;那么我们如何在VUE项目中实现合成功能呢。语音合成应用非常广泛&#xff0c;如商家广告合成、驾校声音合成、新闻播报、在线听书等等场景都会用到语音合成。 二、VUE下实现合成并使用浏览器播放代码…...

C#绘制常用工业控件(仪表盘,流动条,开关等)

目录 1&#xff0c;使用Graphics绘制Toggle。 效果&#xff1a; 测试代码&#xff1a; Toggle控件代码&#xff1a; 2&#xff0c;使用Graphics绘制Switch。 效果&#xff1a; 测试代码&#xff1a; Switch控件代码&#xff1a; 3&#xff0c;使用Graphics绘制PanelHe…...

Ps:颜色模型、色彩空间及配置文件

颜色模型、色彩空间和配置文件是处理颜色的核心概念。它们虽然互相关联&#xff0c;但各自有不同的功能和作用。 通过理解这些概念及其关系&#xff0c;Photoshop 用户可以更好地管理和优化图像处理流程&#xff0c;确保颜色在不同设备和应用中的一致性和准确性。 颜色模型 Col…...

llvm后端之td定义指令信息

llvm后端之td定义指令信息 引言1 定义指令2 定义Operand3 定义SDNode4 PatFrags4.1 ImmLeaf4.2 PatLeaf 5 ComplexPattern6 谓词条件7 理解dag 引言 llvm后端通过td定义指令信息&#xff0c;并通过dag匹配将IR节点转换为平台相关的指令。 1 定义指令 td通过class Instructio…...

战地机房集装箱数据中心可视化:实时监控与管理

通过图扑可视化技术实时监控战地机房集装箱数据中心的各项运行指标和环境参数&#xff0c;提高部署效率和设备管理能力&#xff0c;确保数据中心稳定运行。...

Linux入门攻坚——31、rpc概念及nfs和samba

NFS&#xff1a;Network File System 传统意义上&#xff0c;文件系统在内核中实现 RPC&#xff1a;函数调用&#xff08;远程主机上的函数&#xff09;&#xff0c;Remote Procedure Call protocol 一部分功能由本地程序完成 另一部分功能由远程主机上的 NFS本质…...

内网穿透的应用-本地化部署Elasticsearch平替工具OpenObserve并实现无公网IP远程分析数据

文章目录 前言1. 安装Docker2. Docker镜像源添加方法3. 创建并启动OpenObserve容器4. 本地访问测试5. 公网访问本地部署的OpenObserve5.1 内网穿透工具安装5.2 创建公网地址 6. 配置固定公网地址 前言 本文主要介绍如何在Linux系统使用Docker快速本地化部署OpenObserve云原生可…...

哈希表 and 算法

哈希表&#xff1a; 哈希表&#xff08;Hash table&#xff09;&#xff0c;也被称为散列表&#xff0c;是一种根据关键码值&#xff08;Key value&#xff09;而直接进行访问的数据结构。它通过把关键码值映射到表中一个位置来访问记录&#xff0c;以加快查找的速度。这个映射…...

Comsol 共用声固耦合边界与热粘性声学边界的亥姆霍兹腔体超材料板精准隔声设计

声子晶体可分为局域共振型声子晶体和布拉格散射型声子晶体, 由于布拉格声子晶体需要的结构尺寸往往很大, 不便于实际应用; 而基于局域共振型机理的声子晶体能够实现“小体积控制大波长”, 因而有更加广泛的应用, 其中利用Helmholtz共鸣腔是局域共振型机理的典型应用, 近年来, H…...

Linux系统本地化部署Dify并安装Ollama运行llava大语言模型详细教程

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

极光出席深圳国际人工智能展并荣获“最具投资价值人工智能奖”

9月8-10日&#xff0c;由深圳市工业和信息化局、深圳市发展和改革委员会、深圳市科技创新局、深圳市政务服务和数据管理局、深圳市中小企业服务局共同指导&#xff0c;深圳市人工智能行业协会主办的第五届深圳国际人工智能展正式开幕。作为中国领先的客户互动和营销科技服务商&…...

人工智能领域的性能指的是什么

目录 1. 准确性&#xff08;Accuracy&#xff09; 2. 精确率与召回率&#xff08;Precision & Recall&#xff09; 3. F1分数 4. 运行时间与延迟&#xff08;Latency&#xff09; 5. 吞吐量&#xff08;Throughput&#xff09; 6. 可扩展性&#xff08;Scalability&a…...

SQL进阶技巧:如何利用SQL解决趣味赛马问题?| 非等值关联匹配问题

目录 0 问题描述 1 数据准备 2 问题分析 方法一:先分后合思想 方法2:非等值关联匹配 3 小结 0 问题描述 有一张赛马记录表,如下所示: create table RacingResults ( trace_id char(3) not null,race_date date not null, race_nbr int not null,win_name char(30) n…...

Vue Echarts报错Initialize failed: invalid dom解决方法

此问题是图表初始化时 找不到dom&#xff0c;以下是解决方法 1、不要用created&#xff08;用mounted&#xff09;&#xff0c;created这时候还只是创建了实例&#xff0c;但模板还没挂载完成&#xff1b; created&#xff1a; 在模板渲染成 html 前调用&#xff0c;通常初始…...

MySQL—死锁

什么是死锁&#xff1f; 好比是两个事务都在等待对方释放锁&#xff0c;之后进行下一步操作&#xff0c;但是最后双方都没有释放资源&#xff0c;所以导致一直处于等待的状态。 但是服务器不会让死锁的状态一直持续&#xff0c;会关闭其中一个影响较小的事务&#xff08;右边的…...

CS5363|CS5263升级方案|DP转HDMI 4K60HZ芯片方案

CS5363是一种高度集成的单芯片&#xff0c;适用于多个细分市场和显示应用&#xff0c;如Typec扩展、手机/电脑投屏、扩展底座、投影仪等。 CS5363管脚分布情况如下&#xff1a; CS5363是一款高度集成的单芯片&#xff0c;适用于多个mGeneral 支持最高分辨率/定时4k60Hz 支持…...

Git Lab 项目迁移到gitee 并且包含提交记录

步骤 1: 准备工作 1.安装Git&#xff1a;确保你在本地计算机上安装了Git。如果尚未安装&#xff0c;可以从Git官网下载并安装。 2.创建Gitee账号&#xff1a;如果你还没有Gitee账号&#xff0c;请先注册一个&#xff0c;访问Gitee官网进行注册。 3.创建新的Gitee仓库&#xff1…...

如何用用智能码二维码zhinengma.cn做空调机房巡检

用智能码二维码做空调机房巡检 引言 空调机房是保障建筑物内环境舒适度的关键设施&#xff0c;其巡检工作对于确保空调系统的稳定运行至关重要。通过引入智能码二维码技术&#xff0c;可以大大提高空调机房巡检的效率和准确性。 一、二维码在空调机房巡检中的应用 1.1 巡检…...

如何与客户保持高度粘性?这个系统给您答案

客户粘性是企业成功的关键因素之一&#xff0c;企客宝企微版在打通获客、转化、运营全链路方面发挥着重要作用&#xff0c;实现客户粘性的提升。 前言 客户粘性是企业成功的关键因素之一。企业需要不断通过各种手段提升客户粘性&#xff0c;保持客户忠诚度和长期合作关系。企客…...

算法知识点————两个栈实现一个队列

思路&#xff1a;当队列入队的时候&#xff0c;将元素入栈&#xff08;instack&#xff09;&#xff0c;当队列出栈的时候&#xff0c;先判断栈&#xff08;outstack&#xff09;是否为空&#xff0c;如果为空&#xff0c;则将栈&#xff08;instack&#xff09;的元素全部放入…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

flow_controllers

关键点&#xff1a; 流控制器类型&#xff1a; 同步&#xff08;Sync&#xff09;&#xff1a;发布操作会阻塞&#xff0c;直到数据被确认发送。异步&#xff08;Async&#xff09;&#xff1a;发布操作非阻塞&#xff0c;数据发送由后台线程处理。纯同步&#xff08;PureSync…...