1. 程式人生 > 程式設計 >微信小程式通過websocket實時語音識別的實現程式碼

微信小程式通過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.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實時語音識別內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!