uniapp开发小程序接入阿里云TTS语音合成(RESTful API)

流程
  1. 首先小程序后台配置白名单
    1.1 路径:开发-开发管理-开发设置-服务器域名-request合法域名
    1.2 request合法域名参数:
          https://nls-meta.cn-shanghai.aliyuncs.com
          https://nls-gateway-cn-shanghai.aliyuncs.com
  2. 引入alitts.js
  3. 页面使用
    3.1 只需替换AccessKeyID、AccessKeySecret 、appkey三个参数即可直接使用
AccessKeyID、AccessKeySecret 、appkey获取地址:
  1. 阿里云RESTful API对接文档
  2. 阿里云TTS管理平台创建项目获取appkey
  3. 阿里云获取AccessKeyID和AccessKeySecret
static/js/alitts.js 用于获取阿里云动态token
// 这个东西我都没执行yarn add crypto竟然能用,可能另一个项目安装了全局共享了,如报错找不到,执行一下yarn add crypto
import crypto from 'crypto'export class AccessToken {static encodeText(text) {let encodedText = encodeURIComponent(text);return encodedText.replace('+', '%20').replace('*', '%2A').replace('~', '%7E');}static encodeDict(dict) {let keys = Object.keys(dict).sort();return keys.map(key => `${this.encodeText(key)}=${this.encodeText(dict[key])}`).join('&');}static async createToken(accessKeyId, accessKeySecret) {const parameters = {AccessKeyId: accessKeyId,Action: 'CreateToken',Format: 'JSON',RegionId: 'cn-shanghai',SignatureMethod: 'HMAC-SHA1',SignatureNonce: uuidv4(),SignatureVersion: '1.0',Timestamp: new Date().toISOString(),Version: '2019-02-28'};const queryString = this.encodeDict(parameters);console.log('Normalized request string:', queryString);const stringToSign = `GET&${this.encodeText('/')}&${this.encodeText(queryString)}`;console.log('String to sign:', stringToSign);const hmac = crypto.createHmac('sha1', `${accessKeySecret}&`);hmac.update(stringToSign);const signature = hmac.digest('base64');console.log('Signature:', signature);const encodedSignature = this.encodeText(signature);console.log('URL-encoded signature:', encodedSignature);const fullUrl = `https://nls-meta.cn-shanghai.aliyuncs.com/?Signature=${encodedSignature}&${queryString}`;console.log('URL:', fullUrl);let resData =  await new Promise((resolve, reject) => {uni.request({url: fullUrl,method: 'GET',success: res => {const data = res.dataresolve({token: data.Token.Id,expireTime: data.Token.ExpireTime})},fail: error => {console.log(error)reject(error)}})})console.log('res',resData)if(resData){return resData}// Using fetch for HTTP request// const response = await fetch(fullUrl);// if (response.ok) {//     const jsonResponse = await response.json();//     if (jsonResponse.Token) {//         return {//             token: jsonResponse.Token.Id,//             expireTime: jsonResponse.Token.ExpireTime//         };//     }// }// console.error(await response.text());return {token: null,expireTime: null};}
}// Sample UUIDv4 function, or you could use a library like `uuid`
function uuidv4() {return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);return v.toString(16);});
}
使用
// 阿里云动态token获取函数
import { AccessToken } from "@/static/js/alitts"
// 阿里云动态token
const aliToken = null
// 需要在阿里云管理平台获取
const AccessKeyID = '你的AccessKeyID '
const AccessKeySecret = '你的AccessKeySecret '
// 需要在阿里云tts管理平台创建项目
const appkey = '你的阿里云后台创建项目的key'export default {name: "tts",data() {return {isPlay:false,// tts播放实例ttsAudio: null,}},onUnload() {if(this.ttsAudio){this.ttsAudio.stop()this.ttsAudio.destroy()}},async onLoad(val) {// 获取阿里云动态token,tts需要此参数AccessToken.createToken(AccessKeyID, AccessKeySecret).then(({ token, expireTime }) => {console.log('阿里云token:', token, 'Expire Time:', expireTime);aliToken = token});// 模拟调用setTimeout(() => {this.tts('刘斩仙明天要去江苏,晚上回来又约了朋友撸串,忙死了')},5000)},methods: {/*** 文字转语音* @param {string} text */tts(text) {uni.request({url:'https://nls-gateway-cn-shanghai.aliyuncs.com/stream/v1/tts',method:'POST',// header:{//     "Content-Type": "application/json"// },data:{appkey: appkey,token: aliToken,text: text,format: 'mp3',sample_rate: 16000,volume: 100},// dataType:'tts',responseType:'arraybuffer',success:ttsRes => {console.log('阿里云:')// 语音const audio = uni.createInnerAudioContext();// 设置不遵循静音开关播放,否则ios无法外音播放audio.obeyMuteSwitch = falseuni.setInnerAudioOption({obeyMuteSwitch: false})// 临时路径-此处必须加时间戳或者随机数,否则同样临时路径无法覆盖,小程序bugconst ttsPath = `${wx.env.USER_DATA_PATH}/tts${new Date().getTime()}.mp3`if(this.ttsAudio){this.ttsAudio.stop()this.ttsAudio.destroy()}this.ttsAudio = audio// 将 arrayBuffer 写入临时文件const fs = uni.getFileSystemManager()try {const writeRes = fs.writeFileSync(ttsPath, ttsRes.data, "binary")console.log('writeRes',writeRes)} catch(e) {console.error(e)}audio.src = ttsPathaudio.autoplay = false;audio.onError((res) => {console.error('音频播放出错', res);});// 监听播放完成audio.onEnded(() => {console.log('音频播放结束');this.isPlay = false// 播放完成后删除临时文件,此处虽然设置同步删除即使执行成功,文件也不会立即删除,还是能访问到,实际删除为异步操作try {const unlinkRes = fs.unlinkSync(ttsPath)console.log('unlinkRes',unlinkRes)} catch(e) {console.error(e)}});// 播放音频audio.onCanplay(() => {console.log('音频开始播放');this.ttsAudio.play();this.isPlay = true})   }})}},
}
备注:

就想到这些,如果还有需要注意的后续再补充;最近骑电车要带头盔,飘逸的发型压得趴在头上,影响刘斩仙风度翩翩谦谦君子形象,可恶啊!

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

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

相关文章

解决方案中word中分节符的使用

解决方案中必不可少的两个“符号”,分页符,分节符 有了分节符,可以为不同节设置不同的页眉页脚、分栏格式、纸张大小及方向、页边距、不同节间采用不同的页码序号,常用的功能主要是把word下一次的由原来的“竖版”,变…

Tomcat10 简单地enable Https

通常来讲, 建站后要启用https 有下面3个步骤 1.购买域名 2.绑定域名和 服务器的外部IP地址 3.为这域名购买SSL 证书 (还有其密码) 4.在Tomcat上启用https 和安装这个证书 但是其实没有域名也可以在tomcat 中enable https的, 至于…

VSIX:C#项目 重命名所有标识符(Visual Studio扩展开发)

出于某种目的(合法的,真的合法的,合同上明确指出可以这样做),我准备了一个重命名所有标识符的VS扩展,用来把一个C#库改头换面,在简单的测试项目上工作很满意,所有标识符都被准确替换…

angular、 react、vue框架对比

借鉴:Web前端开发:三大主流框架 (baidu.com) AngularReactVue公司ChromeFaceBook尤雨溪写法有指令、模板的概念比较灵活,没有要求使用特定的架构和模式有指令和模板的概念性能低有虚拟Dom,性能高有虚拟Dome,性能高学习门槛 高&am…

SpringBoot-SpringCache缓存

文章目录 Spring Cache 介绍常用注解 Spring Cache 介绍 Spring Cache 是一个框架,实现了基于注解的缓存功能,只需要简单地加一个注解,就能实现缓存功能。 Spring Cache 提供了一层抽象,底层可以切换不同的缓存实现,…

产品经理入门学习(一):认识产品经理

参考引用 黑马-产品经理入门基础课程 1. 合格的产品经理 1.1 什么是产品 上述产品的共性:解决某个问题的东西上述产品的区别 有形(上图左):颜色、形状、质地和尺寸无形(上图右):脑力劳动成果、…

STM32WB55开发(6)----FUS更新

STM32WB55开发.6--FUS更新 概述视频教学硬件准备存储器映射FLASH安全区设置SRAM安全区设置通过USB进行下载注意事项 概述 在 STM32WB 微控制器中,FUS(Firmware Upgrade Services)是用于固件升级的一种服务。这项服务可以让你更新设备上的无…

vue3视频大小适配浏览器窗口大小

目标:按浏览器窗口的大小,平铺视频,来适配屏幕的大小。 考虑使用 DPlayer.js、video.js、vue-video-player等视频插件,但报了各种各样的错;试过使用 js 对视频进行同比例放大,再判断其与窗口的大小取最小值…

按键精灵中常用的命令

1. 声明变量: Dim 2. 注释语句 (1). 单行注释:这是一行注释,使用一个单引号进行注释; (2). 单行注释:// 这是一行注释,使用一对反斜杠进行注释; (3). 多行注释:/*这是多行注释,中…

R语言_RColorBrewer包--全平台可用

R语言_RColorBrewer包–全平台可用

springboot整合redis+lua实现getdel操作保证原子性

原始代码 脚本逻辑先获取redis的值,判断是否等于期望值。 条件成立则删除,不成立则返回0 if redis.call(get, KEYS[1]) ARGV[1] thenreturn redis.call(del, KEYS[1]) end return 0 测试代码 根据上面的逻辑加了测试, 在判断成功后等待5…

送你几款开源IDC资产管理系统

更多运维技术,请关注微信公众号“运维之美” 送你几款开源IDC资产管理系统 1.phpIPAM2.NetBox3.IPPlan4.GestiIP5.RackTables 对于公司机房运维人员来说,你的idc资产管理清单可能还记录在各种excel表格中,当设备和ip变动的时候进行手动更新&a…

解锁无限可能:ON1 Photo RAW的新功能与优势forMac/win

作为摄影师,您是否曾为繁琐的照片编辑过程而感到困扰?是否希望有一种工具,能将您的照片编辑过程变得更加高效、灵活,同时不损失画质?如果是,那么您一定不能错过ON1 Photo RAW。 ON1 Photo RAW是一款全新的…

Spring Boot整合Swagger

🙈作者简介:练习时长两年半的Java up主 🙉个人主页:程序员老茶 🙊 ps:点赞👍是免费的,却可以让写博客的作者开心好久好久😎 📚系列专栏:Java全栈,…

奇元大模型通过备案 360自研两大模型均获批

11月4日,三六零(601360.SH,下称“360”)大模型“奇元大模型”通过备案落地。今年9月,“360智脑大模型”已获批面向公众开放。360公司也成为国内首家两个大模型均通过备案的科技企业。 从大模型定位和应用角度来看,奇元大模型具备…

单目标应用:粒子群优化算法(PSO)求解微电网优化MATLAB

一、微网系统运行优化模型 微电网优化模型介绍: 微电网多目标优化调度模型简介_IT猿手的博客-CSDN博客 二、粒子群优化算法(PSO)求解微电网优化 (1)部分代码 close all; clear ; clc; global P_load; %电负荷 gl…

蓝桥杯官网填空题(黄金连分数)

题目描述 本题为填空题,只需要算出结果后,在代码中使用输出语句将所填结果输出即可。 黄金分割数 0.61803... 是个无理数,这个常数十分重要,在许多工程问题中会出现。有时需要把这个数字求得很精确。 对于某些精密工程&#xf…

Android Gldie复用只取之前decode过的缓存resource,Kotlin

Android Gldie复用只取之前decode过的缓存resource,Kotlin import android.graphics.Bitmap import android.os.Bundle import android.util.Log import android.widget.ImageView import androidx.appcompat.app.AppCompatActivity import androidx.lifecycle.life…

Java,面向对象,枚举类

枚举类型本质上也是一种类,只不过这个类的对象是有限的、固定的几个,不能让用户随意创建。 场景: 开发中,如果针对于某个类,它的实例的个数是确定的。则推荐将此类声明为枚举类。 如果枚举类的实例只有一个&#xff0c…

react_11

MobX 介绍 需求,组件0 改变了数据,其它组件也想获得改变后的数据,如图所示 这种多个组件之间要共享状态数据,useState 就不够用了,useContext 也不好用了 能够和 react 配合使用的状态管理库有 MobX Redux 其中…