微信小程序录音波形图

  • 实现效果
  • 网上主要参考的两篇文章（感谢分享）
  • 具体代码
  • 最后也欢迎大家一起交流，我做这个的时候一开始做了很久，发现百度上也没有多少有效的分享，很多录音小程序的波形图都是假的或者直接一个动效图。

实现效果

Android开发录音波纹效果实现_小程序

网上主要参考的两篇文章（感谢分享）

参考1：https://developers.weixin.qq.com/community/develop/article/doc/000e4c3761c2b81ce80e6babe5b413

下面是自己的具体实现，思路如下：

  • 微信小程序录音已经支持 直接输出 pcm 格式的切片，但是pcm又不能直接播放，又需要转为MP3等可播放的格式，所以最后还是选择了使用 js-mp3 来转换，（参考1的老哥说的不需要转换，我没有调试出来有空再琢磨），最后使用转换后的arraybuffer来绘制波形图

具体代码

  1. 初始化 及 监听切片返回事件 ：onFrameRecorded 
const Mp3 = require('js-mp3');

	this.recorder = uni.getRecorderManager();
	this.recorder.onFrameRecorded(res => {
      const { frameBuffer } = res;
      const decoder = Mp3.newDecoder(frameBuffer);
      if (decoder) {
        const pcmArrayBuffer = decoder.decode();
        const intArray = new Int16Array(pcmArrayBuffer);
        // 到这一步还能理解，但是 intArray 返回的切片数据太多，才疏学浅没有明白里面具体代表的含义，百度也找了很久没什么资料可以参考，最后找规律发现在每一条的最大值基本代表了现在的振幅，所以直接一步到位取了个最大值，有懂的朋友可以不吝赐教一下
        const amplitude = Math.max(...intArray); // 计算当前帧的振幅
        // 最后将每次的振幅保存下来，进行绘制即可 ， 3276.8 是 根据 采样率及编码码率及你的波形图的最高高度得出的一个合适值， 这个可以随便试一试就出来了
        this.lineArr.push(amplitude / 3276.8);
        // 最后得到的数据基本上是一个 0 - 1 范围内的数组 如下第三点
      }
    })
  1. 开始录音配置参数
this.recorder.start({
      format: 'mp3',
      duration: 60000,
      numberOfChannels: 1,
      frameSize: 0.1, //这里设置的太大，返回切片时会有问题，官方的说法：这里是大小/kb，满足设定的大小会回调一次切片
      sampleRate: 44100, // 采样率， 不能过低， js-mp3 不能解析
      encodeBitRate: 64000,  // 编码码率
    });
  1. 最后得到的数据基本上是一个 0 - 1 范围内的数组 this.lineArr 波形图可以通过最大值最小值去限定即可
  2. 然后就可以根据自己的需求绘制波形图了