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

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

由于目前使用官方推荐的添加方式无法查找到微信同声传译插件，因此，我们直接使用微信服务平台进行添加，操作步骤如下：
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 = thisvar 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 = ethis.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 = thisplugin.textToSpeech({lang: 'zh_CN',//content: "页面加载时播放的，可以加第一个滑块的内容",content:this.data.content[0],success: function (res) {that.playAudio(res.filename);},})
},
scroll: function (e) {this.swindex = e.detail.currentthis.innerAudioContext = wx.createInnerAudioContext();let that = thisplugin.textToSpeech({lang: 'zh_CN',content: this.data.content[this.swindex],success: function (res) {that.playAudio(res.filename);},})
},
playAudio(e) {this.innerAudioContext.src = ethis.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中的内容来反应当前页面中的文字内容。再通过同声传译将获取到的文字转为语音进行播放即可。

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

微信小程序 -- 语音合成：将文字转为语音（插件：微信同声传译）
直接上手吧. 1. 小程序后台添加插件:微信同声传译以及在app.json进行配置具体可看另外一篇博客:https://blog.csdn.net/qq_41638795/article/detai ...
微信小程序 -语音合成：将文字转为语音（小程序插件：微信同声传译）
1.小程序后台添加微信同声传译插件效果图: 2.wxml文件代码 <view class="yuyinWrap"><textarea class='yuyinC ...
「微信同声传译」小程序插件：快速实现语音转文字、文本翻译、语音合成等能力...
上期,我们在<「医院 LBS 位置服务」插件:输出LBS室内位置能力,为改善就医服务提供解决方案>一文中介绍了「医院 LBS 位置服务」小程序插件的意义.使用场景以及使用方法. 今天我们为 ...
微信小程序语音识别、语音合成（微信同声传译）使用代码实例
最近在开发一款"单词大作战"的微信小程序,想增加语音识别.语音合成这2个功能.(让用户能听到单词的读音,并对比自己读音是否标准正确). 查了一下资料,大概有几种方式:用百度翻译(需 ...
微信小程序 -- 获取语音，并将语音转为文字（插件：微信同声传译）
实现的功能是获取语音,并将语音转为文字,实现效果如下: 1. 小程序后台添加插件:微信同声传译登录小程序后台:https://mp.weixin.qq.com 11. 设 ...
uni-app 微信同声传译，实现AI语音功能（语音转文字，文字转语音，英汉互译
uni-app 微信同声传译,实现AI语音功能(语音转文字,文字转语音,英汉互译) 一:添加插件 1.登录微信公众号平台,进入左边导航栏的设置,选择第三方设置,,添加插件,申请添加微信同声传译插件 2 ...
小程序之定位语音识别=＞插件：微信同声传译
说明:文章部分内容及图片出自网络,如有侵权请与我本人联系(主页有公众号:小攻城狮学前端) 作者:小只前端攻城狮. 主页:小只前端攻城狮的主页. 首发:掘金 GitHub:P-J27. CSDN:PJ想 ...
（保姆教程及高级玩法及坑）微信同声传译插件-语音识别
目录一.背景二.效果编辑三.保姆级教程 3.1 小程序后台添加插件:微信同声传译 3.1.1 设置 -> 第三方设置 -> 添加插件 3.1.2 搜索插件 3.1.3 成功添加后 ...
微信小程序调用微信同声传译插件（中文识别）
微信小程序后台配置添加微信同声传译插件不再详述,具体可自行百度. app.json添加这段代码: "plugins": {"WechatSI": {" ...

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

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

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

三、滑块滑动

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

最新文章

热门文章