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

 更新时间:2020年08月19日 11:25:02   作者:yiyou12138  
这篇文章主要介绍了微信小程序通过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实时语音识别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • JS获取对象属性API汇总枚举symbol

    JS获取对象属性API汇总枚举symbol

    这篇文章主要为大家介绍了JS获取对象属性API汇总可枚举性不可枚举性及symbol介绍,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • echarts X轴显示不全的处理方法(显示完全以及换行)

    echarts X轴显示不全的处理方法(显示完全以及换行)

    我们在echarts表中经常会出现X轴的信息显示不完全的情况,所以本文小编给大家介绍了echarts X轴显示不全的处理方法,文中通过代码示例给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下
    2024-01-01
  • Javascript实现计算个人所得税

    Javascript实现计算个人所得税

    用javascript脚本语言编写一个“个人所得税计算器”?计算公式:所得税=(月收入-起征额)*10%;重填就是全部清空;十分的实用,有需要的小伙伴可以参考下。
    2015-05-05
  • js怎么终止程序return不行换jfslk

    js怎么终止程序return不行换jfslk

    alert(3)就这么段程序,没有写在function中,想啊想,怎么终止js呢?jfslk也能达到一样的效果(终止js程序)
    2013-05-05
  • JS实现程序暂停与继续功能代码解读

    JS实现程序暂停与继续功能代码解读

    程序暂停与继续的实现方法有很多,在本文为大家介绍下js中是如果做到的,并对具体的功能代码进行注释说明,感兴趣的朋友不要错过
    2013-10-10
  • js 弹簧效果代码

    js 弹簧效果代码

    上次做图片滑动展示效果时做了减速效果,就想做一个加速效果。结合起来就想到了下面这个东西,当然只是类似弹簧,而不是真正的弹簧。
    2008-09-09
  • JS如何修改数组对象的Key和指定的值

    JS如何修改数组对象的Key和指定的值

    这篇文章主要介绍了JS如何修改数组对象的Key和指定的值,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-10-10
  • JavaScript实现清空(重置)文件类型INPUT元素值的方法

    JavaScript实现清空(重置)文件类型INPUT元素值的方法

    这篇文章主要介绍了JavaScript实现清空(重置)文件类型INPUT元素值的方法,结合实例形式分析了javascript清空input文本框的常用方法与实现技巧,需要的朋友可以参考下
    2016-11-11
  • js数组的五种迭代方法及两种归并方法(推荐)

    js数组的五种迭代方法及两种归并方法(推荐)

    下面小编就为大家带来一篇js数组的五种迭代方法及两种归并方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别

    javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别

    Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值,本文给大家介绍javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别,需要的朋友参考下
    2015-11-11

最新评论