微信小程序文字语音转换/中英文自动翻译
小程序登录： 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.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次/天。