评论

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

微信小程序通过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.setData({
          textDis: 'none',
          value: result.result,
        })
      }
      if(result.type == 'FIN_TEXT'){
        let value = _this.data.text
        let tranStr = value + result.result
        _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,
    })
    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('录音停止')
    })
  },
  
  wsStopForAcc(){
    let _this = this
    this.setData({
      click: true,
    })
    let config = {
      type: "FINISH"
    }
    wx.sendSocketMessage({
      data:JSON.stringify(config),
      success(res){
        wx.hideLoading()
        console.log('发送结束帧成功')
      }
    })
  },
最后一次编辑于  2020-08-20  
点赞 4
收藏
评论

6 个评论

  • 冬极白星
    冬极白星
    01-07

    您好,我想问一下,我的onMesssage只会在isLastFrame为true的时候才能接收到一次消息,录音过程中的中间帧onMesssage没有反应,这是什么原因呢

    01-07
    赞同
    回复 2
    • 蓝山
      蓝山
      07-17
      您是怎么解决的
      07-17
      回复
    • 🌰
      🌰
      09-10
      同问 我也是过程中没有收到消息
      09-10
      回复
  • 李卓航
    李卓航
    01-03

    您好,请问源码可以分享吗

    01-03
    赞同
    回复
  • Olá.
    Olá.
    2021-07-12

    文章很棒,在小程序中使用websocket,也可以试试【GoEasy】这款websocket框架,原生支持心跳、断网重连、离线消息、历史消息等,接口也很简单,使用起来没什么难度的。

    2021-07-12
    赞同
    回复
  • 旭升
    旭升
    2021-01-05

    frameSize: 5,

    官方文档frameSize暂仅支持 mp3 格式?, 你用PCM为啥也可以?

    2021-01-05
    赞同
    回复 1
    • 浮生不歇
      浮生不歇
      2021-04-13
      可能是文档没更新吧  我试了PCM是可以的
      2021-04-13
      回复
  • 谋谋谋
    谋谋谋
    2020-08-19

    已阅 不孬

    2020-08-19
    赞同
    回复
  • 青寒
    青寒
    2020-08-19

    百度开放平台的东西还是挺多的,有一些很有意思。

    2020-08-19
    赞同
    回复 1
    • 浮生不歇
      浮生不歇
      2020-08-19
      谢谢点赞 O(∩_∩)O
      2020-08-19
      1
      回复
登录 后发表内容