微信小程序經過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,
    })
    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('發送結束幀成功')
      }
    })
  },