小程序调用科大讯飞无服务器代理流程二

上一篇介绍了小程序调用科大讯飞语音转文字功能服务器访问流程，这次继续上次内容介绍提交数据和数据解析功能。这里要着重强调下在做测试阶段一定要使用真机测试电脑端的数据格式可能有误差，为了保证数据的可靠性以及响应效率推荐使用手机测试。

第一步:录音文件数据提取，在使用小程序录制文件成功后我们需要用到onFrameRecorded这个方法将当前的语音数据转为buff存放数组中从而进行与科大讯飞服务器的提交。

onLoad:function (options) {
    const that = this
    this.recorderManager = wx.getRecorderManager();
    this.options = {
      duration: 60000, // 指定录音的时常，单位ms
      sampleRate: 8000, // 采样率
      numberOfChannels: 1, // 录音通道数
      encodeBitRate: 48000, // 编码码率
      format: 'PCM', // 音频格式
      frameSize: 5, // 指定帧大小，单位KB
    }
    this.recorderManager.onError(function () {
      that.tip("录音失败！")
    })
    this.recorderManager.onStop(function (res) {
      src = res.tempFilePath;
      console.log(res.tempFilePath)
      that.startUpRecord()
    })
//解析当前录制音频每一帧内容保存数组准备提交科大讯飞进行语音文字转换（audioData 为提交数据数组）
    this.recorderManager.onFrameRecorded((res) => {
      const { frameBuffer } = res
      let u8Arr = new Uint8Array(frameBuffer)
      audioData.push(u8Arr)
    })
    this.innerAudioContext = wx.createInnerAudioContext()
    this.innerAudioContext.onError((res) =>{
      that.tip(res)
    })
  },

第二步：数据提交，在提交数据时我们需要将上一步存放内容的数组中的数据转为base64的字符串用以提交。

 webSocketSend:function() {
    console.log('开始发送数据')
    let that = this
    let audioDataUp = audioData
    var params = {
      common: {
        app_id:"科大讯飞控制台获取",
      },
//设置提交格式
      business: {
        language:'zh_cn',
        domain:'iat',
        accent:'mandarin',
      },
//提交内容的处理
      data: {
        status: 0,
        encoding: 'raw',
        format: 'audio/L16;rate=8000',
        audio: that.uint8arrayToBase64(audioDataUp[0]),//将提交数据转为base64编码
      },
    }
    socketTask.send({data: JSON.stringify(params)})
    handlerInterval = setInterval(() => {
      // websocket未连接
      if (!socketTask) {
        clearInterval(handlerInterval)
        return
      }
      // 最后一帧
      if (audioData.length === 0) {
          console.log('数据发送完毕')
          socketTask.send(
            {data:
            JSON.stringify({
              business: {
                "language":"zh_cn",
                "domain":"iat",
                "accent":"mandarin"
              },
              data: {
                status: 2,
                encoding: 'raw',
                format: 'audio/L16;rate=8000',
                audio: '',
              },
            })}
          )
          audioData = []
          clearInterval(handlerInterval)
        
        return false
      }
      audioDataUp = audioData.splice(0, 1)
      // 中间帧
      console.log('audioDataUp:',audioDataUp[0])
      socketTask.send(
        {
          data:
        JSON.stringify({
          business: {
            "language":"zh_cn",
            "domain":"iat",
            "accent":"mandarin"
          },
          data: {
            status: 0,
            encoding: 'raw',
            format: 'audio/L16;rate=8000',
            audio: that.uint8arrayToBase64(audioDataUp[0]),
          },
        })}
      )
    }, 40)
  },
  result(resultData) {
    socketTask.close()
  },

将音频数据转为base64方法

先在小程序中引入base64.js文件

const Base64 = require('../../base64js').Base64;

uint8arrayToBase64 : function(u8Arr) {
  try{
         let CHUNK_SIZE = 0x8000; //arbitrary number
         let index = 0;
         let length = u8Arr.length;
         let result = '';
         let slice;
         while (index < length) {
             slice = u8Arr.subarray(index, Math.min(index + CHUNK_SIZE, length));
             result += String.fromCharCode.apply(null, slice);
             index += CHUNK_SIZE;
         }
         // web image base64图片格式: "data:image/png;base64," + b64encoded;
         // return  "data:image/png;base64," + btoa(result);
         return Base64.btoa(result);
     }
     catch(e) {
         throw e;
     }
},

第三步 科大讯飞返回数据的接收和使用

  startUpRecord:function(){
    let that = this
    const app = getApp();
    const hosturl = app.globalData.hosturl;
      let newURL = hosturl
      socketTask = wx.connectSocket({
        url: newURL,
      })
      socketTask.onOpen(()=>{
        console.log('打开了socket')
        that.webSocketSend()
      })
      socketTask.onMessage((e)=>{
        // result 内包含科大讯飞处理后的语音内容，由于是分段返回所以要进行内容的处理
        console.log(e)
        let jsonData = JSON.parse(e.data)
        let jsonArr = jsonData.data.result.ws
        for (let i = 0; i < jsonArr.length; i++) {
          const element = jsonArr[i];
          let str = element.cw[0].w
          this.resultStr = this.resultStr + str
         }
         console.log(this.resultStr)
         this.setData({
           text : this.resultStr//科大讯飞语音转换结果后的内容的文字
         })
      })
      socketTask.onError((err)=>{
        //结束录音
        console.log('socket 出错：',err)
      })
      socketTask.onClose(()=>{
        // 结束录音
        console.log('socket 关闭：')
      })
  },

内容的展示：展示页面添加text用来展示处理后的内容

wxml文件

<view>
  <text class="wenben">{{text}}</text>
<button 
  class="tui-menu-list"
  bindtouchstart="startRecordMp3" 
  bindtouchend="stopRecord"
  type="primary">长按录音开始</button>
</view>

wxss文件内容

.wenben{
  position: absolute;
  height: 60%;
  top: 30px;
  left: 10px;
  right: 10px;
  margin: auto;
}
.tui-menu-list{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  margin: auto;
}

效果图如下

起始内容如下

 

 

处理后返回内容后结果如下

 

到此小程序使用科大讯飞语音转文字功能已经介绍完毕 ，下一章节的内容为将当前的音频数据和转换后的内容保存到微信云服务中 并在记录列表中展示。