名词介绍
语音合成(Text To Speech,TTS)满足将文本转化成拟人化语音的需求,打通人机交互闭环。 提供多场景、多语言的音色选择,支持 SSML 标记语言,支持自定义音量、语速等参数,让发音更专业、更符合场景需求。语音合成广泛适用于智能客服、有声阅读、新闻播报、人机交互等业务场景,提升人机交互体验,提高语音类应用构建效率。
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为开发者提供高可用、自动弹性扩缩的后端云服务,包含计算、存储、托管等 serverless 化能力,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用、Flutter 客户端等),帮助开发者统一构建和管理后端服务和云资源,避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
开发背景
最近要做一个宣传视频,需要为文案配一段音源,但是苦于没有学过播音主持,并且个人音色以及发声的连贯性也不够优秀,花了几个小时也没读好。不光是对于本人还是其他一些自媒体,媒体从业人员来说,一款简单,易用的文本转语音软件是非常需要的,并且要随时随地无需下载和注册都能使用,所以结合小程序 云开发是最合适的。
开发工具
微信开发者工具
代码部分
1, 用户输入框
代码语言:javascript复制// WXML
<textarea class="" type="text" value="{{txt}}" bindinput="setTxt" auto-height="true"></textarea>
// JS
data: {
txt:""
}
setTxt(e){
this.setData({txt:e.detail.value})
},
2, 用户提交按钮
代码语言:javascript复制// WXML
<view class="" bindtap="submit"></view>
//js
submit(){
wx.cloud.callFunction({
name:"submitTxt",
data:{
txt:this.data.txt
}
}).then(res=>{
})
}
3, 新建云函数(名字为上一步submit()中调用的submitTxt)
代码语言:javascript复制const tencentcloud = require("tencentcloud-sdk-nodejs");
const TtsClient = tencentcloud.tts.v20190823.Client;
// 实例化一个认证对象,入参需要传入腾讯云账户secretId,secretKey,此处还需注意密钥对的保密
// 密钥可前往https://console.cloud.tencent.com/cam/capi网站进行获取
// 云开发中的云函数相当于服务端,可以明文填写您的密钥
const clientConfig = {
credential: {
secretId: "XXXXXXXXXXXXXXXXXXXX",
secretKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXX",
},
region: "", // 地域,可以为空
profile: {
httpProfile: {
endpoint: "tts.tencentcloudapi.com",
},
},
};
exports.main = async (event, context) => {
var txt = event.txt
const client = new TtsClient(clientConfig);
// 此处仅提供必填参数,更多参数选择请参考官方文档。
const params = {
"Text": txt,
"ModelType": 1,// 模型类型,1-默认模型。
"VoiceType": 10510000// 10510000-智逍遥,旁对白阅读风格男声
};
client.CreateTtsTask(params).then(
(data) => {
console.log(data);
// {
// RequestId: 'dc7708bc-1b8c-412e-9033......',
// Data: { TaskId: 'gz-2e20190c-8f20-4941-ab7e-.......' }
// }
var TaskId = data.Data.TaskId;
return TaskId
},
(err) => {
console.error("error", err);
return "FAIL"
}
);
}
因为长文本的语音合成是需要一定时间的,所以回调是一个任务ID,需要再根据这个ID查询任务状态,如果已完成,会有返回一个URL。开发者可以根据需要,是否把提交和查询合并在一起。在这里,笔者采用的是分离的模式。
*此处依赖可以不用本地安装,直接右键选择云端安装依赖即可。在云函数文件中package.json加入
代码语言:javascript复制 "dependencies": {
"tencentcloud-sdk-nodejs": "^4.0.348",// 加入此项
"wx-server-sdk": "~2.6.1"
}
4, 查询任务状态
新建一个与上一步的环境相同的云函数
代码语言:javascript复制const client = new TtsClient(clientConfig);
const params = {
"TaskId": TaskId // 上一步得到的任务ID
};
client.DescribeTtsTaskStatus(params).then(
(data) => {
console.log(data);
// {
// RequestId: 'effa415f-94b1-46c1-a5fa-.......',
// Data: {
// TaskId: 'gz-2e20190c-8f20-4941-ab7e.......',
// Status: 2, //任务状态码,0:任务等待,1:任务执行中,2:任务成功,3:任务失败。
// StatusStr: 'success',
// ResultUrl: 'https://tts-async-audio-..............',
// ErrorMsg: ''
// }
// }
if(data.Data.Status === 2) return data.Data.ResultUrl
return data.Data.StatusStr
},
(err) => {
console.error("error", err);
return "FAIL"
}
);
前端得到第三步返回的任务ID后,可提供该ID继续调用第四步的云函数,获取任务结果。
如果成功,即可返回一段MP3的播放地址。
5, 前端加入播放组件
代码语言:javascript复制 <video
id="myVideo"
src={{ResultUrl}}
></video>
6, 前端下载功能
代码语言:javascript复制wx.downloadFile({
url: url, //之前获取的地址
success (res) {
// 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
// TODO
}
}
})
至此,一款简单的语音合成小程序,已经完成了核心功能。读者可以根据需要,美化前端UI,并增加用户管理功能,结合云开发的数据库可以很好的管理用户的数据。也可以增加用户使用的逻辑,例如新用户可以直接使用X次,通过看激励视频或者分享,可以获取使用次数等。