本文主要是介绍微信小程序-使用微信同声传译插件实现语音识别,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
摘要
微信同声传译插件是微信自研的语音输入,文本翻译等功能的插件封装,用于提供给第三方小程序调用。
这里只使用此插件的语音输入功能实现语音识别,识别结果显示在输入框,并将识别结果传入后台进行查找,实现搜索功能。
效果图
添加同声传译插件
小程序管理后台-设置-第三方服务
目前最新版本为0.3.4
AppID:wx069ba97219f66d99
app.json
{..."plugins": {..."WechatSI": {"version": "0.3.4","provider": "wx069ba97219f66d99"}}
}
wxml
<!-- 搜索框 -->
<view class="searchBox"> <input type="text" name="id" value="{{inputValue}}" />
</view><!-- 语音识别长按键 -->
<view class="{{voiceBtn}}" bindtouchstart="touchStart" bindtouchend="touchEnd"> <image class="{{voiceStyle}}" src="/images/voice.png"></image> <text>长按说话</text>
</view>
<!-- 显示搜索到的垃圾 -->
<view><view wx:for="{{garSearchList}}" wx:key="item"><view id="{{item.gar_id}}" class="{{searchGar}}">{{item.gar_name}}</view> </view>
</view>
js
//获取应用实例
const app = getApp();
//引入插件:微信同声传译
var plugin = requirePlugin("WechatSI")
//获取全局唯一的语音识别管理器recordRecoManager
let manager = plugin.getRecordRecognitionManager()
Page({
data: {...
,
//微信插件同声传译实现语音识别
//初始化
initRecord: function() {
var that = this;
//有新的识别内容返回,则会调用此事件
manager.onRecognize = function (res) {
console.log("current result", res.result)
}
//正常开始录音识别时调用
manager.onStart = function (res) {
//提示录音开始
wx.showToast({
title: '开始录音',
})
console.log("成功开始录音识别", res)
}
//识别错误事件
manager.onError = function (res) {
console.error("error msg", res.msg)
}
//识别结束事件
manager.onStop = function (res) {
// console.log("record file path", res.tempFilePath)
// console.log("result", res.result)
if(res.result == ''){
//录音内容为空时
wx.showModal({
title: '提示',
content: '不好意思,典典没听清',
showCancel: false,
success: function (res) {}
})
return;
}
else{
//不为空时提示开始识别
wx.showToast({
title: '正在识别',
icon: 'loading'
})
var text = res.result.replace(/,/, ' ').replace(/。/gi, '');//正则去除识别结果结尾的句号
//将识别结果显示在输入框
that.setData({
inputValue: text
})
//调用接口,将识别结果传入后台查找对应垃圾
var apiRootPath = app.globalData.apiRootPath; //全局变量表示接口根目录,在app.js的globalData声明
wx.request({
url: apiRootPath + '文件名.php',
data: {
garbageName: text, //需要传入后台的字段
},
header: {'content-type': 'application/x-www-form-urlencoded'},
method: 'POST',
dataType: 'json',
responseType: 'text',
//成功调用
success: function (res) {
var resData = res.data;
// console.log(resData);
if (resData.status == "ok") {
//判断请求状态是否ok
if (resData.data == null) {
//如果没有记录 ...
}
else {
//有记录时
var resList = []; //记录保存到数组中
// console.log(resData);
resData.data.forEach(function (item, index) {
//item指数组中的每个元素值,index表示索引
//console.log(item);
resList.push(item);
});
that.setData({
garSearchList: resList,
...
});
}
}
...
},
...
})//request结束
}
}
},
//按住说话
touchStart: function(e){
this.setData({//用来变换按钮样式
//录音状态
voiceStyle: "voiceStyleDown"
})
//开始识别
manager.start({
lang: 'zh_CN', //识别的语言,目前支持zh_CN en_US zh_HK sichuanhua
duration: 60000, //指定录音的时长,单位ms,最大为60000。如果传入了合法的 duration ,在到达指定的 duration 后会自动停止录音
})
},
//松开结束
touchEnd: function(e){
this.setData({//用来变换按钮样式
voiceStyle: "voiceStyle"
})
//结束识别
manager.stop();
},
})
onLoad() {
var that = this;
/*识别语音*/
that.initRecord();
},
我们的小程序
这篇关于微信小程序-使用微信同声传译插件实现语音识别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!