微信小程序-百度AI语音识别——（二）

微信小程序-百度AI语音识别（二）

上次在浏览器上实现了小demo，但毕竟pc端的录音还是体验不怎么好， 这次用微信小程序实现一下。

一、新建工程

采用原生小程序的方式进行开发，原来几乎没怎么接触过原生小程序的开发，都是直接vue打包为微信小程序的方式，不过原理应该是一样的，与vue的开发方式差别也不是很大。
打开微信开发者工具，新建工程，当时出于一些七七八八的原因，我建了一个自带云开发方式的工程，但是并没有用到云开发相关的内容。
（其实是当时查阅资料，很多文章都说微信小程序的录音api不支持pcm格式，但是我查了开发文档，其实是支持的）

同时在录音方式的选择上也有两种

• RecorderManager
• wx.startRecord() & wx.stopRecord()
  第二种方式我在尝试的时候，会返回一个临时路径，并且是一个加密的base64串，当时想着后台起个服务转一下，就建了一个带云开发的项目

使用RecorderManager的方式进行录音

RecorderManager是全局唯一的录音管理器
在开始录音时可以传入设置参数进行配置

开始录音

RecorderManager.start(Object object)

配置参数

二、开发

1.简单建立样式

<view class="container">
  <view class="btn-warp">
    <button class="btn" type="primary" bindtap="startRecord">① 开始录音button>
    <button class="btn" type="primary" bindtap="stopRecord">② 结束录音button>
    <button class="btn" type="primary" bindtap="soundRecognize">③ 识别语音button>
  view>
  <view>识别的语音是：{{recognize_result}}view>
view>

2.逻辑部分

//index.js
import { getToken, soundReco } from "../../apis/baidu_ai"
const recorder = wx.getRecorderManager();
Page({
  data: {
    audio_path: "",
    audio_data: undefined,
    recognize_result: ""
  },
  onLoad() {
    getToken();
  },
  startRecord(){
    const options = {
      sampleRate: 16000,  // 采样率16k
      numberOfChannels: 1,
      format: "PCM"  // 格式为pcm
    };
    recorder.start(options);
    recorder.onStart(()=>{
      console.log("Recording!~~~");
    });
    recorder.onError(err=>{
      console.log(err);
    });
  },
  stopRecord(){
    recorder.stop();
    recorder.onStop(res=>{
      this.audio_path = res.tempFilePath;
      // 这里借鉴了一位大佬的方案
      const fs = wx.getFileSystemManager();
      fs.readFile({
        filePath: this.audio_path,
        success: (res)=>{
          this.audio_data = res.data;
        }
      });
    });
  },
  soundRecognize(){
    soundReco(this.audio_data).then(res=>{
      console.log(res);
      this.setData({
        recognize_result: res
      })
    });
  }
})

在获取录音文件内容时，因为RecorderManager中带出的tempFilePath是一个临时文件路径，需要读取出文件的内容。
微信小程序--------语音识别（前端自己也能玩）
用到了微信小程序的文件系统 FileSystemManager

3. 百度接口

百度的接口我都统一抽离出来，放在api文件中

// 获取token
export function getToken(){
  wx.request({
    url: `https://openapi.baidu.com/oauth/2.0/token?grant_type=client_credentials&client_id=${ACCESS_KEY}&client_secret=${ACCESS_SECRET}`,
    method: "POST",
    success: (res)=>{
      // console.log(res);
      wx.setStorage({
        data: res.data.refresh_token,
        key: "user-token",
      })
    }
  });
}

// 语音识别
export function soundReco(data){
  let token = wx.getStorageSync("user-token");
  if(!token){
    getToken();
  }
  return new Promise((resolve, regest)=>{
    wx.request({
      url: `https://vop.baidu.com/server_api?dev_pid=1537&cuid=155236miniapp&token=${token}`,
      method: "POST",
      data: data,
      header: {"Content-Type": "audio/pcm;rate=16000"},
      success: (res)=>{
        resolve(res.data.result[0]);
      },
      fail: regest
    })
  });
}

（还有一点小问题，就是请求token的时候没有做成promise，获取storage失败重新获取时会在没有拿到响应数据token的情况下调用语音识别接口，导致没有token报错，不过是小问题，之后再修吧）
识别结果

项目已经上传gitee

完整工程文件