纯血鸿蒙APP实战开发——语音录制和声音动效实现

介绍

本示例使用AVrecord录制音频和AVrecord的getAudioCapturerMaxAmplitude接口获取振幅实现UI动效;使用AVplayer播放音频

效果图预览

使用说明

1. 按住按钮开始录音。
2. 上划取消录制。
3. 录制完成后点击消息框可播放录音。

实现思路

1. 利用组合手势来实现音频录制与取消录制。

build() {
   
  Column() {
   
    Button($r('app.string.voice_record_dynamic_effect_button')) 
      .gesture(
        GestureGroup(GestureMode.Sequence,
          LongPressGesture()
            .onAction( () => {
   
              this.AVrecord.startRecordingProcess();
            })
            .onActionEnd( () => {
   
              this.AVrecord.stopRecordingProcess();
            }),
          PanGesture()
            .onActionStart( () => {
   
              clearInterval(this.count);
            })
            .onActionEnd( () => {
   
              this.AVrecord.stopRecordingProcess();
            })
        )
          .onCancel( () => {
   
            this.AVrecord.startRecordingProcess();
          })
      )
    }
}

2. 在音频录制的时候通过getAudioCapturerMaxAmplitude获取声音振幅使UI变化。
   (1)在录制音频的时候通过getAudioCapturerMaxAmplitude获取振幅；
   (2)对振幅做占比运算，随机取最大值与最小值之间的值（Math.floor(Math.random()）来使column的高度随机变化；

async
startRecordingProcess()
{
   
  if (this.avRecorder !== undefined) {
   
    await this.avRecorder.release();
    this.avRecorder = undefined;
  }
  // 1.创建录制实例
  this.avRecorder