微信小程序同声传译 Face2FaceTranslator 开发

腾讯开源了微信小程序的同声传译插件 Face2FaceTranslator ;开发者可以在小程序使用同声传译的功能，以下是本人在项目中做的 demo；我们的小程序是用美团的 mpvue 做的。

Face2FaceTranslator github链接（官方demo）
Face2FaceTranslator 官方开发文档

第一步：配置微信公众平

首先，需要在微信公众平台配置，以下是配置步骤：
打开微信公众平台，点击设置 => 第三方服务 => 添加插件

搜索同声传译，点击添加：

第二步：在代码里添加功能：

以下代码为关键部分代码，因为用 mpvue 开发，所以为 vue 编程风格，开发者可以根据自己情况进行修改。

首先要在 main.js 中配置

// main.js 需要在配置文件中配置插件export default {config: {pages: ['^pages/imSceneDoctor/imSceneDoctor',],window: {backgroundTextStyle: 'light',backgroundColor: "#000",navigationBarBackgroundColor: '#ffffff',navigationBarTitleText: '同声传译 demo',navigationBarTextStyle: 'black'},plugins: {"WechatSI": {"version": "0.0.6","provider": "wx069ba97219f66d99"}}}
}

然后在开发的文件使用（imSceneDoctor.vue 中关键的代码）。

// imSceneDoctor.vue<template><ul class="footer-box-bottom"><li class="bottom-item" @touchstart='streamRecord(0)' @touchend='streamRecordEnd()'><figure class="bottom-item-content"><img class="bottom-item-image" src="https://m.allinmed.cn/static/image/imScene/picture@2x.png" width="350"height="234"/><figcaption class="bottom-item-description">智能语音</figcaption></figure></li><li class="bottom-item" @touchstart='streamRecord(1)' @touchend='streamRecordEnd()'><figure class="bottom-item-content"><img class="bottom-item-image" src="https://m.allinmed.cn/static/image/imScene/pictures@2x.png"width="350"height="234"/><figcaption class="bottom-item-description">中=>英</figcaption></figure></li><li class="bottom-item" @touchstart='streamRecord(2)' @touchend='streamRecordEnd()'><figure class="bottom-item-content"><img class="bottom-item-image" src="https://m.allinmed.cn/static/image/imScene/pictures@2x.png"width="350"height="234"/><figcaption class="bottom-item-description">英=>中</figcaption></figure></li></ul>
</template><script type="text/ecmascript-6">// 获取**全局唯一**的语音识别管理器**recordRecoManager**const plugin = requirePlugin("WechatSI");const manager = plugin.getRecordRecognitionManager();export default {data() {return {currentTranslateVoice: '', // 当前播放语音路径sendTextContent:'', // 展示的语音内容connectNum: 0,recordType:0, // 录音类型：0，中文录音；1，中文翻译英文；2，英文翻译中文}},onLoad() {this.getRecordAuth();},mounted() {this.initRecord();},methods: {// 权限询问getRecordAuth () {wx.getSetting({success(res) {console.log("succ")console.log(res)if (!res.authSetting['scope.record']) {wx.authorize({scope: 'scope.record',success() {// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问console.log("succ auth")}, fail() {console.log("fail auth")}})} else {console.log("record has been authed")}}, fail(res) {console.log("fail")console.log(res)}})},/*** 初始化语音识别回调* 绑定语音播放开始事件*/initRecord: function() {//有新的识别内容返回，则会调用此事件manager.onRecognize = (res) => {let currentData = Object.assign({}, this.sendTextContent, {text: res.result,})this.sendTextContent = res.result;}// 识别结束事件manager.onStop = (res) => {let text = res.resultconsole.log('识别结束');console.log(res);this.sendTextContent = res.result;if (this.recordType) {this.translateText(res.result)}}// 识别错误事件manager.onError = (res) => {console.log(res);}// 语音播放开始事件wx.onBackgroundAudioPlay(res=>{const backgroundAudioManager = wx.getBackgroundAudioManager()let src = backgroundAudioManager.srcthis.currentTranslateVoice = src;})},/*** 按住按钮开始语音识别*/streamRecord: function(type) {// 先清空背景音let param;wx.stopBackgroundAudio();this.recordType = type;if (type == 2) {param = 'en_US';} else {param = "zh_CN";}manager.start({lang: param,})},/*** 松开按钮结束语音识别*/streamRecordEnd: function(e) {manager.stop()},/*** 翻译*/translateText: function(text) {let lfrom =  this.recordType === 1 ? 'zh_CN' : 'en_US';let lto = this.recordType === 1 ? 'en_US':'zh_CN';plugin.translate({lfrom: lfrom,lto: lto,content: text,tts: true,success: (resTrans)=>{console.log(resTrans);let passRetcode = [0, // 翻译合成成功-10006, // 翻译成功，合成失败-10007, // 翻译成功，传入了不支持的语音合成语言-10008, // 翻译成功，语音合成达到频率限制]if(passRetcode.indexOf(resTrans.retcode) >= 0 ) {this.sendTextContent = resTrans.result;} else {console.warn("翻译失败", resTrans, item)}},fail: function(resTrans) {console.error("调用失败",resTrans, item)},complete: resTrans => {wx.hideLoading()}})},}}
</script>

备注：
以上只是个小 demo，并且正常运行，然而并没有考虑多种边界情况，如果开发者需要在项目正常使用，也请参考官方demo（上方有 github 地址）。

微信小程序同声传译 Face2FaceTranslator 开发相关推荐

微信小程序“同声传译”插件（语音识别，语音合成）体验
本文原文:http://www.happycxz.com/m/?p=383 官方插件上线微信小程序"同声传译"插件介绍传送门遥知之改版原来使用的是我自己封装的API,现在改 ...
微信小程序同声传译开发（语音识别、语音输入转文字）开发教程
微信同声传译插件是微信自研的语音输入,文本翻译等功能的插件封装,用于提供给第三方小程序调用. 1.小程序后台进行配置在浏览器搜索微信公众平台,微信扫码登录小程序.点击设置->第三方设置-> ...
微信小程序同声传译使用总结
最近在做项目中需要使用录音转文字,之前用微信SDK可以直接使用wx.translateVoice({}),但是小程序中没有提供此类方法,没办法只能查资料解决了,看了好多大多是保存当前录音文件掉讯飞接口 ...
微信小程序图片无法存入云开发数据库，求解决
微信小程序图片无法存入云开发数据库,求解决上传图片的js代码片段上传图片的js代码片段上传图片的js代码片段,觉得自己代码的没错,也能打印出来上传的图片地址,但是发现并没有存进数据库,求大神指点 ...
微信小程序上传阿里云视频文件流程及代码
为了微信小程序客服端实现自拍视频能够分享给多个好友,我们需要把小程序自拍的视频存储到服务器,而阿里云在性能和速度上比较不错,所以我们选择了阿里云作服务器. 第一步.微信小程序项目创建 1. 到http ...
微信小程序上传后进行性手机扫码阅览发现白屏的解决
目录问题: 微信小程序上传后进行性手机扫码阅览发现白屏的解决 1.上传时没有勾选保护 2.请求的域名没有配置问题: 微信小程序上传后进行性手机扫码阅览发现白屏的解决 1.上传时没有勾选保护 ...
微信小程序 – 美甲商城项目实战开发全集
目录: 微信小程序 - 美甲商城项目实战开发全集 ┣━━1.配置和目录结构.mp4 ┣━━2.小程序注册.mp4 ┣━━3.小程序的语句判断.mp4 ┣━━4.组件(视图容器和基本内容).mp4 ┣━ ...
微信小程序上传文件组件
微信小程序上传文件一.说明该拍照组件带有微信授权相机功能,会结合后端接口,将上传的图片以数组集合的形式传值给父级页面. 注意:组件适用于,单独上传图片,不携带参数,结合后端接口返回路径之后,再调用 ...
uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器（H5上传-微信小程序上传）
前言最近在使用uni-app写H5移动端,有一个从手机拍摄从相册选择获取图片上传到文档服务器功能. 查阅uni-app发现关于上传图片,uni-file-picker文件上传,uni.chooseI ...
php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例
本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家. 一.知识点 1.实现动态显示和隐藏某个控件列表1data:{ open:false }, showitem:function() ...

微信小程序同声传译 Face2FaceTranslator 开发

微信小程序同声传译 Face2FaceTranslator 开发

第一步：配置微信公众平

第二步：在代码里添加功能：

微信小程序同声传译 Face2FaceTranslator 开发相关推荐

最新文章

热门文章