使用微信同声传译，实现页面滑动播放

一、添加微信同声传译插件

由于目前使用官方推荐的添加方式无法查找到微信同声传译插件，因此，我们直接使用微信服务平台进行添加，操作步骤如下：
1.点击微信服务平台链接，下滑找到微信同声传译

2.点击添加插件按钮，使用微信扫码，现在对应的小程序即可添加成功

3.添加成功后，可以到微信公众平台，设置，第三方插件中查看

二、页面实现同声传译使用

在app.json文件中添加插件的版本信息

{
    "pages": [
        "pages/index/index"
    ],
    "plugins": {
        "WechatSI": {
            "version": "0.3.5",
            "provider": "wx069ba97219f66d99"
        }
    },
    "sitemapLocation": "sitemap.json"
}

version和provider可以在插件详情中查看到

在需要进行同声传译的页面中添加同声同声传译代码即可，切记，是在js文件中

const app = getApp();
//引入插件：微信同声传译
const plugin = requirePlugin('WechatSI');
Page({
    onReady: function () {
	    this.innerAudioContext = wx.createInnerAudioContext();
	    let that = this
	    var cont = that.data.result[0].name||that.data.result.color_result||that.data.result.currencyName;
	    plugin.textToSpeech({
	      lang: 'zh_CN',
	      content: cont,
	      success: function (res) {
	        that.playAudio(res.filename);
	      },
	    })
  	},
  playAudio(e) {
    this.innerAudioContext.src = e
    this.innerAudioContext.play();
  }
})

三、滑块滑动

使用swiper滑块来进行不同页面间切换
index.wxml代码如下

<!--滑块试图容器-->
<swiper class="swiper" indicator-dots="true" indicator-active-color="#fff" bindchange="scroll" current="swindex" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
  <swiper-item>
    <van-grid column-num="1">
     <van-grid-item icon="photo-o"  text="北京" icon-color="#008B8B"/>
    </van-grid>
  </swiper-item>
  <swiper-item>
    <van-grid column-num="1">
     <van-grid-item icon="photo-o"  text="上海" icon-color="#008B8B"/>
    </van-grid>
  </swiper-item>
  <swiper-item>
    <van-grid column-num="1">
     <van-grid-item icon="flower-o" text="广州" icon-color="#008B8B"/>
    </van-grid>
  </swiper-item>
  <swiper-item>
    <van-grid column-num="1">
     <van-grid-item icon="birthday-cake-o" text="深圳" icon-color="#FA8072" />
    </van-grid>
  </swiper-item>
</swiper>

index.wxss代码如下

.swiper{
  background-color: rgb(47, 161, 228);
  height: 1000rpx;
  width: 100%
}
.van-grid-item{
  height: 1000rpx; 
  width: 100%
}

index.js代码如下

var touchDot = 0; //触摸时的原点
var time = 0; // 时间记录，用于滑动时且时间小于1s则执行左右滑动
var interval = ""; // 记录/清理时间记录
//引入插件：微信同声传译
const plugin = requirePlugin('WechatSI');
Page({
data: {
  content: ['北京','上海','广州','深圳']
},
// 语音
onReady: function () {
  this.innerAudioContext = wx.createInnerAudioContext();
  let that = this
  plugin.textToSpeech({
    lang: 'zh_CN',
    //content: "页面加载时播放的，可以加第一个滑块的内容",
    content:this.data.content[0],
    success: function (res) {
      that.playAudio(res.filename);
    },
  })
},
scroll: function (e) {
  this.swindex = e.detail.current
  this.innerAudioContext = wx.createInnerAudioContext();
  let that = this
  plugin.textToSpeech({
    lang: 'zh_CN',
    content: this.data.content[this.swindex],
    success: function (res) {
      that.playAudio(res.filename);
    },
  })
},
playAudio(e) {
  this.innerAudioContext.src = e
  this.innerAudioContext.play();
},


// 触摸开始事件  
touchStart: function (e) {
  touchDot = e.touches[0].pageX; // 获取触摸时的原点  
  // 使用js计时器记录时间    
  interval = setInterval(function () {
    time++;

  }, 100);

},
// 触摸移动事件  
touchMove: function (e) {

  var touchMove = e.touches[0].pageX;
  console.log("touchMove:" + touchMove + " touchDot:" + touchDot + " diff:" + (touchMove - touchDot));
  // 向右滑动  

  if (touchMove - touchDot >= 40 && time < 10) {
    console.log('向右滑动');
    wx.switchTab({
      url: '../index/index'

    });

  }

},
// 触摸结束事件  
	touchEnd: function (e) {
		clearInterval(interval); // 清除setInterval  
		time = 0;
	}

})

通过使用this.swindex = e.detail.current来获取当前所在页面的下标，再通过下标来获取content中存放的对应页面的数据，即得到当前页面的文字信息，通过修改content中的内容来反应当前页面中的文字内容。再通过同声传译将获取到的文字转为语音进行播放即可。