微信小程序通过websocket实时语音识别的实现代码


Posted in Javascript onAugust 19, 2020

之前在研究百度的实时语音识别,并应用到了微信小程序中,写篇文章分享一下。

先看看完成的效果吧

微信小程序通过websocket实时语音识别的实现代码

前置条件

申请百度实时语音识别key 百度AI接入指南

创建小程序

设置小程序录音参数

在index.js中输入

const recorderManager = wx.getRecorderManager()
 const recorderConfig = { 
  duration: 600000, 
  frameSize: 5, //指定当录音大小达到5KB时触发onFrameRecorded
  format: 'PCM', 
  //文档中没写这个参数也可以触发onFrameRecorded的回调,不过楼主亲测可以使用
  sampleRate: 16000, 
  encodeBitRate: 96000, 
  numberOfChannels: 1 
 }

使用websocket连接

linkSocket() {
  let _this = this
  //这里的sn是百度实时语音用于排查日志,这里我图方便就用时间戳了
  let sn = new Date().getTime()
  wx.showLoading({
   title: '识别中...'
  })
  recorderManager.start(recorderConfig)
  //开启链接
  wx.connectSocket({
   url: 'wss://vop.baidu.com/realtime_asr?sn=' + sn,
   protocols: ['websocket'],
   success() {
    console.log('连接成功')
    _this.initEventHandle()
   }
  })
 },

 //监听websocket返回的数据
 initEventHandle() {
  let _this = this
  wx.onSocketMessage((res) => {
   let result = JSON.parse(res.data.replace('\n',''))
   if(result.type == 'MID_TEXT'){
    _this.tran(result.result, 'value')
    _this.setData({
     textDis: 'none',
     value: result.result,
    })
   }
   if(result.type == 'FIN_TEXT'){
    let value = _this.data.text
    let tranStr = value + result.result
    _this.tran(tranStr, 'text')
    _this.setData({
     value: '',
     valueEn: '',
     textDis: 'block',
     text: tranStr,
    })
   }
  })
  wx.onSocketOpen(() => 
   //发送数据帧
   _this.wsStart()
   console.log('WebSocket连接打开')
  })
  wx.onSocketError(function (res) {
   console.log('WebSocket连接打开失败')
  })
  wx.onSocketClose(function (res) {
   console.log('WebSocket 已关闭!')
  })
 },

发送开始、音频数据、结束帧

wsStart() {
  let config = {
   type: "START",
   data: {
    appid: XXXXXXXXX,//百度实时语音识别appid
    appkey: "XXXXXXXXXXXXXXXXXX",//百度实时语音识别key
    dev_pid: 15372,
    cuid: "cuid-1",
    format: "pcm",
    sample: 16000
   }
  }
  wx.sendSocketMessage({
   data:JSON.stringify(config),
   success(res){
    console.log('发送开始帧成功')
   }
  })
 },

 wsSend(data){
  wx.sendSocketMessage({
   data:data,
   success(res){
    console.log('发送数据帧成功')
   }
  })
 },

 wsStop(){
  let _this = this
  this.setData({
   click: true,
  })
  _this.stop()
  let config = {
   type: "FINISH"
  }
  wx.hideLoading()
  recorderManager.stop()
  wx.sendSocketMessage({
   data:JSON.stringify(config),
   success(res){
    console.log('发送结束帧成功')
   }
  })
 },

小程序录音回调

onShow: function () {
  let _this = this
  recorderManager.onFrameRecorded(function (res){
   let data = res.frameBuffer
   _this.wsSend(data)
  })

  recorderManager.onInterruptionBegin(function (res){
   console.log('录音中断')
   _this.wsStopForAcc()
  })

  recorderManager.onStop(function (res){
   console.log('录音停止')
  })
 },

到此这篇关于微信小程序通过websocket实时语音识别的实现代码的文章就介绍到这了,更多相关微信小程序websocket实时语音识别内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
JS实现炫酷雪花飘落效果
Aug 19 #Javascript
javascript实现雪花飘落效果
Aug 19 #Javascript
js实现直播点击飘心效果
Aug 19 #Javascript
js实现鼠标点击飘爱心效果
Aug 19 #Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 #Javascript
Vue实现导航栏菜单
Aug 19 #Javascript
vue实现tab栏点击高亮效果
Aug 19 #Javascript
You might like
一个好用的分页函数
2006/11/16 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
Python基础语法(Python基础知识点)
2016/02/28 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
django创建超级用户过程解析
2019/09/18 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
如何清空python的变量
2020/07/05 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
商场消防管理制度
2014/01/12 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
自荐信格式模板
2015/03/27 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript
pandas中关于apply+lambda的应用
2022/02/28 Python
Golang 对es的操作实例
2022/04/20 Golang