当前位置: 首页 > 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;的元素全部放入…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...