最佳实践
有奖：语音产品征文挑战赛火热进行中> HOT
文档中心 > 最佳实践 > 语音合成 > 结合 AI 语音合成和云开发快速上线一款实用工具小程序

结合 AI 语音合成和云开发快速上线一款实用工具小程序

最近更新时间：2023-12-07 16:01:23

我的收藏

本页目录：

说明：
本文来自 AI 专题用户实践征文，仅供学习和参考。

名词介绍

语音合成（Text To Speech，TTS）满足将文本转化成拟人化语音的需求，打通人机交互闭环。 提供多场景、多语言的音色选择，支持 SSML 标记语言，支持自定义音量、语速等参数，让发音更专业、更符合场景需求。语音合成广泛适用于智能客服、有声阅读、新闻播报、人机交互等业务场景，提升人机交互体验，提高语音类应用构建效率。
?
云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为开发者提供高可用、自动弹性扩缩的后端云服务，包含计算、存储、托管等 serverless 化能力，可用于云端一体化开发多终端应用（小程序、公众号、Web 应用、Flutter 客户端等），帮助开发者统一构建和管理后端服务和云资源，避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。

开发背景

对于媒体从业人员来说，一款简单、易用的文本转语音软件是非常必要的，并且要随时随地无需下载和注册都能使用，所以结合小程序和云开发是最合适的。

开发工具

代码开发

第一步：用户输入框

// WXML
<textarea class="" type="text" value="{{txt}}" bindinput="setTxt" auto-height="true"></textarea>
// JS
data: {
        txt:""
      }
setTxt(e){
    this.setData({txt:e.detail.value})
},

第二步：用户提交按钮

// WXML
<view class="" bindtap="submit"></view>
//js
submit(){
    wx.cloud.callFunction({
        name:"submitTxt",
        data:{
            txt:this.data.txt
        }
    }).then(res=>{
    
    })
}

第三步：新建云函数?

新建云函数，名字为上一步 submit() 中调用的 submitTxt。
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 加入。
  "dependencies": {
    "tencentcloud-sdk-nodejs": "^4.0.348",// 加入此项
    "wx-server-sdk": "~2.6.1"
  }

第四步：查询任务状态

新建一个与上一步的环境相同的云函数。
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 的播放地址。

第五步：前端加入播放组件

   <video 
      id="myVideo" 
      src={{ResultUrl}}
    ></video>

第六步：前端下载功能

wx.downloadFile({
  url: url, //之前获取的地址
  success (res) {
    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
    if (res.statusCode === 200) {
      // TODO
    }
  }
})
至此，一款简单的语音合成小程序，已经完成了核心功能。您可以根据需要，美化前端 UI，并增加用户管理功能，结合云开发的数据库可以很好的管理用户的数据。也可以增加用户使用的逻辑，例如新用户可以直接使用 X 次，通过激励用户观看视频或者分享，可以获取使用次数等。
?
?
中国站


http://www.vxiaotou.com