前言：利用小程序自己的插件：微信同声传译
将识别出来的语音添加到自己想要放的位置
效果图：
步骤：
第一步：在小程序后台添加该插件
设置--》第三方设置--》插件管理
添加后的效果：
第二步：在app.json中添加此插件
它的版本号以及id通过详情获取
第三步：在需要用的wxml页面引入html相关代码
这是按钮的html代码
这是语音弹框的代码
第四步：对应页面的js文件
const plugin = requirePlugin('WechatSI');
const manager = plugin.getRecordRecognitionManager();
Page({
data:{
recordState: false,
questionForm:{
adders:'请选择位置',
msg:''
},
},
onLoad(options) {
this.initRecord();
},
// 手动输入内容
conInput: function (e) {
this.setData({
"questionForm.msg":e.detail.value,
})
},
//识别语音 -- 初始化
initRecord: function () {
const that = this;
// 有新的识别内容返回，则会调用此事件
manager.onRecognize = function (res) {
console.log(res)
}
// 正常开始录音识别时会调用此事件
manager.onStart = function (res) {
console.log("成功开始录音识别", res)
}
// 识别错误事件
manager.onError = function (res) {
console.error("error msg", res)
}
//识别结束事件
manager.onStop = function (res) {
console.log('..............结束录音',res)
console.log('录音临时文件地址 -->' + res.tempFilePath);
console.log('录音总时长 -->' + res.duration + 'ms');
console.log('文件大小 --> ' + res.fileSize + 'B');
console.log('语音内容 --> ' + res.result);
if (res.result == '') {
wx.showModal({
title: '提示',
content: '听不清楚，请重新说一遍！',
showCancel: false,
success: function (res) {}
})
return;
}
var text = that.data.questionForm.msg + res.result;
that.setData({
"questionForm.msg": text
})
}
},
//语音 --按住说话
touchStart: function (e) {
this.setData({
recordState: true //录音状态
})
// 语音开始识别
manager.start({
lang: 'zh_CN',// 识别的语言，目前支持zh_CN en_US zh_HK sichuanhua
})
},
//语音 --松开结束
touchEnd: function (e) {
this.setData({
recordState: false
})
// 语音结束识别
manager.stop();
},
})
第五步：css
.videoBtn {width: 50%;}
.videoBtn text{color:#fff;}
.videoBtnBg {background: #bdb4b4;}
.startYuyinImage {display:flex;justify-content:center;flex-flow: column;
position: fixed;
top: 216rpx;
left: 50%;
width: 240rpx;
height: 300rpx;
background: rgba(0, 0, 0, 0.6);
border-radius: 20rpx;
color: #fff;
text-align: center;
margin-left: -120rpx;}
.startYuyinImage cover-image {margin:0 auto; width:64rpx;height:100rpx;}
.startYuyinImage cover-view {margin-top: 25rpx;}
到这就已经完成了小程序自带插件：微信同声传译的简单使用 (#^.^#)
好文推荐
发表评论