微信小程序 -语音合成：将文字转为语音（小程序插件：微信同声传译）

 

1.小程序后台添加微信同声传译插件

效果图：

 

2.wxml文件代码

  

  

    开始

    结束

  

 

3.wxss文件代码

.yuyinWrap {

  position: relative;

  margin-top:300rpx;

}



.yuyinCon {

  border: 1px solid #ccc;

  margin: 0 auto;

  padding: 10rpx 10rpx 70rpx;

}

.yuyinBtn {

  width: 30%;

  height: 70rpx;

  position: absolute;

  right: 112rpx;

  bottom: 12rpx;

  border: 1px solid #eee;

  background: #fff;

  color: #606267;

  line-height: 62rpx;

}

.start{

  left: -112rpx;

}

4.js代码

const app = getApp();
//引入插件：微信同声传译
const plugin = requirePlugin('WechatSI');
 
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    content: '',//内容
    src:'', //
  },
  onReady(e) {
    //创建内部 audio 上下文 InnerAudioContext 对象。
    this.innerAudioContext = wx.createInnerAudioContext();
    this.innerAudioContext.onError(function (res) {
      console.log(res);
      wx.showToast({
        title: '语音播放失败',
        icon: 'none',
      })
    }) 
  },
  // 手动输入内容
  conInput: function (e) {
    this.setData({
      content: e.detail.value,
    })
  },
  // 文字转语音
  wordYun:function (e) {
    var that = this;
    var content = this.data.content;
    plugin.textToSpeech({
      lang: "en_US",
      tts: true,
      content: content,
      success: function (res) {
        console.log(res);
        console.log("succ tts", res.filename);
        that.setData({
          src: res.filename
        })
        that.yuyinPlay();
 
      },
      fail: function (res) {
        console.log("fail tts", res)
      }
    })
  },
  
  //播放语音
  yuyinPlay: function (e) {
    if (this.data.src == '') {
      console.log(暂无语音);
      return;
    }
    this.innerAudioContext.src = this.data.src //设置音频地址
    this.innerAudioContext.play(); //播放音频
  },
 
  // 结束语音
  end: function (e) {
    this.innerAudioContext.pause();//暂停音频
  },
  
})

已经实现！