录音、上传、播放音频微信小程序实践

录音、上传、播放音频微信小程序实践

最近上线了一款智能外呼机器人产品，需要开发一款录音、上传、播放音频功能的
微信小程序给录音师配置外呼话术真人录音。

代码已开源，数据均已本地化处理。适合新手参考学习的完整原生微信小程序小项目。

实践分析

依赖接口

主要使用以下 api

1. wx.getRecorderManager ：获取全局唯一的录音管理器 RecorderManager
2. wx.createInnerAudioContext ： 创建内部 audio 上下文 InnerAudioContext 对象

PS.

1. 默认 audio 组件样式不符合需求，目前只需播放进度条，InnerAudioContext 配合 process 组件实现
2. InnerAudioContext 退出小程序自动停止播放，需要退出小程序依然可播放请使用背景音频 BackgroundAudioManager 代替

为什么要声明全局变量：

1. 录音本身就是唯一全局
2. 语音播放，如果每次离开、进入页面动态生成、销毁（好像有 bug），会有多条音频同时播放，为避免这个问题，使用全局唯一对象管理

const recorderManager: WechatMiniprogram.RecorderManager = wx.getRecorderManager();
const innerAudioContext: WechatMiniprogram.InnerAudioContext = wx.createInnerAudioContext();

录音

• 录音开始配置

const recordOptions = {
   
  duration: 10 * 60 * 1000, // 最多录音时长 10 分钟
  sampleRate: 8000, // 采样率
  numberOfChannels: 1, // 1 个录音通道即可
  format: 'wav', // 服务端指定格式
};
recorderManager.start(recordOptions)

• 初始状态

• 录音检测是否收到声音，本想利用 RecorderManager.onFrameRecorded 来感知是否收到声音，
  展示波形图，但该事件不支持 wav 格式文件。目前监听到开始事件即显示录音计时。

// 监听已录制完指定帧大小的文件事件。如果设置了 frameSize，则会回调此事件。
recorderManager.onFrameRecorded(({
     frameBuffer, isLastFrame }) => {
   
  console.log('frameBuffer.byteLength: ', frameBuffer.byteLength)
  console.log('isLastFrame: ', isLastFrame);
});

• 监听录音开始事件，设置录音进行中状态，并展示录音计时器

recorderManager.onStart(() => {
   
  console.log('recorder start');
  this.startClock();
  this.setData({
   
    ...recordingData,
  });
});

• 停止录音事件，可以接收到本地录音文件地址、录音时长信息。一般上传文件至 CDN ，然后把地址存储到业务服务器，接着试听播放。

recorderManager.stop();

// 停止录音事件
recorderManager.onStop(async (res) => {