微信小程序通過websocket實時語音識別的實現(xiàn)代碼

更新時間：2020年08月19日 11:25:02 作者：yiyou12138

這篇文章主要介紹了微信小程序通過websocket實時語音識別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

之前在研究百度的實時語音識別，并應用到了微信小程序中，寫篇文章分享一下。

先看看完成的效果吧

前置條件

申請百度實時語音識別key 百度AI接入指南

創(chuàng)建小程序

設置小程序錄音參數(shù)

在index.js中輸入

 const recorderManager = wx.getRecorderManager()
 const recorderConfig = { 
  duration: 600000, 
  frameSize: 5, //指定當錄音大小達到5KB時觸發(fā)onFrameRecorded
  format: 'PCM', 
  //文檔中沒寫這個參數(shù)也可以觸發(fā)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()
   }
  })
 },

 //監(jiān)聽websocket返回的數(shù)據(jù)
 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(() => 
   //發(fā)送數(shù)據(jù)幀
   _this.wsStart()
   console.log('WebSocket連接打開')
  })
  wx.onSocketError(function (res) {
   console.log('WebSocket連接打開失敗')
  })
  wx.onSocketClose(function (res) {
   console.log('WebSocket 已關閉！')
  })
 },

發(fā)送開始、音頻數(shù)據(jù)、結束幀

 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('發(fā)送開始幀成功')
   }
  })
 },

 wsSend(data){
  wx.sendSocketMessage({
   data:data,
   success(res){
    console.log('發(fā)送數(shù)據(jù)幀成功')
   }
  })
 },

 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('發(fā)送結束幀成功')
   }
  })
 },

小程序錄音回調

 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實時語音識別的實現(xiàn)代碼的文章就介紹到這了,更多相關微信小程序websocket實時語音識別內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

bootstrap-table實現(xiàn)服務器分頁的示例（spring 后臺）
本篇文章主要介紹了bootstrap-table實現(xiàn)服務器分頁的示例（spring 后臺），具有一定的參考價值，有興趣的可以了解一下
2017-09-09
JS 字符串連接[性能比較]
js字符串連接實現(xiàn)代碼。
2009-05-05
JavaScript數(shù)組及常見操作方法小結
這篇文章主要介紹了JavaScript數(shù)組及常見操作方法,結合實例形式總結分析了JavaScript數(shù)組的基本獲取、添加、刪除、排序、翻轉等相關操作技巧,需要的朋友可以參考下
2019-11-11
javascript 常見功能匯總
本文給大家匯總介紹了集中常見的功能，十分的實用，有需要的小伙伴可以參考下。
2015-06-06
JavaScript Event學習第六章事件的訪問
在這一章我會講解如何去訪問一個事件對象。
2010-02-02
微信小程序如何實現(xiàn)點擊圖片放大功能
這篇文章主要介紹了微信小程序如何實現(xiàn)點擊圖片放大功能,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-01-01
ES6 javascript中class靜態(tài)方法、屬性與實例屬性用法示例
這篇文章主要介紹了ES6 javascript中class靜態(tài)方法、屬性與實例屬性用法,結合實例形式分析了ES6中類的靜態(tài)方法、靜態(tài)屬性概念、功能、使用方法與相關注意事項,需要的朋友可以參考下
2017-10-10
JS實現(xiàn)隨機數(shù)生成算法示例代碼
JS實現(xiàn)隨機數(shù)生成算法的方法有很多，本文為大家介紹一個比較不錯的方法，代碼如下，感興趣的朋友可以參考下，希望對大家有所幫助
2013-08-08
js拖動滑塊和點擊水波紋效果實例代碼
在本文里面我們給大家分享了js實現(xiàn)拖動滑塊和點擊水波紋效果的相關實例代碼，有需要的朋友們學習下。
2018-10-10
小程序實現(xiàn)左右來回滾動字幕效果
這篇文章主要為大家詳細介紹了小程序實現(xiàn)左右來回滾動字幕效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12