小程序 語音播報 文字轉語音【微信同聲傳譯插件】

需要實現的功能是：

輸入一段文字，由小程序讀出來

步驟如下：

一、小程序添加 “微信同聲傳譯” 插件

添加插件步驟看這篇博===》如何添加插件並配置

二、代碼編寫

index.wxml裏代碼：

<!--index.wxml-->
<view class="container">
  <textarea class="text"></textarea>
  <view class="btn">
    <button bindtap="start"> 開始 </button>
    <button bindtap="end"> 結束 </button>
  </view>
</view>

index.wxss裏代碼

/**index.wxss**/
.container{
  width: 100%;
  height: 600rpx;
  background: silver;
}
.text{
  width: 500rpx;
  background: honeydew;
}
.btn{
  width: 500rpx;
  display: flex;
  justify-content: space-between;
  margin-top: 50rpx;
}
.btn button{
  width: 200rpx;
}

index.js裏代碼分開展示：

① 先引入插件

//引入插件：微信同聲傳譯
const plugin = requirePlugin('WechatSI');

② onReady裏添加如下代碼

  onReady: function () {
    //創建內部 audio 上下文 InnerAudioContext 對象。
    this.innerAudioContext = wx.createInnerAudioContext();
    this.innerAudioContext.onError(function (res) {
      console.log(res);
      wx.showToast({
        title: '語音播放失敗',
        icon: 'none',
      })
    })
  }

③ 文字轉語音部分代碼

// 文字轉語音
  start: function (e) {
    var that = this;
    var content = this.data.content;
    plugin.textToSpeech({
      lang: "zh_CN",
      tts: true,
      // content: content,
      content: "速度：" + speed + " 力量：" + strength,
      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(); //暫停音頻
  },

index.js所有代碼：

//index.js
//獲取應用實例
const app = getApp()

//引入插件：微信同聲傳譯
const plugin = requirePlugin('WechatSI');

Page({
  data: {
    src: '', //路徑
  },
  // 文字轉語音
  start: function (e) {
    var that = this;
    var content = this.data.content;
    plugin.textToSpeech({
      lang: "zh_CN",
      tts: true,
      // content: content,
      content: "速度：" + speed + " 力量：" + strength,
      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(); //暫停音頻
  },
  
  onReady: function () {
    //創建內部 audio 上下文 InnerAudioContext 對象。
    this.innerAudioContext = wx.createInnerAudioContext();
    this.innerAudioContext.onError(function (res) {
      console.log(res);
      wx.showToast({
        title: '語音播放失敗',
        icon: 'none',
      })
    })
  }
})

Github 已上傳：路徑