微信小程序通过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 相关文章推荐
javascript中的缓动效果实现程序
Dec 29 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
webpack多页面开发实践
Dec 18 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
简单了解JavaScript作用域
Jul 31 Javascript
Vue父子组件传值的一些坑
Sep 16 Javascript
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
ZendFramework2连接数据库操作实例
2017/04/18 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
汽车销售求职自荐信
2013/10/01 职场文书
户外活动策划方案
2014/03/12 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
会议室标语
2014/06/21 职场文书
师范类求职信
2014/06/21 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
Js类的构建与继承案例详解
2021/09/15 Javascript