UNIAPP发布小程序调用讯飞在线语音合成+实时播报

news2024/11/18 6:39:44

语音合成能够将文字转化为自然流畅的人声,提供100+发音人供您选择,支持多语种、多方言和中英混合,可灵活配置音频参数。广泛应用于新闻阅读、出行导航、智能硬件和通知播报等场景。

在当下大模型火爆的今日,语音交互页离不开语音合成的加入。

源码如下:

<template>
	<view style="padding: 40rpx;">
		<input v-model="tts_text" style="border: 1px solid gainsboro;" />

		<button @click="startTts" type="primary" style="margin-top: 20px;">语音合成</button>


	</view>
</template>

<script>
	// 引入工具包
	import * as base64 from "base-64"
	import CryptoJS from '../../static/js_util/crypto-js.js'
	import * as utf8 from "utf8"
	import {
		Buffer
	} from 'buffer'

	export default {
		data() {
			return {
				// 讯飞开放平台获取
				wssTask: "", // ws连接任务
				url: "wss://tts-api.xfyun.cn/v2/tts",
				host: "tts-api.xfyun.cn",
				sub: "/v2/tts",
				appid: "",
				api_secret: "",
				api_key: "",
				tts_text: "", //合成文本
				vcn: "xiaoyan", // 发音人
				buff: [],
				innerAudioContext: uni.createInnerAudioContext(),
			}
		},
		methods: {
			async startTts() {
				this.buff = []
				let myUrl = await this.getWebSocketUrl();
				let realThis = this;
				this.socketTask = uni.connectSocket({
					url: myUrl,
					method: 'GET',
					success: res => {
						console.log(res, "ws成功连接...", myUrl)
					}
				})
				realThis.socketTask.onError((res) => {
					console.log("连接发生错误", res)
				})
				// 发送合成参数
				realThis.socketTask.onOpen((res) => {
					console.info("wss的onOpen成功执行...", res)
					// 第一帧..........................................
					console.log('open成功...')
					let params = {
						"common": {
							"app_id": realThis.appid
						},
						"business": {
							"aue": "lame",
							"sfl": 1,
							"tte": "UTF8",
							"ent": "intp65",
							"vcn": realThis.vcn,
							"pitch": 50,
							"speed": 50
						},
						"data": {
							"status": 2,
							"text": Buffer.from(realThis.tts_text).toString('base64')
						}
					};
					// 发送数据
				});
				// 接受到消息时
				realThis.socketTask.onMessage((res) => {
					console.log('收到API返回的内容:', res.data);
					let res_data = JSON.parse(res.data)
					// console.log("我打印的"+JSON.stringify(res_data.data))
					// 解码音频数据
					let audioData = res_data.data.audio;
					console.log("我打印的" + JSON.stringify(audioData))
					realThis.buff.push(audioData)
					if (res_data.data.status == 2) { // 仅合成完毕一次请求播放
						realThis.playAudio(0); //开始播放音频
						//状态为2才表示合成结束,需要合并           
						realThis.socketTask.close({
							success(res) {
								console.log('ws关闭成功---正常关闭', res)
							},
							fail(err) {
								console.log('关闭失败', err)
							}
						})
					}
				})
			},
			// 播放音频
			playAudio(cur) {// 可以模拟实时播报
				
			},
			// 鉴权
			getWebSocketUrl() {
				return new Promise((resolve, reject) => {
					// 请求地址根据语种不同变化
					var url = this.url;
					var host = this.host;
					var apiKeyName = "api_key";
					var date = new Date().toGMTString();
					var algorithm = "hmac-sha256";
					var headers = "host date request-line";
					var signatureOrigin = `host: ${host}\ndate: ${date}\nGET ${this.sub} HTTP/1.1`;
					var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, this.api_secret);
					var signature = CryptoJS.enc.Base64.stringify(signatureSha);
					var authorizationOrigin =
						`${apiKeyName}="${this.api_key}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`;
					var authorization = base64.encode(authorizationOrigin);
					url = `${url}?authorization=${authorization}&date=${encodeURI(date)}&host=${host}`;
					// console.log(url)
					resolve(url); // 主要是返回地址
				});
			}
		}
	}
</script>

<style>

</style>

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

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

相关文章

【蓝牙协议栈】【BLE】【BAS】精讲蓝牙电池服务

1. 蓝牙电池服务(Bluetooth Battery Service)概念 蓝牙电池服务是蓝牙设备与其他设备通信时用于报告其剩余电池电量的标准服务。它让用户能够随时了解蓝牙设备(如无线耳机、智能手表、蓝牙鼠标/键盘等)的电池状态,从而方便地管理这些设备的续航与电源使用。 BAS通常用于在…

无线迷踪:陈欣的网络之旅

第一章 陈欣是一名资深的网络工程师&#xff0c;工作在一家领先的科技公司。她的生活平静而有序&#xff0c;直到有一天&#xff0c;公司的无线网络突然出现了严重的问题。员工们的设备频繁断开连接&#xff0c;无法正常使用。这个问题不仅影响了工作效率&#xff0c;还引起了…

【redis】—— 环境搭建教程

上一节&#xff0c;我们大致了解了Redis的几个重要版本&#xff0c;在本教程中&#xff0c;我们选择了5.0版本&#xff0c;因为5.0已经具备了大部分的功能特性&#xff0c;并且与7.0版本相比&#xff0c;其安装使用过程更为简便。 Redis的官方并不直接支持微软的Windows操作系统…

如何查看python源代码

众所周知&#xff0c;Python内建了许多函数模块&#xff0c;并且我们可能还会安装许多第三方模块等等。 下面以getpass为例查看其源代码。 1.help(getpass) 输入该命令找到file路径&#xff0c;并且可以查看其其提供的功能。 2.利用getpass.__file__查看位置 最后找到该文件…

java笔试练习题笔记(10)

关于继承和实现说法正确的 是 &#xff1f; ( )A.类可以实现多个接口&#xff0c;接口可以继承&#xff08;或扩展&#xff09;多个接口 B.类可以实现多个接口&#xff0c;接口不能继承&#xff08;或扩展&#xff09;多个接口 C.类和接口都可以实现多个接口 D.类和接口都不…

前端开发之打印功的使用和实例(vue-print-nb)

通过插件来进行实现 前言效果图1、安装插件vue2vue32、 引入Vue项目2、 使用2.1、在项目中创建按钮并且使用v-print绑定绑定打印事件2.2、编写要打印的内容,给内容附加唯一的id2.3、绑定的时间的方法和参数3、整体代码(此代码是通过vue3来进行实现的但是逻辑都是一样的)前言…

NavVis VLX3的精度怎么去进行验证?【上海沪敖3D】

01、精度评价现状 三维捕捉行业还没有建立一个用于估算或验证移动激光扫描系统精度的统一标准。因此&#xff0c;需要高精度交付成果的专业人士很难相信设备所标注的精度规格&#xff0c;也就很难知道基于SLAM的移动激光扫描系统是否适合当前的项目。 NavVis将通过展示一种严格…

Java | Leetcode Java题解之第564题寻找最近的回文数

题目&#xff1a; 题解&#xff1a; class Solution {public String nearestPalindromic(String n) {long selfNumber Long.parseLong(n), ans -1;List<Long> candidates getCandidates(n);for (long candidate : candidates) {if (candidate ! selfNumber) {if (ans…

ES6标准-Promise对象

目录 Promise对象的含义 Promise对象的特点 Promise对象的缺点 Promise对象的基本用法 Promise对象的简单例子 Promise新建后就会立即执行 Promise对象回调函数的参数 Promise参数不会中断运行 Promise对象的then方法 Promise对象的catch()方法 Promise状态为resolv…

如何利用CSS制作导航菜单

1.利用CSS技术&#xff0c;结合链接和列表&#xff0c;设计并实现“山水之间”页面 示例代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>山水之间</title><style>.all{width:900px;}.top{width:900px;h…

Github 2024-11-17 php开源项目日报 Top10

根据Github Trendings的统计,今日(2024-11-17统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量PHP项目10JavaScript项目2Nextcloud服务器:安全的数据之家 创建周期:2796 天开发语言:PHP, JavaScript协议类型:GNU Affero General Public…

【工具变量】2024-2025年地级市异质性数据、城市分组异质性数据(老工业、环境保护、人口流入、沿海等)

一、数据范围&#xff1a; &#xff08;1&#xff09;南北方城市 &#xff08;2&#xff09;东中西城市 &#xff08;3&#xff09;七大地理区、八大综合经济区 &#xff08;4&#xff09;城市群&#xff0c;长三角珠三角京津冀等 &#xff08;5&#xff09;长江流域沿岸、黄河…

响应式网页设计--css

CSS&#xff08;Cascading Style Sheets&#xff0c;层叠样式表&#xff09;是用来控制网页的外观和布局的语言。它与 HTML 一起工作&#xff0c;通过样式定义网页元素的显示方式。CSS 可以控制多种视觉效果&#xff0c;如字体、颜色、布局、间距等。 基本语法&#xff1a; C…

定时器的小应用

第一个项目 第一步&#xff0c;RCC开启时钟&#xff0c;这个基本上每个代码都是第一步&#xff0c;不用多想&#xff0c;在这里打开时钟后&#xff0c;定时器的基准时钟和整个外设的工作时钟就都会同时打开了 RCC_APB1PeriphClockCmd(RCC_APB1Periph_TIM2, ENABLE);第二步&…

基于Hadoop、hive的数仓搭建实践

文章目录 架构图Hadoop搭建Hive 搭建MySQL搭建官网文档下载配置配置hive环境变量配置日志文件配置hive-site 复制mysql 驱动包删除日志包初始化元数据启动metastore服务使用hive CLI启动hiveServer2访问hiveserver2客户端连接beeline shell连接 Dbeaver连接经验 基于HDFS Hive…

跨平台WPF框架Avalonia教程 一

安装 安装 Avalonia UI 模板​ 开始使用 Avalonia 的最佳方式是使用模板创建一个应用程序。 要安装 Avalonia 模板&#xff0c;请运行以下命令&#xff1a; dotnet new install Avalonia.Templates 备注 对于 .NET 6.0 及更早版本&#xff0c;请将 install 替换为 --inst…

“fc-async”提供了基本的异步处理能力

在开发中,异步处理已经成为提升系统性能和用户体验的常用方式。然而,传统的@Async注解和基础的异步处理工具在面对复杂的任务场景时,存在局限性。这些局限性包括但不限于高并发环境下的稳定性、任务失败后的恢复机制、以及任务的监控和管理。 开源项目“fc-async”提供了基…

RGB与YCbCr转换算法

目录 RGB与YCbCr转换算法RGB与YCbCr色域介绍RGB模型YCbCr色域简介YCbCr的应用YUV 和 YCbCr 的区别 色彩转换公式 RGB 转 YCbCr 实现RGB 转 YCbCr 的 Matlab 实现RGB 转 YCbCr 的 FPGA 实现 YCbCr 转 RGB 实现YCbCr 转 RGB 的 Matlab 实现YCbCr 转 RGB 的 FPGA 实现 RGB与YCbCr转…

游戏引擎学习第八天

视频参考: https://www.bilibili.com/video/BV1ouUPYAErK/ 理解下面的代码 关于虚函数 代码分解 结构体 foo 的定义&#xff1a; struct foo {int32 X;int64 Y;virtual void Bar(int c); };foo 结构体有两个成员变量&#xff1a;X&#xff08;int32 类型&#xff09;和 Y&…

Vue2教程002:Vue指令

文章目录 2、Vue指令2.1 开发者工具2.2 v-html2.3 v-show和v-if2.4 v-else和v-else-if2.5 v-on2.5.1 内联语句2.5.2 methods 2、Vue指令 2.1 开发者工具 通过谷歌应用商店安装&#xff08;需要科学上网&#xff09;通过极简插件安装 2.2 v-html Vue会根据不同的指令&#x…