微信小程序文字语音转换/中英文自动翻译

小程序登录： https://mp.weixin.qq.com/

微信小程序的插件“同声传译”可以把文字转化成语音，也可以进行中英文的翻译。下面介绍一下具体用法。

一：同声传译插件添加

依次点击设置(左侧边栏）->第三方设置
在插件管理中选择添加插件，在弹出的添加插件对话框中输入“同声传译”进行搜索，搜索到之后进行添加。

2、添加完成后，可以在详情中看到“同声传译”的APPID和版本号

二：同声传译Demo开发

demo效果图如下：
1、输入文本，点击播放可以合成声音
2、输入文本，点击翻译可以进行翻译。

1、首先在app.json中添加插件
version插件详情中的版本号、provider是插件中的APPID

 "plugins": {"WechatSI": {"version": "0.3.3","provider": "wx069ba97219f66d99"}}

2、页面效果

WXML代码内容

 <textarea class="textarea-container" placeholder='请输入内容' value='{{content}}' bindinput='inputChange'>
</textarea><view class='btn-container' bindtap="playVoice"><view>播放声音</view>
</view><view class='btn-container' bindtap="translateToEnglish"><view>中译英(文字翻译)</view>
</view><view class='btn-container' bindtap="translateToChinese"><view>英中译(文字翻译)</view>
</view><view class="cell-title">翻译结果</view>
<view class="cell-content">{{translateResult}}</view>

WXSS文件内容

.textarea-container{border:1rpx solid rgba(112, 195, 160, 1);width:690rpx;margin-left:30rpx;margin-top: 30rpx;height:200rpx;
}.btn-container {width: 100%;padding: 20rpx 0;background-color: white;display: flex;justify-content: center;bottom: 0;left: 0;
}.btn-container view {display: flex;justify-content: center;height: 88rpx;width: 680rpx;background: rgba(112, 195, 160, 1);border-radius: 10rpx;align-items: center;color: white;
}.cell-title{color:#333;margin-top: 50rpx;font-size:35rpx;margin-left: 30rpx;font-weight: 500;border-bottom: 1px solid rgba(112, 195, 160, 1);
}.cell-content{color:#888888;margin-top: 50rpx;font-size:30rpx;margin-left: 30rpx;font-weight: 500;
}

3 对应JS的实现

const app = getApp();
const plugin = requirePlugin('WechatSI');
Page({data: {content: '今天是个好天气',src: '',translateResult: '此处显示翻译结果'},onReady(e) {this.innerAudioContext = wx.createInnerAudioContext();this.innerAudioContext.onError(function(res) {console.log(res);wx.showToast({title: '语音播放失败',icon: 'none',})})},inputChange: function(e) {this.setData({content: e.detail.value,})},playVoice: function(e) {var that = this;var content = this.data.content;plugin.textToSpeech({lang: "zh_CN",tts: true,content: content,success: function(res) {console.log(res);console.log("succ tts", res.filename);that.setData({src: res.filename})that.play();},fail: function(res) {console.log("fail tts", res)}})},play: function(e) {if (this.data.src == '') {console.log(暂无语音);return;}this.innerAudioContext.src = this.data.srcthis.innerAudioContext.play();},stopVoice: function(e) {this.innerAudioContext.pause();},translateToEnglish: function(e) {var that = this;that.translate("zh_CN", "en_US")},translateToChinese: function(e) {var that = this;that.translate("en_US", "zh_CN")},translate: function(lfrom, lto) {var that = this;var content = this.data.content;plugin.translate({lfrom: lfrom,lto: lto,content: content,success: function(res) {if (res.retcode == 0) {console.log("result", res.result)that.setData({translateResult: res.result})} else {console.warn("翻译失败", res)that.setData({translateResult: "翻译失败"})}},fail: function(res) {console.log("网络失败", res)that.setData({translateResult: "网络失败"})}})}})

注意：
同声传译默认配额如下，如果想要更多配额需要提交申请。
语音输入配额：每个小程序250条/分钟，3w条/天。
文本翻译配额：每个小程序500次/分钟，10w次/天。
语音合成配额：每个小程序100次/分钟，2w次/天。

微信小程序文字语音转换/中英文自动翻译相关推荐

微信小程序的语音输入功能开发：微信同声传译插件
微信小程序的语音输入,语音转文字功能在很多场景要使用到比如搜索框,搜索关键字的时候用语音输入比用文字方便多了再比如再天下网吧小程序里发帖,发布回复时,用语音输入比输入文字也方便不少那么如何实现语 ...
微信php echo换行,微信小程序文字显示换行问题
微信小程序文字显示换行问题小程序文字显示换行问题用户在上传图文时,输入换行符.导致我在拿到数据后JSON.parse的时候报错. 大概这样的结构: [{ text:'落魄前端在线炒粉!!!' ...
解决微信小程序银行卡号输入转换格式
解决微信小程序银行卡号输入转换格式问题 ps:2017-02-17 19:44 (发现新bug,暂已解决优化中) 新手第一次写博客,请多多见谅! (感觉会有更好的办法,希望有大牛能对我指点指点) 输入 ...
微信小程序将语音输入转化成文字
微信同声传译微信同声传译插件是微信自研的语音输入,文本翻译等功能的插件封装,用于提供给第三方小程序调用. 官网地址:微信小程序同声转译 1.先在 app.json 里面进行配置在与 pages t ...
微信小程序----实现语音的录制，并将语音转为文字
最近在开发微信小程序,遇到一个需求,实现类似于微信发送语音的效果,但是我这个是发送语音后直接转为文字展示. 先说微信小程序的textarea 0/200. 是限制用户输入的最长长度 0这个位置首先是 ...
微信小程序文字转语音并播放
深知像我这种小白对不懂得绝望,希望可以帮助到别人,本文步骤较为详细在微信小程序中,识别语音转文字或者文字转语音,可以使用官方自带的插件:微信同声传译插件使用方法: 第一步:首先登录微信公众平台,找 ...
微信小程序之语音导播--悦行 1.0
微信小程序----悦行背景: 随着人民生活水平的提高和我国交通系统的逐步发达,旅游行业越来越兴旺.国家"十二五"规划指出大力发展国内旅游,走内涵式发展道路,实现速度.结构.质量. ...
微信小程序中base64转换成图片；uni-app小程序base64转图片；微信小程序base64文件转图片；微信小程序base64图片转图片
将微信小程序的图片转成base64 点击此链接看另一篇以下是将后端返回的base64转成图片: 方法1:使用微信小程序自带方法 //把base64转换成图片getBase64ImageUrl: (b ...
微信小程序中base64转换成图片
//把base64转换成图片getBase64ImageUrl: function(data) {/// 获取到base64Datavar base64Data = data;/// 通过微信小程序自 ...
前端技术栈：将微信小程序代码自动转换成 Vue 代码
前段时间做了一个微信小程序,使用了云开发,但是云开发对业务逻辑的限制实在是太多了,因此想将其重构成 uni-app.最近将 wxml 改成 Vue 实在让人头大,因此"偷懒"使用 ...

微信小程序文字语音转换/中英文自动翻译

微信小程序文字语音转换/中英文自动翻译相关推荐

最新文章

热门文章