微信小程序文字语音转换/中英文自动翻译

小程序登录： https://mp.weixin.qq.com/

微信小程序的插件“同声传译”可以把文字转化成语音，也可以进行中英文的翻译。下面介绍一下具体用法。

一：同声传译插件添加

依次点击 设置(左侧边栏）->第三方设置
在插件管理中选择添加插件，在弹出的添加插件对话框中输入“同声传译”进行搜索，搜索到之后进行添加。

2、添加完成后，可以在详情中看到“同声传译”的APPID和版本号

二： 同声传译Demo开发

demo效果图如下：
1、输入文本，点击播放可以合成声音
2、输入文本，点击翻译可以进行翻译。

1、首先在app.json中添加插件
version插件详情中的版本号、provider是插件中的APPID

 "plugins": {
    "WechatSI": {
      "version": "0.3.3",
      "provider": "wx069ba97219f66d99"
    }
  }

2、页面效果

WXML代码内容

 <textarea class="textarea-container" placeholder='请输入内容' value='{{content}}' bindinput='inputChange'>
</textarea>

<view class='btn-container' bindtap="playVoice">
  <view>播放声音</view>
</view>


<view class='btn-container' bindtap="translateToEnglish">
  <view>中译英(文字翻译)</view>
</view>

<view class='btn-container' bindtap="translateToChinese">
  <view>英中译(文字翻译)</view>
</view>


<view class="cell-title">翻译结果</view>
<view class="cell-content">{{translateResult}}</view>

WXSS文件内容

.textarea-container{
  border:1rpx solid rgba(112, 195, 160, 1);
  width:690rpx;
  margin-left:30rpx;
  margin-top: 30rpx;
  height:200rpx;
}

.btn-container {
  width: 100%;
  padding: 20rpx 0;
  background-color: white;
  display: flex;
  justify-content: center;
  bottom: 0;
  left: 0;
}

.btn-container view {
  display: flex;
  justify-content: center;
  height: 88rpx;
  width: 680rpx;
  background: rgba(112, 195, 160, 1);
  border-radius: 10rpx;
  align-items: center;
  color: white;
}


.cell-title{
  color:#333;
  margin-top: 50rpx;
  font-size:35rpx;
  margin-left: 30rpx;
  font-weight: 500;
  border-bottom: 1px solid rgba(112, 195, 160, 1);
}

.cell-content{
  color:#888888;
  margin-top: 50rpx;
  font-size:30rpx;
  margin-left: 30rpx;
  font-weight: 500;
}

3 对应JS的实现

const app = getApp();
const plugin = requirePlugin('WechatSI');
Page({
  data: {
    content: '今天是个好天气',
    src: '',
    translateResult: '此处显示翻译结果'
  },
  onReady(e) {
    this.innerAudioContext = wx.createInnerAudioContext();
    this.innerAudioContext.onError(function(res) {
      console.log(res);
      wx.showToast({
        title: '语音播放失败',
        icon: 'none',
      })
    })
  },
  inputChange: function(e) {
    this.setData({
      content: e.detail.value,
    })
  },
  playVoice: function(e) {
    var that = this;
    var content = this.data.content;
    plugin.textToSpeech({
      lang: "zh_CN",
      tts: true,
      content: content,
      success: function(res) {
        console.log(res);
        console.log("succ tts", res.filename);
        that.setData({
          src: res.filename
        })
        that.play();

      },
      fail: function(res) {
        console.log("fail tts", res)
      }
    })
  },

  play: function(e) {
    if (this.data.src == '') {
      console.log(暂无语音);
      return;
    }
    this.innerAudioContext.src = this.data.src
    this.innerAudioContext.play();
  },


  stopVoice: function(e) {
    this.innerAudioContext.pause();
  },

  translateToEnglish: function(e) {
    var that = this;
    that.translate("zh_CN", "en_US")
  },

  translateToChinese: function(e) {
    var that = this;
    that.translate("en_US", "zh_CN")
  },

  translate: function(lfrom, lto) {
    var that = this;
    var content = this.data.content;
    plugin.translate({
      lfrom: lfrom,
      lto: lto,
      content: content,
      success: function(res) {
        if (res.retcode == 0) {
          console.log("result", res.result)
          that.setData({
            translateResult: res.result
          })

        } else {
          console.warn("翻译失败", res)
          that.setData({
            translateResult: "翻译失败"
          })
        }
      },
      fail: function(res) {
        console.log("网络失败", res)
        that.setData({
          translateResult: "网络失败"
        })
      }
    })
  }

})

注意：
同声传译默认配额如下，如果想要更多配额需要提交申请。
语音输入配额：每个小程序250条/分钟，3w条/天。
文本翻译配额：每个小程序500次/分钟，10w次/天。
语音合成配额：每个小程序100次/分钟，2w次/天。