小程序登录: https://mp.weixin.qq.com/
微信小程序的插件“同声传译”可以把文字转化成语音,也可以进行中英文的翻译。下面介绍一下具体用法。
一:同声传译插件添加
依次点击 设置(左侧边栏)->第三方设置
在插件管理中选择添加插件,在弹出的添加插件对话框中输入“同声传译”进行搜索,搜索到之后进行添加。
2、添加完成后,可以在详情中看到“同声传译”的APPID和版本号
二: 同声传译Demo开发
demo效果图如下:
1、输入文本,点击播放可以合成声音
2、输入文本,点击翻译可以进行翻译。
1、首先在app.json中添加插件
version插件详情中的版本号、provider是插件中的APPID
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.src this.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次/天。