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

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

news 2025/8/17 1:48:48

流程

首先小程序后台配置白名单
1.1 路径：开发-开发管理-开发设置-服务器域名-request合法域名
1.2 request合法域名参数：
https://nls-meta.cn-shanghai.aliyuncs.com
https://nls-gateway-cn-shanghai.aliyuncs.com
引入alitts.js
页面使用
3.1 只需替换AccessKeyID、AccessKeySecret 、appkey三个参数即可直接使用

AccessKeyID、AccessKeySecret 、appkey获取地址：

阿里云RESTful API对接文档
阿里云TTS管理平台创建项目获取appkey
阿里云获取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})   }})}},
}