效果图:
插件:
采用小程序插件:微信同声传译。插件文档定位
具体步骤:
- 先登录小程序后台(项目别错了):官网传送
- 然后 设置 => 第三方设置 => 添加插件
- 在插件文档里面拿到Appid和版本号
- 在manifest.json切换成源码视图 然后在appid同级目录添加插件
- 然后就是引用插件,开始使用了
完整代码:
<template>
<view>
<view class="voicepad">
{
{voiceState}}
</view>
<button class="cu-btn bg-green voicebtn " @touchstart="touchStart" @touchend="touchEnd">
<image src="../../static/logo.png" mode="widthFix" style="width: 50rpx;"></image>
</button>
<view class="center" style="background-color: #555555; color: #FFF;" v-show="isShow">
正在录音...
</view>
</view>
</template>
<script>
var plugin = requirePlugin("WechatSI")
let manager = plugin.getRecordRecognitionManager();
export default {
data() {
return {
voiceState: "你可以这样说...",
isShow: false
}
},
onShow() {
},
onLoad() {
this.initRecord();
},
methods: {
touchStart() {
this.isShow = true
manager.start({
//指定录音的时长,单位ms,最大为60000
duration: 60000,
//识别的语言,目前支持zh_CN en_US zh_HK
lang: "zh_CN"
});
},
touchEnd() {
uni.showToast({
title: '录音完成',
icon: "none"
})
this.isShow = false
manager.stop();
},
/**
* 初始化语音识别回调
* 绑定语音播放开始事件
*/
initRecord() {
manager.onStart = (res) => {
console.log('start', res.msg);
this.voiceState = res.msg;
};
//有新的识别内容返回,则会调用此事件
manager.onRecognize = (res) => {
this.voiceState = res.result;
console.log('onRecognize');
}
// 识别结束事件
manager.onStop = (res) => {
this.voiceState = res.result;
console.log('onStop', res.result);
}
// 识别错误事件
manager.onError = (res) => {
this.voiceState = res.msg;
console.log('onError');
}
},
}
}
</script>
<style>
.voicebtn {
height: 130upx;
display: block;
width: 130upx;
line-height: 130upx;
border-radius: 65upx;
font-size: 50upx;
position: absolute;
top: 1060upx;
left: 310upx;
}
.voicepad {
height: 250upx;
width: 680upx;
background: #fff;
margin: 30upx auto;
border-radius: 8upx;
padding: 20upx;
font-size: 35upx;
}
.center {
text-align: center;
align-items: center;
width: 200rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20rpx;
border-radius: 20rpx;
/* height: 50rpx; */
opacity: 0.8;
}
</style>
注解:
@touchstart="touchStart" 手指触摸动作开始触发
@touchend="touchEnd" 手指触摸动作结束触发
问题:
有的朋友启用真机调试可以会报:error occurs:no such file or directory, access 'wxfile://usr/miniprogramLog/log2'
将2.0转为1.0就行了,发布后可正常 不会出现问题