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

语音合成能够将文字转化为自然流畅的人声,提供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>
相关推荐
2501_9159090637 分钟前
tcpdump 抓包数据分析实战,命令、过滤、常见故障定位与真机补充流程
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
赵庆明老师5 小时前
Uniapp微信小程序开发:微信小程序支付功能后台代码
微信小程序·小程序·uni-app
曹申阳5 小时前
1. 使用VSCode开发uni-app环境搭建
ide·vscode·uni-app
雪芽蓝域zzs6 小时前
uniapp开发 APP嵌入另一个APP打包的wgt文件,实现点击携带参数跳转到wgtAPP的某一个页面
uni-app·apache
00后程序员张7 小时前
tcpdump 抓包分析,命令、过滤技巧、常见症状定位与移动真机补充方案
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
BumBle9 小时前
基于UniApp实现DeepSeek AI对话:流式数据传输与实时交互技术解析
前端·uni-app
会点法律的程序员10 小时前
小程序 地理位置授权怎么搞
前端·小程序·uni-app
重生之我是菜鸡程序员10 小时前
uniapp 顶部通知 上滑隐藏
前端·javascript·uni-app
FliPPeDround10 小时前
告别 uni-app 启动烦恼:@uni-helper/unh 让开发流程更顺畅
前端·微信小程序·uni-app
2501_9159214313 小时前
iOS 26 电耗监测与优化,耗电问题实战 + 多工具 辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone