百度语音合成服务，基于HTTP请求的REST API接口，将文本转换为可以播放的音频文件。本文主要介绍采用百度语音合成服务，实现小程序的听写功能。

想了解微信小程序的开发过程，请参看我之前的帖子：《UNIT接入小程序》https://ai.baidu.com/forum/topic/show/953022

想了解语音合成的调用过程，请参看我之前的帖子：《语音问答机器人小程序》

https://ai.baidu.com/forum/topic/show/953177

1 系统框架

用到的技术主要有：百度语音合成和微信小程序。小程序将用户的输入文本及设置提交给百度语音合成服务，返回音频并播放出来。全部功能都在小程序客户端完成，不需要服务器，适合个人开发者学习调试使用，同时也为商业应用提供相应解决方案。

2创建小程序项目

在根目录的全局配置文件app.json中增加："pages/tts/tts" ，会自动创建相关页面文件，结构如下：

tts.js：功能逻辑模块

tts.wxss：页面样式文件

tts.wxml：页面布局文件

tts.json：页面配置文件

3 调用语音合成API

3.1 首先要在控制台创建应用，调用语音合成API，“获取API Key/Secret Key”。

接口文档地址：https://ai.baidu.com/docs#/TTS-API/top

请求URL: https://tsn.baidu.com/text2audio

Body中放置请求参数，参数详情如下：

3.2 语音合成功能实现

（1）发送URL请求核心代码

//在tts.js中发送语音合成请求

  tts: function (e) {

    var tex = encodeURI(e);//转换编码url_encode UTF8编码

    var tok= app.globalData.access_token;

    console.log(tok);

    var cuid = app.globalData.NLPCusid;

    var ctp = 1;

    var lan = "zh";    // zh表示中文

    // 字符编码

    var per = app.globalData.fayinren;    //fayinren

    var vol = app.globalData.vol;    //音量，取值0-15，默认为5中音量

    var pit = app.globalData.pit;    //音调，取值0-15，默认为5中语调

    var spd = app.globalData.spd;  // 语速，取值0-15，默认为5中语速

    var url = "https://tsn.baidu.com/text2audio?tex=" + tex + "&lan=" + lan + "&cuid=" + cuid + "&ctp=" + ctp + "&tok=" + tok + "&spd=" + spd + "&per=" + per + "&pit=" + pit

    console.log(url);

    wx.downloadFile({

      url: url,

      success: function (res) {

        console.log(res);

        // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容

        if (res.statusCode === 200) {

          audio_filePath = res.tempFilePath;

          console.log(audio_filePath);

        }

      }

    })

  },

 (2)定义按钮点击事件

//在tts.js中定义按钮点击事件

  //播放合成音频

  mainHandler: function () {

    var that = this;

    that.tts(text_input);

  },



  radioChange(e) {

    var that = this

    app.globalData.fayinren = e.detail.value;

    that.setData({

      fayinren: e.detail.value

    })

    console.log('radio发生change事件，携带value值为：', e.detail.value)

    // console.log(that.data.option)

  },

  /**

   * slider滑动监听事件

   */

  changeSlider1(e) {

    app.globalData.vol = e.detail.value;

    this.setData({ slider1: e.detail.value })

  },

  changeSlider2(e) {

    app.globalData.pit = e.detail.value;

    this.setData({ slider2: e.detail.value })

  },

  changeSlider3(e) {

    app.globalData.spd = e.detail.value;

    this.setData({ slider3: e.detail.value })

  },

  /**

  * 获取文本框内容

  */



  getDataBindTap: function (e) {

    var that = this;

    text_input = e.detail.value;

    console.log(text_input);

   

  },

 (3)修改页面样式文件

/* pages/tts/tts.wxss */

.container {

  margin-top: -110px;

  background-repeat: no-repeat;

  background-size: auto;

  background-position: bottom;

  background-position-x: right;

}



textarea {

  width: 700rpx;

  height: 500rpx;

  margin-left: 10rpx;

  margin-right: 10rpx;

  margin-top: 10rpx;

}



.textarea-bg {

  background-color: rgb(239, 250, 175);

  padding: 10rpx;

  font-size: 32rpx;

}



.title-bg {

  font-size: 32rpx;

  margin-left: 10rpx;

  margin-right: 10rpx;

  margin-top: 10rpx;

  color: #43c729;

}



.atbottom {

  width: 100%;

  height: 50px;

  display: flex;

  flex-direction: row;

  justify-content: center;

  position: fixed;

  background: #3366FF;

  bottom: 0;

}

.btnImg {

  margin-right: 8rpx;

  width: 80rpx;

  height:80rpx;

}



.tui-slider-head,.tui-slider-box{

 height: 110rpx;

 line-height: 80rpx;

 font-size: 35rpx;

 color: #666;

}



.card {

    border: 2px solid #807474e5;

    border-radius: 5px;

    height: 200px;

    background-color: #4854bb94;

    box-shadow: 4px 1px 1px #cccccc;

    margin: 8px;

    position: relative;

}



.image {

    width: 10%;

    height: 20px;

    background-color: #eeeeee;

}

 4 实现效果