【语音月】AI小程序之在线配音
wangwei8638 发布于2019-11 浏览:8423 回复:18
1
收藏
最后编辑于2022-04

百度语音合成服务,基于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 实现效果

收藏
点赞
1
个赞
共18条回复 最后由用户已被禁言回复于2022-04
#19wangwei8638回复于2020-05
#4 大手拉小手0123回复
识别的准确度也可以嘛  

识别能力已经超过人类

0
#18wangwei8638回复于2020-05
#16 189******30回复
收费应该也会按惯例给些免费额度进行试用吧

免费额度还是有的

0
#17wangwei8638回复于2020-05
#15 189******30回复
这个已经部署成服务了。飞浆模型库里有没有完成度比较高的风格迁移模型,用于再次开发?
展开

还不知道哦,没关注过

0
#16189******30回复于2020-05
#13 wangwei8638回复
wow~,听说最近要收费 了

收费应该也会按惯例给些免费额度进行试用吧

0
#15189******30回复于2020-05
#12 wangwei8638回复
原则上可以,指定发音人的话可以用语音自训练平台,上传语料进行训练

这个已经部署成服务了。飞浆模型库里有没有完成度比较高的风格迁移模型,用于再次开发?

0
#14wangwei8638回复于2020-05
#8 大手拉小手0123回复
试了一下,感觉很有意思

欢乐无处不在

0
#13wangwei8638回复于2020-05
#7 笔墨哥回复
wow~ 好厉害的AI呢~

wow~,听说最近要收费 了

0
#12wangwei8638回复于2020-05
#11 189******30回复
迁移成别人的语音特征。比如我说的一段音频变成哆啦A梦的音色

原则上可以,指定发音人的话可以用语音自训练平台,上传语料进行训练

0
#11189******30回复于2020-05
#10 wangwei8638回复
风格迁移是指什么?调整语速、语调?  

迁移成别人的语音特征。比如我说的一段音频变成哆啦A梦的音色

0
#10wangwei8638回复于2020-05
#9 189******30回复
大佬,这个能将一段语音进行风格迁移么?

风格迁移是指什么?调整语速、语调?

 

0
#9189******30回复于2020-05

大佬,这个能将一段语音进行风格迁移么?

0
#8大手拉小手0123回复于2020-04

试了一下,感觉很有意思

0
#7笔墨哥回复于2020-02

wow~ 好厉害的AI呢~

0
#6wangwei8638回复于2020-02

欢迎扫码体验

0
#5wangwei8638回复于2020-02

0
#4大手拉小手0123回复于2019-12

识别的准确度也可以嘛

 

0
#3wangwei8638回复于2019-11

识别还是很准确的

0
#2wangwei8638回复于2019-11

可选择不同发音人 语调 语速

0
TOP
切换版块