微信小程序前台调用讯飞语音识别接口

开整

之前我这边微信小程序调用讯飞的接口还是发一段音频到后台再去连接讯飞的websocket 真的贼慢要是两三秒的还好稍微长一点就GG
最近突然发现微信小程序有PCM格式了所以就直接用小程序前台websocket连接了
代码在下面
讯飞账号的申请我就不说了
首先是微信小程序先得录音设置一下变量什么的

const app = getApp()
const recorderManager = wx.getRecorderManager();
var wxst; //语音websocket
var status = 0;  // 音频的状态
var iatResult = [] // 识别结果
const searchoptions = {duration: 60000,//指定录音的时长，单位 mssampleRate: 8000,//采样率numberOfChannels: 1,//录音通道数encodeBitRate: 48000,//编码码率format: 'PCM',//音频格式frameSize: 5,//指定帧大小，单位 KB
}

然后就是来个点击事件开启咱们的录音获取讯飞鉴权的是个接口因为之前后台写过就用了同时也可以后台记录一下使用的次数什么的
java这边的代码

public static String getAuthUrl(String hostUrl, String apiKey, String apiSecret) throws Exception {URL url = new URL(hostUrl);SimpleDateFormat format = new SimpleDateFormat("EEE, dd MMM yyyy HH:mm:ss z", Locale.US);format.setTimeZone(TimeZone.getTimeZone("GMT"));String date = format.format(new Date());StringBuilder builder = new StringBuilder("host: ").append(url.getHost()).append("\n").//append("date: ").append(date).append("\n").//append("GET ").append(url.getPath()).append(" HTTP/1.1");//System.out.println(builder);Charset charset = Charset.forName("UTF-8");Mac mac = Mac.getInstance("hmacsha256");SecretKeySpec spec = new SecretKeySpec(apiSecret.getBytes(charset), "hmacsha256");mac.init(spec);byte[] hexDigits = mac.doFinal(builder.toString().getBytes(charset));String sha = Base64.getEncoder().encodeToString(hexDigits);//System.out.println(sha);String authorization = String.format("api_key=\"%s\", algorithm=\"%s\", headers=\"%s\", signature=\"%s\"", apiKey, "hmac-sha256", "host date request-line", sha);//System.out.println(authorization);HttpUrl httpUrl = HttpUrl.parse("https://" + url.getHost() + url.getPath()).newBuilder().//addQueryParameter("authorization", Base64.getEncoder().encodeToString(authorization.getBytes(charset))).//addQueryParameter("date", date).//addQueryParameter("host", url.getHost()).//build();return httpUrl.toString();}

开始录音的点击事件

start_say: function (e) { //开始录音按钮var that = this;wx.getSetting({//查看用户有没有开启语音权限success(res) {if (res.authSetting['scope.record']) {wx.authorize({scope: 'scope.record',success() {var xfurl = "";wx.request({//请求接口 获取讯飞语音鉴权url: 接口地址,method: "get",header: {'content-type': 'application/json' // 默认值},success: function (res) {if (res.data.code == "200" && res.data.data) {xfurl = res.data.data;wxst = wx.connectSocket({ // 开启websocket连接url: xfurl,method: 'GET',success: function (res) {that.setData({//我这里是个遮罩层 开启他shows: true,})recorderManager.start(searchoptions);//开始录音}});} else {wx.showToast({title: '获取语音鉴权失败',icon: 'none',mask: true,duration: 3000})}},fail: function () {wx.showToast({title: '获取语音鉴权失败',icon: 'none',mask: true,duration: 3000})}})},fail() {wx.showModal({title: '微信授权',content: '您当前未开启语音权限，请在右上角设置(···)中开启“录音功能”',showCancel: false,success(res) {if (res.confirm) {console.log('用户点击确定')}}})}})}else{wx.showModal({title: '微信授权',content: '您当前未开启语音权限，请在右上角设置(···)中开启“录音功能”',showCancel: false,success(res) {if (res.confirm) {console.log('用户点击确定')}}})}}})}

关闭录音的点击事件

end_say: function () { //结束录音按钮var that = this;recorderManager.stop();that.setData({//关闭遮罩层shows: false,})}

之后就是关于录音和websocket的监听我这边是先开启websocket 之后再去录音
录音的监听

onShow: function() {var that = this;recorderManager.onStart(() => {//开始录音时触发status = 0;iatResult = []console.log('recorder start')});recorderManager.onError((res) => {//错误回调console.log(res);});recorderManager.onStop((res) => {//结束录音时触发console.log('recorder stop', res)status = 2;var sendsty = '{"data":{"status":2,"audio":"","format":"audio/L16;rate=8000","encoding":"raw"}}'wxst.send({data: sendsty})});recorderManager.onFrameRecorded((res) => {//每帧触发const { frameBuffer } = resvar int16Arr = new Int8Array(res.frameBuffer);const base64 = wx.arrayBufferToBase64(int16Arr)switch (status) {case 0:status = 1;var sendsty = '{"common":{"app_id":"讯飞的appid"},"business":{"language":"zh_cn","domain":"iat","accent":"mandarin","dwa":"wpgs","vad_eos":1000},"data":{"status":0,"format":"audio/L16;rate=8000","encoding":"raw","audio":"' + base64 + '"}}'wxst.send({data: sendsty})break;case 1:var sendsty = '{"data":{"status":1,"format":"audio/L16;rate=8000","encoding":"raw","audio":"' + base64 + '"}}'wxst.send({data: sendsty})break;default:console.log("default");}})}

关于websocket的监听

onLoad: function(options) {var that = this;wx.onSocketOpen((res) => {// websocket打开console.log('监听到 WebSocket 连接已打开' + res);})wx.onSocketError((err) => {//连接失败console.log('websocket连接失败', err);wx.showToast({title: 'websocket连接失败',icon: 'none',duration: 2000,mask: false})})wx.onSocketMessage((res) => {//接收返回值var data = JSON.parse(res.data)if (data.code != 0) {console.log("error code " + data.code + ", reason " + data.message)return}let str = ""if (data.data.status == 2) {//最终识别结果// data.data.status ==2 说明数据全部返回完毕，可以关闭连接，释放资源wxst.close();} else {//中间识别结果}iatResult[data.data.result.sn] = data.data.resultif (data.data.result.pgs == 'rpl') {data.data.result.rg.forEach(i => {iatResult[i] = null})}iatResult.forEach(i => {if (i != null) {i.ws.forEach(j => {j.cw.forEach(k => {str += k.w})})}})that.setData({searchKey: str //这个是中间的语音识别结果})})wx.onSocketClose((res) => {//WebSocket连接已关闭！var that = this;recorderManager.stop();that.setData({//把之前开开的遮罩层关上shows: false,})var str = that.data.searchKey;console.log(str);str = str.replace(/\s*/g, "");//去除空格if (str.substr(str.length - 1, 1) == "。") {//去除句号str = str.substr(0, str.length - 1);}that.setData({searchKey: str//这个是最后确定的语音识别结果})console.log('WebSocket连接已关闭！')})}

ok 大体上就是这样试了一下一般说完话1秒左右会全部识别完毕还是挺好了这样用户体验也不错
第一次写文章有什么不好的地方大家一起交流欢迎留言奥力给

微信小程序前台调用讯飞语音识别接口相关推荐

小程序php调用腾讯视频,如何用微信小程序来看腾讯视频？观看视频的办法
软件安装:腾讯视频腾讯视频于2016年底提出了全新的品牌理念--"不负好时光",以更加年轻化.更能引起用户情感共鸣的定位全新亮相,并展现了全新品牌标识.秉承"内容为王, ...
微信小程序接入腾讯地图sdk地图用户自选位置。踩坑+代码实现
采坑记录: 1.微信小程序对腾讯地图的支持好.拓展强,不建议使用其他地图 2.坐标问题** 高德地图与腾讯地图使用的是 GCJ02坐标系 3.使用微信小程序的内置方法的经纬度存在偏差.解决方案看下文 ...
微信小程序使用腾讯地图进行路线规划，坐标转地址，逆地理编码，计算目的地跟自身定位的距离
微信小程序使用腾讯地图 1.介绍腾讯地图官方文档: https://lbs.qq.com/ 这里,我主要运用的是这几个api ,我在运用的过程中主要实现的功能有:地图路线规划.地址转坐标+计算距离. ...
腾讯小程序 java编写_微信小程序使用腾讯地图SDK详解及实现步骤
微信小程序使用腾讯地图SDK详解及实现步骤近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下! 使用起来非常简单,就是一些功能还有待完善. 官方文档:http:// ...
微信小程序集成腾讯IM，实现实时音视频通话，1V1聊天
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
微信小程序使用腾讯IM
微信小程序使用腾讯IM 微信小程序内接腾讯IMSDK流程. 1.登录有userSig的话,直接登录IM,登录失败或没有userSig则去后台获取userSig(因为安全原因,userSig由后端去腾 ...
微信小程序怎么调用本机地图APP ？
引言:实现微信小程序调用外部地图APP,类似微信聊天,打开别人发送的位置,然后自动识别当前手机中已有的地图APP,效果如下图所示: 此功能,主要在js上做处理: 微信小程序引用腾讯地图sdk,首先需要 ...
微信小程序利用腾讯云IM发送语音 + 图片
微信小程序利用腾讯云IM发送语音 + 图片能做到这里说明你已经可以发送普通文本了如果没有的话可以看一下我的上一篇文章有完整的讲解效果图语音聊天发送图片传送 → 发送图片发送语音 ** ...
微信小程序_调用openAi搭建虚拟伙伴聊天
微信小程序_调用openAi搭建虚拟伙伴聊天背景效果关于账号注册接口实现 8行python搞定小程序实现页面结构数据逻辑结束背景从2022年的年底,网上都是chagpt的传说,个人 ...

微信小程序前台调用讯飞语音识别接口

微信小程序前台调用讯飞语音识别接口相关推荐

最新文章

热门文章